/* NAVIAGTION BAR */
.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #001f3f; /* Navy Blue */
  padding: 20px 10%;
  /*position: sticky;*/
  top: 0;
  z-index: 1000;
}

.logo {
  color: white;
  font-size: 1.8rem;
  font-weight: bold;
   transition: color 0.3s ease;
}
.logo:hover {
  color: gold;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
}

.nav-links li a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links li a:hover, .nav-links li a.active {
  color: goldenrod; /* Highlight color on hover or active */
}

.menu-toggle {
  display: none;
}

.burger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
}

.burger .line {
    width: 25px;
    height: 3px;
    background: white;
}

/* END OF NAV BAR */

body{
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    color: #00133F;
}

a{
    text-decoration: none;
}

.services-heading{
    margin-top: 2.5%;
    text-align: center;
    font-weight: bold;
    font-size: 90%;
    color: #001F3F;
    letter-spacing: 3px;
}

/* FIRST SECTION */

.first-section-title{
    text-align: center;
    font-weight:bolder;
    font-size: 300%;
    margin-top: 1%;
    margin-bottom: 1%;
}

.core-services {
    margin-right: 5.5vw;
}

.core-service-boxes {
    display: flex;
    justify-content: center;
    margin: 4.9vw 3.5vw;
}

.core-service-box-top, .core-service-box-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #00133F;
    color: white;
    width: 25vw;
    height: 18vw;
    font-size: 1.7vw;
    clip-path: polygon(100% 50%, 75% 0%, 25% 0%, 0% 50%, 25% 100%, 75% 100%);
    background: #00133F;
    box-shadow: inset 1.4vw 1.4vw 2.8vw #000c27,
                inset -1.4vw -1.4vw 2.8vw #001a57;
}

.core-service-box-top {
    margin-top: -3.8vw;
}

.core-service-box-bottom {
    margin: 5.2vw -6vw;
}

/* SECOND SECTION */

.expanded-services{
    background-color: #00133F;
    padding: 2% 0%;
}

.second-section-title{
    font-weight: bold;
    font-size: 250%;
    margin-bottom: 2%;
    text-align: center;
    color: white;
}

.expanded-service-item{
    color: white;
    width: 20em;
    height: 20em;
    border-radius: 51px;
    background: white;
    box-shadow: inset 20px 20px 20px  #716e80,
                inset -20px -20px 20px #ffffff;
    margin: 2% 0%;
}

.expanded-services-items-top, .expanded-services-items-bottom{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.expanded-service-item-icon{
    width: 20%;
    height: 20%;
    margin: 5% auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10% auto;
    background-color: white;
}

.expanded-service-item-title{
    font-size: 150%;
    margin-left: 4%;
    text-align: center;
    color: #00133F;
}

.expanded-service-item-content{
    font-family: 'Inter';
    font-weight: 100;
    font-size: 0.9em;
    margin: 5% 5%;
    text-align: center;
    color: #00133F;
}

/* THIRD SECTION */

.comprehensive-services {
    display: flex;
    justify-content: center;
    gap: 3em;
    margin: 5% 3%;
}

.third-section-title {
    margin-top: 13%;
    font-size: 2.3rem;
    font-weight: bold;
    text-align: center;
}

.service-tags-top, .service-tags-bottom {
    display: flex;
    justify-content: center;
    gap: 0.15vw;
}

.service-tags-bottom {
    margin-left: 19vw;
    margin-top: -4.8vw; 
}

.tag-1, .tag-2, .tag-3, .tag-4 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    width: 19vw;
    height: 19.8vw;
    font-size: 1.4vw;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: #00133F;
    box-shadow: inset 1.4vw 1.4vw 2.8vw #000c27,
                inset -1.4vw -1.4vw 2.8vw #001a57;
}

/* FOURTH SECTION */

.consultation-section{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 20em;
}

.consultation-title{
    font-weight: bold;
    font-size: 2.5rem;
    text-align: center;
    color: #001F3F;
}

.consultation-button{
    text-decoration: none;
    background-color:#001F3F;
    color: white;
    border-radius: 100px;
    padding: 2% 10%;
    font-size: 1vw;
    font-weight: 550;
    border: none;
    margin: 2% 0%;
    letter-spacing: 1.2px;
}

/* FOOTER */

footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #001F3F;
    color: white;
}

.footer-links-section{
    display: flex;
    justify-content: space-between;
    text-align: center;
    margin-left: 5%;
    font-size: 90%;
    gap: 15%;
}

.link-texts, .phone,.contact-info{
    white-space: nowrap; 
    font-weight: lighter;
    font-size: 1.2vw;

}

.footer-links{
    color: white;
    text-decoration: none;
}

#footer-logo{
    font-size: 2vw;
}

.contact-info{
    margin-right: 10%;
}

.footer-email{
    color: white;
}

.phone-numbers{
    display: flex;
    flex-direction: column;
    margin-top: -5%;
}

.phone{
    margin-left: 10%;
    color: white;
}

/* PHONE DISPLAY */
@media (max-width: 800px) {
    .burger {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 70px;
        right: 20px;
        width: 200px;

        flex-direction: column;
        background-color:navy;
        padding: 1rem;
        border-radius: 8px;
        z-index: 999;
    }

    .menu-toggle:checked ~ .nav-links {
        display: flex;
    } 

    .first-section-title, .second-section-title, .third-section-title, .consultation-title{
        font-size: 190%;
    }
    
    .core-service-box-top,.core-service-box-bottom{
        font-size: 70%;
        width: 32vw;
        height: 25vw;
    }

    .core-service-box-bottom{
        margin-top: 10%;
    }

    .comprehensive-services{
        flex-direction: column;
        align-items: center;
    }

    .comprehensive-services-boxes{
        margin-top: -10%;
    }

    .tag-1, .tag-2, .tag-3, .tag-4 {
        width: 35vw;
        height: 35vw;
        font-size: 3vw;

    }

    .service-tags-top{
        margin-right: 18%;
        gap : 0.7vw;
    }

    .service-tags-bottom{
        margin-top: -9%;
        gap : 0.7vw;
    }

    .consultation-section{
        margin-top: -9%;
    }

    .consultation-button{
        padding: 5% 20%;
        font-size: 3vw;
    }

    footer{
        padding: 5%;
    }

    #footer-logo{
        align-items: start;
        order: 1;
        font-size: 4vw;
    }

    a{
    text-decoration: none;
}

    .footer-links-section{
        flex-direction: column;
        align-items: center;
        order: 2;
        font-size: 10vw;
    }

    .link-texts,.contact-info,.phone{
        font-size: 2vw;
    }

    .contact-info,.phone{
        order: 3;
        font-size: 2.5vw;
        margin-right: 0;
    }
}

/* ANIMATION */

.consultation-button {
  position: relative;
  display: flex;  
}

.consultation-button::after{
  content: "";
  width: 0%;
  height: 100%;
  background: #ffd401;
  position: absolute;
  transition: all 0.4s ease-in-out;
  top: 0;
  right: 0;
  z-index: 1;
  border-radius: 100px;
}

.consultation-button:hover::after {
  right: auto;
  left: 0;
  width: 100%;
}

.consultation-button span {
  z-index: 2;
  position: relative;
  transition: transform 0.3s ease-in-out;
}

.consultation-button:hover span {
  animation: scaleUp 0.3s ease-in-out;
  color: #001F3F;
}

@keyframes scaleUp {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.footer-email:hover,.phone:hover,#footer-logo:hover,.footer-links:hover{
    color: gold;
    transition: color 0.3s ease;
}