* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    
}

a{
    text-decoration: none;
}

/*Home Page - banner*/

.homehero {
    height: 100vh;
    width: 100%;
}

.white-bg {
    background-color: white;
    width: 0%;
}

.blue-bg {
    height: 105vh;
    width: 100%; 
    display: flex;
    position: relative; 
    overflow: hidden; 
}

.blue-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #02215B;
    transform: translateX(25%); 
    z-index: -1; 
}
@media (max-width: 400px) {
    .blue-bg::before {
        transform: translateX(0%);
    }
}

.navbar-container {
    width: 100%;
    /* position: fixed;
    top: 0; */
    left: 0;
    z-index: 100;
}

nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* height: 70px; */
    padding: 1rem;
}

.logo-img {
    display: flex;
    align-items: center;
    /* flex: 1; */
    justify-content: flex-start; 
    text-decoration: none;
    cursor: pointer;
}

.logo-img img {
    width: 130px;
}

.nav-items {
    display: flex;
    justify-content: center;
    flex: 2; 
}

.nav-items li {
    list-style: none;
    padding: 0 15px;
}

.nav-items li a {
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}

.nav-items li a:hover {
    color: #ff3d00;
}
.nav-items li a.active {
    color: #ff3d00;  
    font-weight: bold;
    border-bottom: 2px solid #ff3d00;  
}

.get-started {
    display: flex;
    justify-content: flex-end;
    background-color: #ff3d00;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}

.get-started:hover {
    background-color: #ff5733;
}


@media (max-width: 1023px) {
    .get-started {
        display: none;
    }
}

/* Show button only for laptop view */
@media (min-width: 1024px) {
    .get-started {
        display: flex;
    }
}
.icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
    height: 40px;
    z-index: 10;
}
.menu-icon,
.cancel-icon {
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
}

.menu-icon {
    display: flex;
        justify-content: center;
        align-items: center;
}

.cancel-icon {
    display: none;
}

.nav-items.active ~ .menu-icon {
    display: none;
}

.nav-items.active ~ .cancel-icon {
    display: block;
}

@media (max-width: 1023px) {
    .icon-container {
        right: 15px;
        top: 15px;
    }

    .menu-icon,
    .cancel-icon {
        font-size: 20px;
    }
}

@media (min-width: 1024px) {
    .icon-container {
        display: none !important;
    }
}

.logo-img img {
    max-height: 50px;
    width: auto;
}

.nav-items {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.nav-items li {
    /* margin-left: 20px; */
}

.nav-items a {
    text-decoration: none;
    color: #333;
}

.nav-items a.active {
    font-weight: bold;
}
 
@media (min-width: 1024px) {
    .menu-icon,
    .cancel-icon {
        display: none !important;
    }
}


/* Mobile styles */
@media (min-width: 300px) and (max-width: 599px) {
    nav {
        flex-wrap: wrap;
        padding: 0px 20px;
    }

    .logo-img {
        flex: none;
        margin-bottom: 10px;
    }

  

    .nav-items {
        flex: none;
        position: fixed;
        top: 60px;
        left: -108%;
        width: 100%;
        margin: 0 auto;
        /* height: 100%; */
        /* height: 65%; */
        background: #02215B;
        text-align: center;
        transition: left 0.3s ease;
    }

    .nav-items.active {
        left: 0;
        display: block;
    }

    .nav-items li {
        padding: 20px;
    }
}

/* iPad styles */
@media (min-width: 600px) and (max-width: 1023px) {
    nav {
        flex-wrap: wrap;
        padding: 1rem;
    }

    .logo-img {
        flex: none;
        margin-bottom: 10px;
    }

     

    .nav-items {
        flex: none;
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        /* height: 100%; */
        background: #14181f;
        text-align: center;
        transition: left 0.3s ease;
    }

    .nav-items.active {
        left: 0;
        display: block;
    }

    .nav-items li {
        padding: 20px;
    }
}

/* Laptop styles */
@media (min-width: 1024px) {
    nav {
        /* padding: 0 100px; */
    }

    .nav-items {
        position: static;
        display: flex;
        background: transparent;
    }

   
}

.headerContent {
    position: relative;
    top: 0;
}

.headerContent header {
    /* display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background-color: transparent;
    color: #fff;
    position: fixed;
    width: 100%;
    z-index: 1000; */
}
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    background-color: transparent; 
    position: fixed;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

 

.navbar .nav-items a {
    color: #fff; /* Default color for links */
    transition: color 0.3s ease;
}

.navbar .logo-img img {
    filter: brightness(100%);
    transition: filter 0.3s ease;
}

/* Scrolled styles */
.navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.85);  
}

.navbar.scrolled .nav-items a {
    color: #fff; /* Change links to black */
}

.navbar.scrolled .logo-img img {
    /* filter: brightness(0%); */
}

header section{
    width: 100%;
}

.hero-container {
    position: relative;
    width: 90%;
    margin: 6% auto 0; /* Correct margin shorthand */
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
    background: linear-gradient(#0016664F, rgba(28, 28, 28, 0.56)), 
        url('../assets/homebg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    padding: 1rem;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero-container {
        margin-top: 8%;
    }
}
@media (max-width: 768px) {
    .hero-container {
        margin-top: 10%;
    }
}
@media (max-width: 400px) {
    .hero-container {
        margin-top: 22%;
    }
}
.hero-img {
    width: 100%;
    height: auto;
}

.hero-container .content {
    width: 100%;
    z-index: 2;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* text-align: center;  */
    margin-left: 2rem;
    /* padding-top: 5%; */
}

.hero-container .content .heroContent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem; 
    width: 100%;
    max-width: 600px;  
    color: white;
}

.hero-container .content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    z-index: -1;
}

.hero-container .content .heroContent p:first-of-type {
    font-size: 0.8rem;
    font-weight: 500;
    margin: 0;
}

.hero-container .content .heroContent p:nth-of-type(2) {
    font-size: 0.8rem;
    font-weight: 400;
    margin: 0;
    line-height: 1.6;
}

.hero-container .content .heroContent h1 {
    font-size: 3rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}
a {
    cursor: pointer;
}
.hero-container .content .heroContent .hero-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    background-color: #E26600;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px; 
    transition: background-color 0.3s ease;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 1rem; 
    cursor: pointer;  
}

.hero-container .content .heroContent .hero-btn:hover {
    background-color: #d15500;  
}

@media (min-width: 300px) and (max-width: 599px) {
    .hero-container {
        height: 80vh;
    }

    .hero-container .content .heroContent h1 {
        font-size: 1.8rem;
        width: 100%;
        text-align: center; /* Ensure text is centered */
    }

    .hero-container .content .heroContent p {
        font-size: 0.9rem;
        line-height: 1.5;
        width: 90%;
        text-align: center; /* Ensure text is centered */
    }

    .hero-container .content .heroContent .hero-btn {
        width: 140px;
        font-size: 0.9rem;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .hero-container {
        height: auto;
    }

    .hero-container .content .heroContent h1 {
        font-size: 2.2rem;
        line-height: 1.4;
        width: 70%;
        text-align: center; /* Ensure text is centered */
    }

    .hero-container .content .heroContent p {
        font-size: 1rem;
        line-height: 1.8;
        width: 80%;
        text-align: center; /* Ensure text is centered */
    }

    .hero-container .content .heroContent .hero-btn {
        width: 160px;
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .hero-container {
        /* height: 95vh; */
    }

    .hero-container .content .heroContent h1 {
        font-size: 2rem;
        line-height: 1.3;
        text-align: left;
        /* width: 60%; */
    }

    .hero-container .content .heroContent p {
        font-size: 1rem;
        line-height: 1.8;
        width: 75%;
        text-align: left; /* Align text left for laptop view */
    }

    .hero-container .content .heroContent .hero-btn {
        cursor: pointer;
        width: 170px;
        font-size: 1rem;
    }
}



  /*Home Page - section 2 */

  .homeSection2 {
    width: 90%;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;  
    /* margin-top: 7%; */
    margin-bottom: 30px;
}

.homeSection2Content {
    width: calc(50% - 20px); 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.homeSection2ContentImg {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.homeSection2ContentImg img {
    height: 215px;
    width: 48%;
    object-fit: cover; 
}

.roundContainer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.roundContainer h1 {
    font-size: 2rem;
    margin: 0 !important;
    color: #E26600 !important;
}

.roundContainer p {
    font-size: 0.8rem !important; 
    color: #02215B !important;
    margin-top: 10px !important;
}

.homeSection2Content .heading {
    font-size: 18px; 
    color: #E26600;
    margin-bottom: 1rem;
}

.homeSection2Content h1 {
    font-size: 33px;
    font-weight: 600;
    color: #121212;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.homeSection2Content p {
    font-size: 20px;
    line-height: 1.6; 
    color: #666;
    margin-bottom: 1rem;
}

.homeSection2Content a {
    width: 200px;
    background-color: #E26600;
    color: #fff;
    padding: 0.5rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9rem;
    text-decoration: none;
    text-align: center;
}

.homeSection2Content a:hover {
    background-color: #db6300; 
}

/* Mobile (1 col per row) */
@media (max-width: 599px) {
    .homeSection2{
        margin-top: 15%;
    }
    .homeSection2Content {
        width: 100%;  /* Full width on mobile */
        align-items: center;
        text-align: center;
    }

    .homeSection2ContentImg {
        flex-direction: column;  
        justify-content: center;
    }

    .roundContainer {
        width: 120px;
        height: 120px;
    }

    .homeSection2ContentImg img {
        width: 100%;  /* Image width 100% for mobile */
        margin-bottom: 10px;
    }
}

/* iPad and Laptop (2 cols per row) */
@media (min-width: 600px) and (max-width: 1023px) {
    .homeSection2{
        margin-top: 10%;
    }
    .homeSection2Content {
        width: calc(50% - 20px); 
    }

    .homeSection2ContentImg img {
        width: 48%; 
    }
}

/* Laptop (2 cols per row) */
@media (min-width: 1024px) {
    .homeSection2{
        margin-top: 7%;
    }
    .homeSection2Content {
        width: calc(50% - 20px); 
    }
    .homeSection2Content h1{
        text-align: left;
    }

    .homeSection2ContentImg img {
        width: 48%;  
    }
}



/* Home Page - section 3 */

.homeSection3 {
    background-color: #EAEAEA8F;
    padding: 50px 0;
}

.homeSection3Container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.homeSection3Head {
    /* width: 50%; */
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.homeSection3Head p {
    font-size: 18px;
    color: #E26600;
    margin-bottom: 10px;
}

.homeSection3Head h1 {
    text-align: center; 
    font-size: 30px;
    font-weight: 600;
    color: #121212;
    line-height: 1.4;
}

.homeSection3Content {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.homeSection3Card {
    background-color: #fff; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    position: relative;
    transition: all 0.3s ease;
}

.homeSection3Card {
    width: calc(33% - 20px);
}

.homeSection3Card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.homeSection3CardContent {
    padding: 20px 10px;
}

.homeSection3CardContent p {
    font-size: 18px;
    font-weight: 600;
    color: #02215B;
    margin-bottom: 20px;
}

.homeSection3CardContent span {
    font-size: 15px;
    color: #777777;
    display: block;
    margin-bottom: 20px;
}

.homeSection3CardContent a {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    color: #fff;
    background-color: #02215B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.homeSection3CardContent a:hover {
    color: whitesmoke;
}

.homeSection3Card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}


@media (min-width: 300px) and (max-width: 599px) {
    .homeSection3Card {
        width: 100%; /* 1 card per row */
    }
}

/* iPad: 2 cards per row (width: 50%) */
@media (min-width: 600px) and (max-width: 1023px) {
    .homeSection3Card {
        width: calc(50% - 20px); /* 2 cards per row */
    }
}

/* Laptop: 3 cards per row (width: 33.33%) */
@media (min-width: 1024px) {
    .homeSection3Card {
        width: calc(33% - 20px); 
    }
}




/* Home Page - section 4 */

.homeSection4 {
    background: linear-gradient(rgba(28, 28, 28, 0.56), rgba(28, 28, 28, 0.56)), 
                url('../assets/homebanner2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px;
    margin-bottom: 30px;
    width: 100%;
    height: auto; /* Default height for mobile and iPad */
}

@media (min-width: 300px) and (max-width: 599px) {
    .homeSection4 {
        height: auto; /* Keep the height auto for mobile */
    }
}

/* For iPad (600px to 1023px) */
@media (min-width: 600px) and (max-width: 1023px) {
    .homeSection4 {
        height: auto; /* Keep the height auto for iPad */
    }
}

/* For laptop (1024px and up) */
@media (min-width: 1024px) {
    .homeSection4 {
        height: 90vh; /* Set height to 90vh for laptops and larger screens */
    }
}

.homeSection4 .homeSection4Container{
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-top: 10%;

}

@media (max-width: 480px) {
    .homeSection4 .homeSection4Container{
    width : 90%;
    }
}

.homeSection4 .homeSection4Container h1{
    font-size: 28px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.homeSection4 .homeSection4Container p{
    font-size: 20px;
    color: #FFFFFF;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: center;
}

.homeSection4Container a{
    width: 200px;
    background-color: #E26600;
    color: #fff;
    padding: 10px 6px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 0.9rem;
    text-decoration: none; 
    text-align: center;
}

.homeSection4Container a:hover{
    background-color: #db6300; 
}

/*Home Page - section 5 */

.homeSection5 {
    /* padding: 2rem 1rem; */
    /* margin: 20px 0px; */
    width: 100%;
    margin: 0 auto;
}

.homeSection5Container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

@media (max-width: 480px) {
    .homeSection5 .homeSection5Container {
        width: 90%;
    }
}

.homeSection5Head p {
    font-size: 1rem;
    color: #E26600;
    margin-bottom: 10px;
    text-align: center;
}

.homeSection5Head h1 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #121212;
    line-height: 1.4;
}

.homeSection5Content {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
                url('../assets/homebanner3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #000;
    /* padding: 20px; */
    /* padding-top: 5%;  */
    height: auto; 
    /* min-height: 70vh;  */
    padding: 20px 0;
    box-sizing: border-box; 
    overflow: hidden; 
}

.section5Container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    /* justify-content: center; */
    /* padding-top: 4%; */
    width: 90%;
    margin: 0 auto;
}

.section5Card {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #EAEAEA;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    width: calc(50% - 20px);
    box-sizing: border-box;
}

.section5CardImg {
    background-color: #E26600;
    padding: 15px;
}

.section5CardImg img {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.section5CardContent {
    flex: 1;
    padding: 20px;
}

.section5CardContent h1 {
    font-size: 0.9rem;
    color: #121212;
    margin-bottom: 10px;
    text-align: left;
}

.section5CardContent p {
    font-size: 0.9rem;
    color: #777777;
    line-height: 1.5;
}

@media (max-width: 599px) {
    .section5Card {
        width: 100%;
        display: block;
    }
    .section5CardImg {
     text-align: center;
    }

    .section5CardContent h1,p{
        align-items: center;
        text-align: center;
    }
    
}

@media (min-width: 600px) and (max-width: 1023px) {
    .section5Card {
        width: calc(50% - 20px);
        display: block;
    }
    .section5CardImg {
        text-align: center;
       }
   
       .section5CardContent h1,p{
           align-items: center;
           text-align: center;
       }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    .section5Card {
        width: calc(50% - 20px);
    }
}



/*Home page - section 6 */


.homeSection6 {
    background-color: #f9f9f9;
    text-align: center;
    width: 90%;
    margin: 0 auto;
    padding-top: 30px;
}

.homeSection6Container {
    margin-bottom: 2rem;
}

.homeSection6Head p {
    font-size: 1rem;
    color: #E26600;
    margin: 10px 0;
    text-align: center;
}

.homeSection6Head h1 {
    font-size: 2rem;
    font-weight: 600;
    color: black;
    margin-top: 0.5rem;
}

.homeSection6row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    /* justify-content: center; */
    margin: 0 auto;
    margin-bottom: 20px;
}

.section6col {
    flex: 1 1 calc(33.333% - 1.5rem); /* Default for large screens (Laptop) */
    max-width: calc(33.333% - 1.5rem);  /* 3 columns */
}

.section6card {
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section6card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.section6cardImg {
    position: relative;
    overflow: hidden;
}

.section6cardImg img {
    width: 100%;
    height: 55vh;
    /* object-fit: cover; */
    display: block;
}
.section6cardImg .h-30{
    height: 50vh;
}
.section6cardImg .fit{
    object-fit: cover;
}

.section6cardcontent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6); 
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px 10px;
    color: #fff;
    text-align: left;
}

.section6cardcontent p {
    font-size: 14px;
    color: #f0f0f0;
    margin: 0;
}

.section6cardcontent h3 {
    font-size: 20px;
    margin: 15px 0;
}

.section6cardcontent a {
    background: white;
    color: #02215B;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    font-size: 15px;
    align-self: flex-start; 
}

.section6cardcontent a:hover {
    background: #c85a00;
    color: #fff;
}

/* Mobile view (1 column per row) */
@media (max-width: 599px) {
    .section6col {
        flex: 1 1 calc(100% - 1.5rem);
        max-width: calc(100% - 1.5rem);
    }

    .homeSection6Head h1 {
        font-size: 1.5rem;
    }
}

/* Tablet view (2 columns per row) */
@media (min-width: 600px) and (max-width: 1023px) {
    .section6col {
        flex: 1 1 calc(50% - 1.5rem);
        max-width: calc(50% - 1.5rem);
    }

    .homeSection6Head h1 {
        font-size: 1.8rem;
    }
}

/* Laptop view (3 columns per row) */
@media (min-width: 1024px) {
    .section6col {
        flex: 1 1 calc(33.333% - 1.5rem);
        max-width: calc(33.333% - 1.5rem);
    }

    .homeSection6Head h1 {
        font-size: 2rem;
    }
}



/*Home page - section 7 */

.homeSection7 {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0px;
}

.homeSection7Container {
    text-align: center;
    margin-bottom: 2rem;
}

.homeSection7Head p {
    font-size: 1rem;
    color: #777777;
    margin-bottom: 10px;
    line-height: 1.5;
    text-align: center;
}

.homeSection7Head h1 {
    font-size: 28px;
    font-weight: 600;
    color: #121212;
    line-height: 1.2;
    margin-bottom: 20px;
}

.homeSection7Content {
    padding: 20px 0px;
}

.homesection7row {
    display: flex;
    flex-wrap: wrap; 
    gap: 1rem; /* Space between logos */
    padding: 1rem;
  }
  
  .homesection7Col {
  width: calc(20% - 1rem);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .homesection7Col img {
   
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
  
  /* Responsive adjustments */
  @media (max-width: 1024px) {
    .homesection7Col {
      width: calc(25% - 1rem);
    }
  }
  
  @media (max-width: 768px) {
    .homesection7Col {
       width: calc(33.33% - 1rem);
    }
  }
  
  @media (max-width: 480px) {
    .homesection7Col {
       width: calc(100% - 1rem);
    }
  }


/*About Page - banner*/

.about-hero-container {
    position: relative;
    width: 90%;
    margin: 6% auto 0;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
    background: linear-gradient(#0016664F, rgba(28, 28, 28, 0.56)), 
    url('../assets/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: contain;
    z-index: 1;
    padding: 0px 20px;
     
}
/* Responsive adjustments */
@media (max-width: 1024px) {
    .about-hero-container {
        margin-top: 8%;
    }
}
@media (max-width: 768px) {
    .about-hero-container {
        margin-top: 10%;
    }
}
@media (max-width: 400px) {
    .about-hero-container {
        margin-top: 22%;
    }
}

.about-hero-img {
    width: 100%;
    height: auto;
}

.about-hero-container .about-content {
    width: 100%;
    z-index: 2;
    text-align: center; /* Center text alignment */
}

.about-hero-container .about-content .about-hero-content {
    margin: 0; /* Reset margin for proper centering */
}

.about-hero-content p,
.about-hero-content h1 {
    color: white;
    line-height: 1.7;
    text-align: center; /* Ensure text alignment is centered */
}

@media (min-width: 300px) and (max-width: 599px) {
    .about-hero-container {
        /* height: auto; */
    }

    .about-hero-content h1 {
        font-size: 1.5rem;
    }

    .about-hero-content p {
        font-size: 0.9rem;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .about-hero-container {
        height: auto;
    }

    .about-hero-content h1 {
        font-size: 2rem;
    }

    .about-hero-content p {
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .about-hero-container {
        align-items: center;
    }
}


/* About Page - section 2 */

.about-introduction {
    width: 90%;
    /* background-color: #f9f9f9; */
    margin: 0 auto;
    /* align-items: center; */
    padding-top: 5%;
    padding-bottom: 3%;
}

.about-intro-head h2 {
    font-size: 1.8rem;
    color: #E26600;
    text-align: center;
    margin-bottom: 15px;
}

.about-intro-info {
    line-height: 1.8;
    font-size: 18px;
    color: #555;
    text-align: center;
}

.about-intro-info p {
    margin-bottom: 10px;
    text-align: center;
}

@media (min-width: 300px) and (max-width: 599px) {
    .about-introduction {
        padding: 10px;
        font-size: 0.9rem;
        margin-top: 10%;
    }
    
    .about-intro-head h2 {
        font-size: 1.4rem;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .about-introduction {
        padding: 15px;
        font-size: 0.95rem;
        margin-top: 5%;
    }
    
    .about-intro-head h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 1024px) {
    .about-introduction {
        /* padding: 15px; */
        padding-top: 9%;
    }
}


/*About Page - section 3*/

.about-service-container {
    /* padding: 20px; */
    width: 90%;
    margin: 0 auto;
    padding: 20px 0px;
}

.about-service-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.about-service-img{
    flex: 1 1 calc(10% - 10px); 
    box-sizing: border-box;
    height: auto;
    
}
.about-service-details {
    flex: 1 1 calc(50% - 10px); 
}

.about-service-img img {
    /* width: 100%; */
    /* border-radius: 8px; */
    height: 80vh;
    object-fit: contain;
}

.about-service-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-service-details span {
    font-size: 1.2rem;
    font-weight: bold;
    color: #E26600;
    margin-bottom: 15px;
}

.about-service-details h2 {
    font-size: 2rem;
    color: black;
    font-weight: bold;
    margin-bottom: 15px;
}

.about-service-details p {
    line-height: 1.7;
    font-size: 09.rem;
    color: #555;
    margin-bottom: 15px;
}

.about-service-details h3 {
    font-size: 20px;
    color: #E26600;
    font-weight: bold;
    margin-bottom: 15px;
}


@media (min-width: 300px) and (max-width: 599px) {
    .about-service-img,
    .about-service-details {
        flex: 1 1 100%; 
    }

    .about-service-details span {
        font-size: 1rem;
        text-align: center;
    }

    .about-service-details h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .about-service-details p {
        font-size: 17px;
    }
    .about-service-img img {
        width: 100%;
        height: auto;
        object-fit: cover
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .about-service-img,
    .about-service-details {
        flex: 1 1 100%; 
    }

    .about-service-details span {
        font-size: 1.1rem;
        text-align: center;
    }

    .about-service-details h2 {
        font-size: 1.6rem;
        text-align: center;
    }

    .about-service-details p {
        font-size: 1rem;
    }
    .about-service-img img {
        width: 100%;
        height: auto;
        object-fit: cover
    }
}

@media (max-width: 1024px) {
    .about-service-container {
        padding: 15px;
    }
}


/*About page - section 4*/

.quality-container {
    /* max-width: 1200px; */
    width: 90%;
    margin: 0 auto;
}

.quality-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; 
    margin:5% 0%;
}

.quality-col {
    flex: 1 1 calc(33.33% - 20px);
    box-sizing: border-box;
    text-align: center;
}

.quality-col span {
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: #E26600; 
    margin:10px 0px;
}
.quality-head-span ,h3{
    text-align: left;
}

.quality-col h3 {
    font-size: 1.8rem;
    color: #333;
    margin: 10px 0 20px;
    font-weight: bold;
}

.quality-col p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

.quality-card {
    background-color: #F3F3F3;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.quality-img img {
    width:60px;
    height: 60px;
    margin-bottom: 15px;
    background-color: #E26600;
    padding: 10px;
}

@media (min-width: 300px) and (max-width: 599px) {
    .quality-col {
        flex: 1 1 100%; 
    }
    .quality-col span {
        text-align: center;
    }
    .quality-head-info{
        text-align: center;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .quality-col {
        flex: 1 1 calc(50% - 20px); 
    }
    .quality-col span {
        text-align: center;
    }
    .quality-head-info{
        text-align: center;
    }
}

@media (max-width: 1024px) {
    .quality-container {
        padding: 15px; 
    }
    /* .quality-head-info{
        text-align: left;
    } */
}

/* About page - section 5 */

.about-lead-container {
    background: linear-gradient(rgba(28, 28, 28, 0.56), rgba(28, 28, 28, 0.56)), 
                url('../assets/about-lead.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 40px;
    /* height: 90vh; */
    margin-bottom: 2%;
    width: 100%;
}

@media (max-width: 599px) {
    .about-lead-container {
        height: auto; 
    }
}

/* Tablet View */
@media (min-width: 600px) and (max-width: 1023px) {
    .about-lead-container {
        height: auto; 
    }
}

/* Laptop View */
@media (min-width: 1024px) {
    .about-lead-container {
        margin-bottom: 25%;
        height: 80vh; 
    }
}

.about-lead-content{
    width: 50%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding-top: 5%;

    }

@media (max-width: 480px) {
    .about-lead-content{
    width : 90%;
    }
}

.about-lead-content h1{
    font-size: 28px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.about-lead-content p{
    font-size: 20px;
    color: #FFFFFF;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 20px;
}

.about-lead-content span{
   color: #E26600;
   font-size: 16px;
   margin-bottom: 5px;
}

/*About page - section 6*/


.about-card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    width: 95%;
    margin: 0 auto;
    padding-top: 3%;
    margin-bottom: 30px;
}

.about-card-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
}

.about-card-col {
    flex: 1 1 calc(33.33% - 1.5rem); 
    box-sizing: border-box;
}

.about-card-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.about-card-img img {
    width: 100%;
    height: 40vh;
    object-fit: cover;
}

.about-card-details {
    padding: 1.5rem;
    text-align: center;
}

.about-card-details h2 {
    font-size: 18px;
    font-weight: 600;
    color: #02215B;
    margin-bottom: 1rem;
}

.about-card-details p {
    font-size: 1rem;
    color: #777777;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.about-card-details a {
    background-color: #02215B;
    color: #fff;
    border: none;
    padding: 0.7rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}

.about-card-details a:hover {
    background-color: #db6300;
}
.about-lead-content h1 {
    font-size: 26px;
}

.about-lead-content p {
    font-size: 18px;
} 

@media (min-width: 300px) and (max-width: 599px) {
    .about-card-col {
        flex: 1 1 100%; 
    }

    
}


@media (min-width: 600px) and (max-width: 1023px) {
    .about-card-col {
        flex: 1 1 calc(50% - 1.5rem); 
    }


    /* .about-lead-content p {
        font-size: 1rem;
    } */
}

@media (max-width: 1024px) {
    .about-card-col {
        flex: 1 1 calc(33.33% - 1.5rem); 
    }

}



/*About page - section 7*/

.team-container {
    /* padding: 20px; */
    margin: 30px auto;
    /* max-width: 1200px; */
    width: 90%;
    padding: 20px 0px;
    /* margin-top: 30px; */
} 

.team-head {
    margin-bottom: 40px; 
    text-align: center;
    margin-top: 40px;
}

.team-head span {
    font-size: 16px;
    color: #E26600; 
    font-weight: bold;
    margin-bottom: 10px;  
}

.team-head h2 {
    font-size: 28px;
    color: black;
    font-weight: bold;
    margin: 10px 0 20px;
    font-weight: bold;
}

.team-head p {
    font-size: 18px;
    color: #777777;
    /* max-width: 700px; */
    margin: 0 auto; 
    line-height: 1.6;
    text-align: center;
}

.team-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.team-col {
    flex: 1 1 calc(25% - 20px); 
    box-sizing: border-box;
}

.team-card {
    background-color: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
}

.team-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.team-details {
    background-color: #02215B; 
    color: #fff; 
    padding: 15px;
}

.team-details h4 {
    margin: 10px 0 5px;
    font-size: 1.2rem;
}

.team-details p {
    margin: 0;
    font-size: 1rem;
    color: #E26600;
    text-align: center;
}

@media (min-width: 300px) and (max-width: 599px) {
    .team-col {
        flex: 1 1 100%; 
    }

    .team-details h4 {
        font-size: 1rem;
    }

    .team-details p {
        font-size: 0.9rem;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .team-col {
        flex: 1 1 calc(50% - 20px); 
    }

    .team-details h4 {
        font-size: 1.1rem;
    }

    .team-details p {
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .team-container {
        padding: 15px;
    }
}



/*Service page - banner*/

.service-hero-container {
    position: relative;   
     width: 90%;
    margin: 6% auto 0;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
    background: linear-gradient(#0016664F, rgba(28, 28, 28, 0.56)), 
    url('../assets/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: contain;
    z-index: 1;
    padding: 0px 20px; 
}
/* Responsive adjustments */
@media (max-width: 1024px) {
    .service-hero-container {
        margin-top: 8%;
    }
}
@media (max-width: 768px) {
    .service-hero-container {
        margin-top: 10%;
    }
}
@media (max-width: 400px) {
    .service-hero-container {
        margin-top: 22%;
    }
}
.service-hero-img {
    width: 100%;
    height: auto;
}

.service-hero-container .service-content {
    width: 100%;
    z-index: 2;
    text-align: center; /* Center text alignment */
}

.service-hero-container .service-content .service-hero-content {
    margin: 0; /* Reset margin for proper centering */
}

.service-hero-content p,
.service-hero-content h1 {
    color: white;
    line-height: 1.7;
    text-align: center; /* Ensure text alignment is centered */
}

@media (min-width: 300px) and (max-width: 599px) {
    .service-hero-container {
        /* height: auto; */
    }

    .service-hero-content h1 {
        font-size: 1.5rem;
    }

    .service-hero-content p {
        font-size: 0.9rem;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .service-hero-container {
        height: auto;
    }

    .service-hero-content h1 {
        font-size: 2rem;
    }

    .service-hero-content p {
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .service-hero-container {
        align-items: center;
    }
}


/*Service Page - section 2*/

.service-container {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    margin: 0 auto;
    padding-top: 7%;
    padding-bottom: 3%;
    width: 90%;
}

.service-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 20px;
}

.service-col {
    flex: 1;
    text-align: center;
    padding: 5px 0px;
}

 .service-col img{
    width: 90%;
    height: 85vh;
} 

.service-col span {
    display: block;
    /* text-align: left; */
    color: #E26600;
    font-size: 18px;
    margin-bottom: 10px;
}

.service-col h3 {
    color: black;
    /* text-align: left; */
    font-size: 26px;
    line-height: 1.3;
    padding: 10px 0px;
}

.service-col p {
    /* text-align: left; */
    color: #777777;
    font-size: 18px;
    line-height: 1.3;
}

/* .service-col span,h3,p{
    text-align: left;
} */

.service-contents {
    display: flex;
    align-items: center;
    margin-top: 25px;
    margin-bottom: 20px;
}

.service-img {
    width: 200px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E26600;
    margin-right: 25px;
}

.service-img img {
    width: 80%;
    height: auto;
}

.service-info h4 {
    font-size: 1rem;
    /* text-align: left; */
    margin-bottom: 10px;
}

.service-info p {
    font-size: 1rem;
    line-height: 1.5;
}

@media (min-width: 300px) and (max-width: 599px) {
    .service-container{
        margin-top: 7%;
    }
    .service-row {
        flex-direction: column;
    }

    .service-col {
        width: 100%;
    }

    .service-contents {
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        gap: 15px; 
    }

    .service-img {
        width: 30%;
        padding: 20px; 
        height: auto;
        object-fit: cover;
        margin: 0 auto; 
    }

    .service-info {
        text-align: center; 
        width: 80%;
    }
    .service-info h4{
        text-align: center;
    }
    .service-col img{
        width: 100%;
        height:auto;
    }
    .service-col span,h3,p{
        align-items: center;
        text-align: center;
    }
    .service-info h4 {
       text-align: center;
    }
}



@media (min-width: 600px) and (max-width: 1023px) {
    .service-container{
        margin-top: 7%;
    }
    .service-row {
        flex-direction: column;
    }

    .service-col {
        width: 100%;
    }
    .service-img {
        padding: 10px;
    }
    .service-col img{
        width: 100%;
        height: auto;
    }
    .service-col span,h3,p{
        align-items: center;
        text-align: center;
    }
    /* .service-info h4 {
        text-align: center;
    } */
}

@media (min-width: 1024px) {
    .service-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .service-col {
        width: 100%;
    }
    .service-col span,h3,p{
        text-align: left;
    }
    .service-info h4 {
        text-align: left;
    }
    /* .service-col img{
        width: 90%;
        height: 85vh;
    } */
}

/*Service Page - section 3*/

.service-offer{
    background-color: #EAEAEA8F;
    padding: 50px 0;
}

.service-offer-container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.service-offer-head {
    /* width: 50%; */
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.service-offer-head p {
    font-size: 1rem;
    color: #E26600;
    margin-bottom: 10px;
}

.service-offer-head h1 {
    text-align: center; 
    font-size: 2rem;
    font-weight: 600;
    color: #121212;
    line-height: 1.4;
}

.service-offer-content {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.service-offer-card {
    background-color: #fff; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden; 
    width: calc(30% - 20px);
    position: relative;
    transition: all 0.3s ease;
}

.service-offer-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.service-card-content {
    padding:  20px 10px;
     
}

.service-card-content p {
    font-size: 1rem;
    font-weight: 600;
    color: #02215B;
    margin-bottom: 20px;
}

.service-card-content span {
    font-size: 15px;
    color: #777777;
    display: block;
    margin-bottom: 20px;
}

.service-card-content a {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    color: #fff;
    background-color: #02215B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.service-card-content a:hover {
    color: whitesmoke;
}


.service-offer-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}

@media (min-width: 300px) and (max-width: 599px) {
    .service-offer-card {
        width: 100%; /* 1 column */
    }
}

/* iPad View: 2 Columns */
@media (min-width: 600px) and (max-width: 1023px) {
    .service-offer-card {
        width: calc(50% - 20px); /* 2 columns */
    }
}

/* Laptop View: 4 Columns */
@media (min-width: 1024px) {
    .service-offer-card {
        width: calc(33.33% - 20px); /* 4 columns */
    }
}


/*Service page - section 4*/

.service-choose {
    width: 100%;
    padding: 20px 0px;
}


.service-choose-container {
    display: flex;
    /* justify-content: center;
    align-items: center; */
    flex-direction: column;
    text-align: center;
}


.service-choose-head p {
    font-size: 1rem;
    color: #E26600;
    margin-bottom: 10px;
    text-align: center;
}

.service-choose-head h1 {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    color: #121212;
    line-height: 1.4;
    padding: 10px 0px;
}

.service-choose-content {
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
                url('../assets/homebanner3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #000;
  padding: 20px 0;
    height: auto; 
    /* min-height: 70vh;  */
    box-sizing: border-box; 
    overflow: hidden; 
}

.choose-container {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 4%;
    width: 90%;
    margin: 0 auto;
}

.service-choose-card{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #EAEAEA;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px;
    width: calc(50% - 20px);
    box-sizing: border-box;
}

.service-choose-img {
    background-color: #E26600;
    padding: 15px;
}

.service-choose-img img {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.choose-card-content{
    flex: 1;
    padding: 20px;
}

.choose-card-content h1 {
    font-size: 0.9rem;
    color: #121212;
    margin-bottom: 10px;
    text-align: left;
}

.choose-card-content p {
    font-size: 0.9rem;
    color: #777777;
    line-height: 1.5;
}

@media (max-width: 599px) {
    .service-choose-card {
        width: 100%;
        display: block;
    }
    .service-choose-img {
        text-align:center;
    }
    .service-choose-img img {
        justify-content: center;
    }
    .choose-card-content h1,p{
        align-items: center;
        text-align: center;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .service-choose-card {
        width: calc(50% - 20px);
        display: block;
    }
    .service-choose-img {
        text-align:center;
    }
    .service-choose-img img {
        justify-content: center;
    }
    .choose-card-content h1,p{
        align-items: center;
        text-align: center;
    }
}

@media (min-width: 1024px) and (max-width: 1366px) {
    .service-choose-card {
        width: calc(50% - 20px);
    }
}




/*Contact Page - banner */

.contact-hero-container {
    position: relative;
    width: 90%;
    margin: 6% auto 0;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
    background: linear-gradient(#0016664F, rgba(28, 28, 28, 0.56)), 
    url('../assets/banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    padding: 0px 20px; 
}
/* Responsive adjustments */
@media (max-width: 1024px) {
    .contact-hero-container {
        margin-top: 8%;
    }
}
@media (max-width: 768px) {
    .contact-hero-container {
        margin-top: 10%;
    }
}
@media (max-width: 400px) {
    .contact-hero-container {
        margin-top: 22%;
    }
}

.contact-hero-img {
    width: 100%;
    height: auto;
}

.contact-hero-container .contact-content {
    width: 100%;
    z-index: 2;
    text-align: center; /* Center text alignment */
}

.contact-hero-container .contact-content .contact-hero-content {
    margin: 0; /* Reset margin for proper centering */
}

.contact-hero-content p,
.contact-hero-content h1 {
    color: white;
    line-height: 1.7;
    text-align: center; /* Ensure text alignment is centered */
}

@media (min-width: 300px) and (max-width: 599px) {
    .contact-hero-container {
        /* height: auto; */
    }

    .contact-hero-content h1 {
        font-size: 1.5rem;
    }

    .contact-hero-content p {
        font-size: 0.9rem;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .contact-hero-container {
        height: auto;
    }

    .contact-hero-content h1 {
        font-size: 2rem;
    }

    .contact-hero-content p {
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .contact-hero-container {
        align-items: center;
    }
}


/* Contact page - section 2*/

.address-container {
    width: 90%;
    padding-top: 80px;
    padding-bottom: 20px;
    margin:0 auto;
}

.address-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.address-col {
    flex: 1 1 calc(33.333% - 20px); 
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.address-card {
    background-color: #EAEAEA;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    padding: 15px;
    width: 100%;
}

.address-img{
    margin-top: 10px;
}

.address-img img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-bottom: 10px;
    background-color: #E26600;
    padding: 10px;
}

.address-info{
    margin: 20px 0px;
}

.address-info p {
    font-size: 1rem;
    color: #333;
    text-align: center;
   
}
.address-info p a{
    text-decoration: none;
    color: #333;
}

@media (max-width: 599px) {
    .address-col {
        flex: 1 1 100%;
    }
}


@media (min-width: 600px) and (max-width: 1023px) {
    .address-col {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (min-width: 1024px) {
    .address-col {
        flex: 1 1 calc(33.333% - 20px);
    }
}


/*Contact page - section 3*/

.details-section {
    background-color: #02215B;
    margin: 3% 0%;
}

.details-container {
    width: 90%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
}

.form-container {
    flex: 1;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-container h2 {
    font-size: 30px;
    color: white;
    margin-bottom: 30px;
}

.form-container .info {
    margin-bottom: 15px;
}

.form-container .info input,
.form-container .info textarea {
    width: 80%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    resize: none;
    margin: 5px 0px;
}

.form-container .info input:focus,
.form-container .info textarea:focus {
    outline: none;
    border-color: #E26600;
    box-shadow: 0 0 5px rgba(226, 102, 0, 0.5);
}

.form-container .form-btn button {
    width: 80%;
    padding: 15px;
    background-color: #E26600;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
}

.form-container .form-btn button:hover {
    background-color: #E26605;
}

.map-container {
    flex: 1;
    height: 400px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 300px) and (max-width: 599px) {
    .details-container {
        margin: 0 auto;
        display: block;
        width: 90%;
        margin-bottom: 20px;
        text-align: center; /* Center align content */
    }

    .form-container {
        margin: 0 auto 30px; /* Center the form container */
        width: 90%; /* Ensure the form takes up 90% of the screen width */
    }

    .map-container {
        height: 200px;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .details-container {
        flex-direction: row;
        gap: 15px;
    }

    .form-container,
    .map-container {
        flex: 1;
    }

    .map-container {
        height: 350px;
    }
}

@media (max-width: 1024px) {
    .details-container {
        flex-direction: row;
        gap: 20px;
    }

    .form-container,
    .map-container {
        flex: 1;
    }

    .map-container {
        height: 350px;
    }
}




/*Learn More - section 1*/

.learn-hero-container {
    position: relative;   
     width: 90%;
    margin: 6% auto 0;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
    background: linear-gradient(#0016664F, rgba(28, 28, 28, 0.56)), 
    url('../assets/banner2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: contain;
    z-index: 1;
    padding: 0px 20px; 
}
/* Responsive adjustments */
@media (max-width: 1024px) {
    .learn-hero-container {
        margin-top: 8%;
    }
}
@media (max-width: 768px) {
    .learn-hero-container {
        margin-top: 10%;
    }
}
@media (max-width: 400px) {
    .learn-hero-container {
        margin-top: 22%;
    }
}

.learn-hero-img {
    width: 100%;
    height: auto;
}

.learn-hero-container .learn-content {
    width: 100%;
    z-index: 2;
    text-align: center; /* Center text alignment */
}

.learn-hero-container .learn-content .learn-hero-content {
    margin: 0; /* Reset margin for proper centering */
}

.learn-hero-content p,
.learn-hero-content h1 {
    color: white;
    line-height: 1.7;
    text-align: center; /* Ensure text alignment is centered */
}

@media (min-width: 300px) and (max-width: 599px) {
    .learn-hero-container {
        /* height: auto; */
    }

    .learn-hero-content h1 {
        font-size: 1.5rem;
    }

    .learn-hero-content p {
        font-size: 0.9rem;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .learn-hero-container {
        height: auto;
    }

    .learn-hero-content h1 {
        font-size: 2rem;
    }

    .learn-hero-content p {
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .learn-hero-container {
        align-items: center;
    }
}



/*Learn More - section 2*/

.learn-content-container {
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 20px;
  }
  
  .learn-contents {
    text-align: center;
    margin-bottom: 20px;

  }

  .learn-contents h2{
   color:#3E3E3E ;
   font-size: 30px;
   margin: 15px 0px;
  }

  .learn-contents p{
    color:#777777 ;
    font-size: 18px;
    margin: 15px 0px;
    line-height: 1.5;
  }
  
  .learn-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .learn-details-head h3{
    color:black ;
    font-size: 22px;
    margin: 10px 0px;
  }

  
  .learn-info h4{
    color:#121212 ;
    font-size: 21px;
    margin: 13px 0px;
  }

  .learn-info p{
    color:#777777 ;
    font-size:19px ;
    margin: 10px 0px;
    line-height: 1.5;
  }

  .learn-info ul{
    padding-left: 18px;
  }

  .learn-info ul li{
    font-size:18px ;
    color: #777777;
    line-height: 1.5;
    margin: 10px 0px;
  }
 

  @media (min-width: 300px) and (max-width: 599px) {
    .learn-content-container {
      margin-top: 6%;
    }
  
      }
  
  @media (min-width: 600px) and (max-width: 1023px) {
    .learn-content-container {
      margin-top: 6%;
    }

  }
  
  @media (max-width: 1024px) {
    .learn-content-container {
      margin: 0 auto;
    }

  }


  /* View Project */

  .project-hero-container {
    position: relative;
     margin: 6% auto 0;
   width: 90%;
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center content horizontally */
    background: linear-gradient(#0016664F, rgba(28, 28, 28, 0.56)), 
    url('../assets/banner2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: contain;
    z-index: 1;
    padding: 0px 20px; 
}
/* Responsive adjustments */
@media (max-width: 1024px) {
    .project-hero-container {
        margin-top: 8%;
    }
}
@media (max-width: 768px) {
    .project-hero-container {
        margin-top: 10%;
    }
}
@media (max-width: 400px) {
    .project-hero-container {
        margin-top: 22%;
    }
}

.project-hero-img {
    width: 100%;
    height: auto;
}

.project-hero-container .project-content {
    width: 100%;
    z-index: 2;
    text-align: center; /* Center text alignment */
}

.project-hero-container .project-content .project-hero-content {
    margin: 0; /* Reset margin for proper centering */
}

.project-hero-content p,
.project-hero-content h1 {
    color: white;
    line-height: 1.7;
    text-align: center; /* Ensure text alignment is centered */
}

@media (min-width: 300px) and (max-width: 599px) {
    .project-hero-container {
        /* height: auto; */
    }

    .project-hero-content h1 {
        font-size: 1.5rem;
    }

    .project-hero-content p {
        font-size: 0.9rem;
    }
}

@media (min-width: 600px) and (max-width: 1023px) {
    .project-hero-container {
        height: auto;
    }

    .project-hero-content h1 {
        font-size: 2rem;
    }

    .project-hero-content p {
        font-size: 1rem;
    }
}

@media (max-width: 1024px) {
    .project-hero-container {
        align-items: center;
    }
}



/*View Project - section 2*/

.project-content-container {
    width: 90%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 20px;
  }
  
  .project-contents {
    margin-top: 1rem;
    text-align: center;
    margin-bottom: 20px;

  }
  .pro-img{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
  }
  .pro-img img{
  
    width: 100px;
    height: 100px;
  }
  .pro-img .h-50{
  
    width: 100px;
    height: 50px;
  }
  .pro-img .w-50{
  
    width: 50px; 
  }

  .project-contents h2{
   color:#3E3E3E ;
   font-size: 30px;
   margin: 15px 0px;
  }

  .project-contents p{
    color:#777777 ;
    font-size: 1rem;
    margin: 15px 0px;
    line-height: 1.5;
  }
  
.project-img-contents {
 
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 4rem;
}

.img-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* justify-content: space-between; */
}

.img-cart {
    width:calc(33.33% - 20px);  
    height: 300px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .img-content {
        flex-direction: column;
    }
    
    .img-cart {
        width: 100%;
        height: auto;  /* Optional: adjust height to auto for responsive height */
    }
}


.img-cart img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio while covering the area */
}

.img-cart-btn {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.img-cart-btn button {
    background-color: transparent;
    color: #E26600;
    border: none;
    cursor: pointer;
    font-size: 16px;
    text-decoration: none;
    position: relative;
}

/* Apply hover effects only when the button does NOT have the close-icon class */
.img-cart-btn button:not(.close-icon)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: #E26600;
    transition: width 0.3s ease;
}

.img-cart-btn button:not(.close-icon):hover::after {
    width: 100%;
    transition: width 0.3s ease;
}

.img-cart-btn button:not(.close-icon):hover {
    color: #d15500;
}

.img-cart-btn button.close-icon {
    font-size: 2rem;  
    border-radius: 50%;  
    padding: 0.5rem;  
    width: 40px;  
    height: 40px;  
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;  
}

.img-cart-btn button.close-icon:hover {
    background-color: rgba(226, 102, 0, 0.1);  
}

/* Hidden images */
.hidden {
    display: none;
}

/* Modal styling */
#modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8); /* Transparent black background */
    justify-content: center;
    align-items: center;
}

#modal .modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#modal .img-width {
    width: 50%;
    height: auto;
}
.img-width img{
    width: 100%;
}

#modal .close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}

#modal .close:hover,
#modal .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}


/* end project gallery */
  
  .project-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .project-details-head h3{
    color:black ;
    font-size: 22px;
    margin: 10px 0px;
  }

  
  .project-info h4{
    color:#121212 ;
    font-size: 21px;
    margin: 13px 0px;
  }

  .project-info p{
    color:#777777 ;
    font-size:1rem ;
    margin: 10px 0px;
    line-height: 1.5;
  }

  .project-info ul{
    padding-left: 18px;
  }

  .project-info ul li{
    font-size:1rem ;
    color: #777777;
    line-height: 1.5;
    margin: 10px 0px;
  }
 

  @media (min-width: 300px) and (max-width: 599px) {
    .project-content-container {
      margin-top: 6%;
    }
  
      }
  
  @media (min-width: 600px) and (max-width: 1023px) {
    .project-content-container {
      margin-top: 5%;
    }

  }
  
  @media (max-width: 1024px) {
    .project-content-container {
      margin: 0 auto;
    }

  }
  
  
/*Footer*/


.footerContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 2rem;
    background-color: #f8f9fa;
    color: #333;
}

@media screen and (max-width: 768px) {
    .footerContainer {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

.contactDetails {
    flex: 1;
    margin-right: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}
@media (max-width : 400px) {
    .contactDetails{
        align-items: center;
    }
}
@media (max-width : 768px) {
    .contactDetails{
        align-items: center;
    }
}

.contactDetails .footerLogo img {
    width: 150px;
    margin-bottom: 1rem;
}

.contactDetails .footer-info {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.contactDetails .footerIcons {
    display: flex;
    gap: 0.8rem;
}

.contactDetails .footerIcons i {
    font-size: 1.5rem;
    color: #333;
    transition: color 0.3s ease;
}

.contactDetails .footerIcons i:hover {
    color: #0056b3;
}

@media screen and (max-width: 768px) {
    .contactDetails {
        margin-right: 0;
        margin-bottom: 2rem;
    }
}

.footerColumn {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.footerColumn h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.footerColumn p,
.footerColumn a {
    font-size: 1rem;
    margin: 0.3rem 0;
    color: #333;
    text-decoration: none;
}

.footerColumn a:hover {
    color: #0056b3;
}

@media screen and (max-width: 768px) {
    .footerColumn {
        margin-bottom: 2rem;
    }
}

.contacts {
    flex: 1;
}

.contacts .address {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.contacts .address .icon {
    font-size: 1.5rem;
    color: #333;
    margin-right: 1rem;
}

.contacts .address .title {
    font-weight: bold;
}
.contacts .address  a{
    text-decoration: none;
    color: #333 !important;
}
@media (max-width : 400px) {
    .title{
        text-align: start;
    }
}
@media (max-width : 768px) {
    .title{
        text-align: start;
    }
}

.contacts .address p {
    margin: 0;
}


@media screen and (max-width: 768px) {
    .contacts {
        justify-content: center;
    }
}

/* General Responsive Tweaks */
@media screen and (max-width: 576px) {
    .footerContainer {
        padding: 1rem;
    }

    .footerIcons i {
        font-size: 1.2rem;
    }
}