/* Smooth scroll */
:root {
    scroll-behavior: smooth;
  }

/***********
*    Font
************/
#service .bi, #location .bi{
    font-size:20px;
}


.top-header {
    background: #A7DACD;
    color: white;
    /* text-align: right; */
    /* padding-right:50px;  */
    font-size:17px;
    font-weight:700;
}

.font-primary{
    color: #1F6F71 !important;
}

.font-weight-condensed{
    font-weight: 700;
}

.font-family-monst{ 
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
/* end font */

/***********
*    Logo
************/

.logo {
    width:50px;
}
/* logo */

/***********
*    Button
************/
/*
    Button Primary
*/
.btn-primary {
    background-color: #1F6F71;
    border: 1px solid #1F6F71;
    color: white;
}

.btn-primary:focus{
    /* background-color: #A7DACD; */
    border: 1px solid #1F6F71;
    /* color: #1F6F71; */
}
.btn-primary:hover, .btn-primary:active {
    background-color: white;
    border: 1px solid #1F6F71;
    color: #1F6F71;
    transition: 0.2s;


}
/**** Button Round *****/
.btn-round:focus{
    /* background-color: #A7DACD; */
    border: 1px solid #1F6F71;
    /* color: #1F6F71; */
}
.btn-round:hover, .btn-round:active {
    background-color: #a1d9db;
    border: 1px solid #a1d9db;
    color: #1F6F71;
    transition: 0.2s;
    

}
/* end button */

h1, h2, h3, h4, button{
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}
.btn {
    font-weight: 700;
}

.btn-round{
    border-radius:5px;
    background: none;
    border:1px solid #1F6F71;
    color: #1F6F71;
}
body {
    font-family: Arial, Helvetica, sans-serif;
     overflow-x: hidden;
}

/***********
*    Header
***********/
h2 {
    position: relative;
    display: inline-block;
    color: #1F6F71;
    padding-top: 10px; /* Adjust the padding as needed */
}

h2::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 30.5%;
    width: 40%;
    height: 6px; /* Line thickness */
    background-color: #A7DACD; /* Line color */
    color:#1F6F71;
}

/* end header */
/***********
*    Section
***********/
.about-us-img{
    right:0px;
}


.about-us-image{
    background-image: url('../assets/img/about-us.png');
    background-size: cover; /* Ensures the image covers the section */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
}
#whychooseus {
    background-color: #EAF6F3; 
}


.why-choose-us-item .header{
    font-weight: 900;
    color: #1F6F71;
    font-size:20px;
}

.why-choose-us-item{
    text-align: center;
    
}


#location{
    background: #A7DACD;
}
.bg-gray{
    background-color: #999;
}

.color-dark-aqua{
    color: #1F6F71;
}
.bg-dark-aqua{
    background-color: #1F6F71;
}



.bottom-footer h4{
    color:#1F6F71;
    font-size: 20px;
}
.bottom-footer ul li a{
    color: black;
}

/***********
*    Menu 
***********/
.nav-link-animate {
    display: inline-block;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    transition: all 0.3s ease;
}
.nav-link-animate::before,
.nav-link-animate::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px; /* Border thickness */
    background-color: #1F6F71; /* Border color */
    transition: width 0.3s ease;
}
.nav-link-animate::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.nav-link-animate::after {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.nav-link-animate:hover::before,
.nav-link-animate:hover::after {
    width: 50%; /* Set the width when hovering */
}
/* end menu */



.why-choose-us-item {
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.why-choose-us-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.why-choose-us-item svg {
    color: #007BFF;
}

.why-choose-us-title {
    /* font-size: 1.25rem; */
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.why-choose-us-description {
    font-size: 1rem;
    color: #555;
}

/* CSS Grid layout for the section */
.why-choose-us-container {
    /* display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; */
}


/****************
*    Responsive
*****************/
/* On medium screens, 3 boxes per row */
@media (max-width: 992px) {
    .bi{
        font-size:20px;
    }
    .why-choose-us-container {
        /* grid-template-columns: repeat(3, 1fr); */
    }
}

/* On small screens, 2 boxes per row */
@media (max-width: 768px) {
    
    .bi{
        font-size:20px;
    }
    .why-choose-us-container {
        /* grid-template-columns: repeat(2, 1fr); */
    }
}
@media (min-width: 577px) {

}
/* On extra small screens, 1 box per row */
@media (max-width: 576px) {
    .masthead {
        padding-top: 240px;
        text-align: center;
        color: #fff;
        background-image: url('../assets/img/mobile-banner.png');
        background-repeat: no-repeat;
        background-attachment: attachment;
        background-position: center center;
        background-size: contain;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    #contact label, #contact input,
    #contact input::placeholder{
        font-size:14px;
    }
    #contact button{
        margin-top:10px;
    }

    .bi{
        font-size:20px;
    }

    iframe{
        max-width: 100%;
        height: 100%;
    }
    .masthead{
        padding-top:0;
    }
    .why-choose-us-container {
        /* grid-template-columns: 1fr; */
    }
}

    
    .custom-icon {
        max-width: 100%; /* Ensures the image does not overflow the parent container */
        height: auto; /* Maintain aspect ratio */
    }

@media (max-width: 767px) {
    .custom-icon {
        max-width: 50%; /* Set a smaller max-width for mobile view */
    }
}
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');



/* Custom styles */
.whatsapp-icon {
    position: fixed;
    right: 20px;  /* Distance from the right edge */
    top: 50%;      /* Center vertically */
    transform: translateY(-50%); /* Center it properly */
    z-index: 1000; /* Ensure it's on top of other elements */
    font-size: 50px; /* Set the icon size */
    color: #25D366; /* WhatsApp green color */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);  */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.whatapp-text {
    font-size: 13px;
    color: black;
    background: white;
    padding: 5px;
    top: -13px;
    position: relative;
    right: -8px;
}

/* Hover effect */
.whatsapp-icon:hover {
    transform: translateY(-50%) scale(1.1);
}


.back-to-top {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    height: 2.5rem;
    width: 2.5rem;
    text-align: center;
    line-height: 2.5rem;
    text-align: center;
    opacity: 0;
    border-radius: 50%;
    color: #fff;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 999;
   border:2px solid #7bba94;
}

.back-to-top:hover{
    /* color:#25D366; */

    background-color: white;
    color: #1F6F71;

}



.bottom-footer ul li a{
    text-decoration: none;
    margin-left:0px;
    padding-left:0px;
}
.bottom-footer ul li a:hover{
    color:gray;
    transition: .3s;
}
.fixed-top .bi{
    font-size: 21px;
}
.connect-with-us{
    margin-right: 10px;
}

.fixed-top .bi:first-child{
    margin-right: 5px;
}

.masthead {
    padding-top: 540px;
    text-align: center;
    color: #fff;
    background-image: url("../assets/img/banner.png");
    background-repeat: no-repeat;
    background-attachment: attachment;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: auto;
    max-width: 100%;
}
.masthead .masthead-subheading {
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.5rem;
    margin-bottom: 25px;
    font-family: "Roboto Slab", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.masthead .masthead-heading {
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 3.25rem;
    margin-bottom: 2rem;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

@media (min-width: 768px) {
    .masthead {
        padding-top: 540px;
    }
    .masthead .masthead-subheading {
        font-size: 2.25rem;
        font-style: italic;
        line-height: 2.25rem;
        margin-bottom: 2rem;
    }
    .masthead .masthead-heading {
        font-size: 4.5rem;
        font-weight: 700;
        line-height: 4.5rem;
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .masthead {
        padding-top: 240px;
        text-align: center;
        color: #fff;
        background-image: url("../assets/img/mobile-banner.png");
        background-repeat: no-repeat;
        background-attachment: attachment;
        background-position: center center;
        background-size: cover;
        width: 100%;
        height: auto;
        max-width: 100%;
    }
    .sitename{
        font-size:17px
    }


}

#aboutus p{
    text-align: justify;
}

#services img{
    width: 80px;
}
.icon-service {
    text-align: right;
}
#whychooseus svg{
    width: 80px;
}
#whychooseus img{
    width:50px;
}


.animate-on-scroll:hover {
    transform: scale(1.05);
}


  @media(max-width: 768px){
    .top-header{
        padding-top:0px !important;
        padding-bottom:0px !important;
        margin-top:0px !important;
        margin-bottom:0px !important;
        height: 35px;
        transition: height 0.3s;
    }
    
  }
  /* Fluid Typography */
  @media (max-width: 480px) {
    .top-header{
        padding-top:0px !important;
        padding-bottom:0px !important;
        margin-top:0px !important;
        margin-bottom:0px !important;
        height: 35px;
        transition: height 0.3s;
    }
    
    .welcome-to{
        text-shadow: 1px 1px 10px white;
    }

    section.my-skip{
      padding-top:10px;
      padding-bottom:10px;
    }

    .our-plan, .register-button{
      text-align: center;
      margin-bottom:20px;
    }



  }