.accordionheader{
        font-size: 200px;
        font-family: 'Trebuchet MS',
                     'Lucida Sans Unicode', 
                     'Lucida Grande', 
                     'Lucida Sans',
                      Arial, 
                      sans-serif;
                }

.background{
        background-color: rgb(71, 92, 96);
        font-family: 'Trebuchet MS';
       }

/* ---------Call button------------*/
 
  .about{padding-top: 3%;}   
 /*--------NAVAGATION & BUTTONS -----------*/
    a{ text-decoration: none; 
               background-color:none;color:  black; }
  .navbar { 
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
            -ms-transition: all 0.3s ease-out;
            transition: all 0.3s ease-out;

              }
  .hovercolor:hover{color: blue;}
  .profileimage{
        opacity: .3; 
        animation-name: profileanimation;
        animation-duration: 7s;
        } 
  @keyframes profileanimation {
            from {opacity:1;}
              to {opacity:.3;}
                      }                
  .profileimage:hover{
        opacity: .9; 
        cursor: pointer;
        }  
  .navbar{
        z-index:1;
        font-size: medium;
        }     


 .nav-link:hover {
        color:#87a7a4;
 }

 .nav-header:hover {
        color:#6d9d98;
        border-bottom: 1px solid rgb(5, 52, 63);
        /* box-shadow: 0px 14px 2px -1px rgba(31,8,17,1); */
        box-shadow: inset 0px -116px 5px -110px rgb(86, 78, 69);
 }

  .actionbutton{
        z-index:1;
        position: fixed; 
        top: 45%; 
        left: 50%; 
        border-radius: 10px;            
        background-color: #3b7ed5; 
        border-color: transparent;
        box-shadow: 0px 5px 10px 0px rgb(122, 135, 142);
        color: black;
        }
 
  .actionbutton:hover{
       background-color: rgb(73, 73, 88);   
       border-color: transparent;           
       }

 .actionbutton:active{
       transform: translateY(8px) !important;
      }   

 .actionbutton-submit {
        border-radius: 10px;            
        background-color: #3b7ed5; 
        border-color: transparent;
        box-shadow: 0px 5px 10px 0px rgb(122, 135, 142);
        color: black;
        }
 
 .actionbutton-submit:hover{
       background-color: rgb(73, 73, 88);   
       border-color: transparent;           
       }

 .actionbutton-submit:active{
       transform: translateY(8px) !important;
      }  

.resume{
       display: none;
      }


.resume-link:hover .resume {
        display: initial !important;
        text-decoration: none !important;
        color:  black;
       }

.linkIn{
        display: none;
       }   
       
.linkIn-link:hover .linkIn {
        display: initial !important;
        text-decoration: none !important;
        color:  black;
       }

.gitHub{
        display: none;
       }   
       
.gitHub-link:hover .gitHub {
        display: initial !important;
        text-decoration: none !important;
        color:  black;
       }
    /*--------- main page container-----------*/         
      
/*--------- main page container-----------*/
  .nameheader{ padding-left:20%; padding-top: 2%;}              
  span.highlight{color:rgb(98, 98, 233)}
  span.highlightname{font-weight: bold ;}

  .navitem ul li a:hover {
            text-decoration-line: underline; 
            color:  rgb(50, 45, 51)
                   }

  .flexcontainer{padding-top:5%;}  

  /* --footer section-------- */
  /* .footersection{position: static;
                   bottom: 0;
                    width: 100%;
                   height: 5%}
  .footerabout{padding-top:10%; position: static;
                        bottom: 0;
                         width: 100%;
                        height: 5%} */
/*-----------Responsive Mobile View Home Field---------------*/
     
  /*-----------Responsive Mobile View Project Field ---------------*/
  @media (max-width: 800px) 
          {.actionbutton{position:fixed; top: 65%; left: 65%;
          }}
  @media (max-width: 500px) 
          {.nameheader{padding-left: 12% !important;
          }}

  @media (max-width: 500px) 
          {.responsivepProfile{height: 300px !important ;
          }} 
  @media (max-width: 320px) 
          {.responsivepProfile{height: 250px !important ;
          }} 
  @media (min-width: 700px) 
           {.nameheader{padding-left: 25%; !important;
          }} 
  @media (min-width: 1025px) 
           {.nameheader{padding-left: 18%  !important;
          }}

          /* 1024 resolution  */
  @media (max-width: 1024px) 
          {.nameheader{padding-left: 10%;
          }}


        /* 1024 resolution ends here  */  

   @media (max-width: 800px) 
           {.responsivepProfile{height:400px;
           }}  
           
  @media (max-width: 800px) 
          {.navbarResponsivePadding{padding-left: 0%; padding-top:5% !important;
          }}
  @media (max-width: 800px) 
          {.responsiveSection{padding-left: 5% !important;
          }}

   @media (min-width: 1100px)
           {.nameheader{padding-left: 18% !important;
          }} 
 
   /* ----Mobile Responsive for Footer Section starts here----- */

@media (max-width: 319px) 
       {.mainpageflexcontainer{ padding-left: 0%!important;
         }}
 @media (min-width: 320px) and (max-width: 375px) 
          {.mainpageflexcontainer{ padding-left: 8%!important;
           }}
 @media (min-width: 376px) and (max-width:481px)
        {.mainpageflexcontainer{ padding-left: 10% !important;
            }}
@media (min-width: 482px) and (max-width:700px)
        {.mainpageflexcontainer{ padding-left: 20% !important;
          }}
@media (min-width: 701px) and (max-width:900px)
        {.mainpageflexcontainer{ padding-left: 25% !important;
          }}
@media (min-width: 901px) and (max-width:991px)
        {.mainpageflexcontainer{ padding-left: 28% !important;
          }}
 @media (max-width: 576px) 
          {.mainpageflexcontainer{ flex-direction: column !important;
           }}
  
@media (max-width: 400px) 
          {.footerNavMobileRes{flex-direction: column !important;
          }}
@media (max-width: 797px) and (min-width: 401px)
          {.footerNavMobileRes{justify-content: center !important;
          }}
@media (max-width: 800px) 
          {.footercContainerMobileRes{flex-direction: column; text-align: center !important;
          }}
            /* ----Mobile Responsive for Footer Section ends here----- */
         /* ------main page skill container mobile responisve starts here---- */

 @media  (max-width:481px){
        .skillcontainer{ 
                padding-left: 0% !important;
            }}

@media (min-width: 482px) and (max-width:700px){
        .skillcontainer{ 
                padding-left: 14% !important;
          }}

@media (min-width: 701px) and (max-width:900px){
        .skillcontainer{ 
                padding-left: 16% !important;
          }}

@media (min-width: 901px) and (max-width:991px){
        .skillcontainer{ 
                padding-left: 22% !important;
          }} 
        

@media (max-width: 481px){
        .skills{
               width: 250px !important;     
        } 
} 
          
@media (max-width: 500px){
        .project-body-responsive{
                width: 95% !important;
        }
}          
      
@media (max-width: 500px){
        .about-body-responsive{
                width: 95% !important;
        }
} 
         /* ------main page skill container mobile responisve ends here---- */


   /* --------------about page section----------------*/
  .description{list-style-type:none;
           }
  .list {S
              font-weight:bolder;
          }

                 
  .skill-name{ 
        opacity: 1;
       
           }

  .skills{ 
        background-color: white;
        border: 1px solid rgb(115, 113, 119);
        padding: 15px; height: 280px; padding-top:50px;
        box-shadow: 20px -16px 5px -1px rgba(0,0,0,0.63);
       -webkit-box-shadow: 20px -16px 5px -1px rgba(0,0,0,0.63);
       -moz-box-shadow: 20px -16px 5px -1px rgba(0,0,0,0.63); 
           } 

  .skill-name:hover{
        opacity:.5;
        }        
  .skill-name{
         background-color: white;
         border: 1px solid rgb(115, 113, 119);
         padding: 15px; height: 400px; padding-top:50px;
         box-shadow: 20px -16px 5px -1px rgba(0,0,0,0.63);
        -webkit-box-shadow: 20px -16px 5px -1px rgba(0,0,0,0.63);
        -moz-box-shadow: 20px -16px 5px -1px rgba(0,0,0,0.63); 
        } 
  .skill-description{
        padding-top: 30px !important;
       }
   
  /*  -------Project Section CSS------- */
 
       
.project-name{
         opacity: 1;
        }

.project-name:hover{
        opacity:.5;
        }   

.project-name{ 
        border: 1px solid rgb(115, 113, 119);
        width: 370px; height: 220px; padding-top:0px;
        box-shadow: 15px -10px 5px -1px rgba(0,0,0,0.63);
       /* -webkit-box-shadow: 20px -16px 5px -1px rgba(0,0,0,0.63);
       -moz-box-shadow: 20px -16px 5px -1px rgba(0,0,0,0.63);  */
       } 

 .footerAllPage{
        align-items:last baseline;
        display: flex;
        height:100vh; 
        justify-content: center;
        margin: 0;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
      }

.responsivepProfile{
        border-radius: 5%;
}

.navbarColor{
        background-color:#ffffff;
}

/* Background color */
.about .accordion {
  background-color: #f0f0f0;
}

/* Border color */
.about .accordion-item {
  border-color: none;
}

/* Active color */
.about .accordion-button:not(.collapsed) {
  background-color: rgb(164, 180, 184);
  border: none; /* Remove border for active state */
}

.blog-content-firts-line{
        padding-left: 50px;
}

.capstone-link{
        color:rgb(45, 12, 130);
}

.blog-background-image {
        background-image: url(../resources/buildings/pexels-jonas-ferlin-1845269.png);
        background-size: cover;
        background-position: center;
        height: 100vh;
      }

.about-background-image {
  background-image: url(../resources/buildings/pexels-mantas-sinkevičius-1106476.png);
  background-size: cover;
  background-position: center;
  height: 100vh;
}

.about-background{
        background-color: transparent;
}

.project-background-image  {
        background-image: url(../resources/buildings/pexels-mantas-sinkevičius-1106476.png);
        background-size: cover;
        background-position: center;
        height: 100vh;
      }

.google-map {
        height: 600px;
        width: 100%;
        
}

.google-map-frame {
        border-radius: 15px;
        height: 580px;
        width: 100%;
        box-shadow: -2px 3px 17px 3px rgba(72, 70, 70, 0.41);
        padding: 2px;
}



@media (max-width:1100px ) {
 .contact-info-container  {
        flex-direction: column !important;
    }
}

@media (max-width:1100px ) {
        .container-info-items  {
               width: 100% !important;
           }
       }

@media (max-width:699px) {
        .contact-info-container-main  {
               width: 80% !important;
           }
       }

@media (max-width:799px ) and (min-width: 700px) {
        .contact-info-container-main  {
               width: 70% !important;
           }
       }

@media ( max-width:1100px ) and (min-width: 800px) {
        .contact-info-container-main  {
               width: 60% !important;
           }
       }

.contact-info-container {
               border-radius: 15px;
               background-color: #e7efee;
               box-shadow: -2px 3px 17px 3px rgba(72, 70, 70, 0.41);
            }

.contact-info-text {
                padding-left: 10px;
        }

.contact-info-link:hover {
                color: #1672eb;
        }


.contact-icon {
        width:30px;
}

.modal-body{
        max-width: 400px;
}

.icon-footer {
     
}

.icon-image-footer:hover {
        opacity: .3;
}

.icon-footer:hover {
        color: #b5c2d4 !important;
}