body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* background-color: lightgray; */
}

/* Header Start */

header {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #e4e0da;
    /* height: 2cm; */
    /* width: 100%; */
    display: flex;
    align-items: center;
    border: 0px solid black;
    /* border-radius: 20px; */
}

.logo img {
    /* padding: 20px; */
    height: 60px;
    width: 70px;
}

header .ids {
    /* margin-left: 30px; */
    display: flex;
    align-items: center;
    
}

.ids a {
    color: goldenrod;
    text-decoration: none;
    font-size: 1em;
    font-family: "Chakra Petch", serif;
    font-weight: 700;
    font-style: normal;
    margin: 0;
    padding: 0;
}

.ids h1 {
    margin: 0;
    padding: 0;
}

.Fu {
    /* margin-right: 30px; */
    align-items: center;
    font-family: "Sour Gummy", sans-serif;
}

.socialmedia {
    margin-left: auto;
    display: flex;
    align-items: center;
    /* margin-right: 30px; */
}

.socialmedia ul {
    display: flex;
    list-style: none;
    padding: 0;
}

.socialmedia img {
    height: 70px;
}

header button {
    /* height: 50px; */
    /* margin-right: 30px; */
    /* width: 120px; */
    font-weight: 500;
    /* border-radius: 10px; */
    font-size: 15px;
    background-color: goldenrod;
    font-family: "Sour Gummy", sans-serif; 
}
header button:hover{
    /* background-color: rgba(199, 155, 43, 0.733); */
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3);

}
header button a{
    justify-content: center;
    display: flex;
    text-decoration: none;
    color: darkblue;
}
header button a:hover{
    color: white;
}

/* Responsive design header start */
/* Responsive Design 320px */

@media (min-width: 320px) and (max-width: 374px){
    header{
        height: 1.5cm;
    }
    .logo img {
        padding: 14px;
        height: 40px;
        width: 50px;
    }
    .ids h1 {
        font-size: 14px;
    }
    .Fu h2{
       display: none;
        
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 25px;
        
    }
    header button {
        height: 35px;
        width: 100px;
        border-radius: 7px;
        margin-right: 3px;
        /* box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); */
    }
    header button a{
        font-size: 10px;
    }

}

/* Responsive Design 375px */


@media (min-width: 375px)and (max-width: 424px) {
    header{
        height: 1.5cm;
    }
    .logo img {
        padding: 14px;
        height: 40px;
        width: 50px;
    }
    .ids h1 {
        font-size: 14px;
    }
    .Fu h2{
       display: none;
        
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 25px;
        
    }
    header button {
        height: 35px;
        width: 80px;
        border-radius: 7px;
        margin-right: 3px;
        /* box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); */
    }
    header button a{
        font-size: 10px;
    }

}

/* Responsive Design 425px and (max-width: 455px) */


@media (min-width: 425px) and (max-width: 455px){
    header{
        height: 1.5cm;
    }
    .logo img {
        padding: 14px;
        height: 40px;
        width: 50px;
    }
    .ids h1 {
        font-size: 18px;
    }
    .Fu h2{
       display: none;
        
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 25px;
        
    }
    header button {
        height: 35px;
        width: 80px;
        border-radius: 7px;
        margin-right: 3px;
        /* box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); */
    }
    header button a{
        font-size: 10px;
    }

}


@media (min-width: 456px) and (max-width: 480px) {
    .logo img {
        padding: 10px;
        height: 50px;
        width: 50px;
    }
    .ids h1 {
        font-size: 20px;
    }
    .Fu h2{
       font-size: 10px;
       margin-right: 10px;
        
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 25px;
        
    }
    header button {
        height: 35px;
        width: 100px;
        border-radius: 7px;
        margin-right: 8px;
        /* box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); */
    }
    header button a{
        font-size: 10px;
    }
}

/* Responsive size 481px to 768px (e.g., iPhone 12, modern Android phones) */


@media (min-width: 481px) and (max-width: 767px) {
    .logo img {
        padding: 10px;
        height: 50px;
        width: 50px;
    }
    .ids h1 {
        font-size: 20px;
    }
    .Fu h2{
       /* display: none; */
       font-size: 10px;
       margin-right: 10px;
        
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 25px;
        
    }
    header button {
        height: 35px;
        width: 100px;
        border-radius: 7px;
        margin-right: 8px;
        /* box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3); */
    }
    header button a{
        font-size: 10px;
    }
}

/* Responsive size 768px to 950px (e.g., iPads, Samsung tablets) */

@media (min-width: 768px) and (max-width: 950px) {
    .logo img {
        padding: 15px;
        height: 50px;
        width: 60px;
    }

    .ids h1 {
        font-size: 25px;
    }
    .Fu h2{
        font-size: 15px;
        margin-right: 5px;
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 50px;
        
    }
    header button {
        height: 45px;
        width: 80px;
        border-radius: 10px;
        margin-right: 3px;
    }
    header button a {
        font-size: 12px;
    }
}


/* Responsive size 951px to 1024px (e.g., iPads, Samsung tablets) */

@media (min-width: 951px) and (max-width:1024px) {
    .logo img {
        padding: 15px;
        height: 60px;
        width: 70px;
    }

    .ids h1 {
        font-size: 35px;
    }
    .Fu h2{
        font-size: 15px;
        margin-right: 5px;
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 60px;
        
    }
    header button {
        height: 50px;
        width: 95px;
        border-radius: 10px;
        margin-right: 6px;
    }
}






/* Responsive size 1025px to 1440px (e.g., MacBooks, standard laptops) */

@media (min-width: 1025px) and (max-width: 1440px) {
    header {
        height: 2.0cm;
    }
    .logo img {
        padding: 15px;
        height: 70px;
        width: 80px;
    }

    .ids h1 {
        font-size: 45px;
    }
    .Fu h2{
        font-size: 20px;
        margin-right: 10px;
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 70px;
        
    }
    header button {
        height: 50px;
        width: 100px;
        border-radius: 10px;
        margin-right: 15px;
    }
    header button a{
        font-size: 15px;
    }
}


/* Responsive size 1441px to 2560px (e.g., MacBooks, standard laptops) */

@media (min-width: 1441px) and (max-width: 2560px) {
    header {
        height: 3.5cm;
    }
    .logo img {
        padding: 25px;
        height: 110px;
        width: 120px;
    }

    .ids h1 {
        font-size: 95px;
    }
    .Fu h2{
        font-size: 40px;
        margin-right: 10px;
    }
    .socialmedia {
        margin-right: 10px;
    }
    .socialmedia img {
        height: 130px;
        
    }
    header button {
        height: 100px;
        width: 200px;
        border-radius: 10px;
        margin-right: 15px;
    }
    header button a {
        font-size: 30px;
    }
}





/* Header End */





/* Navigation Start */
    nav {
        height: 50px;
        width: 100%;
        border-bottom: 1px solid #2c3e50; /* Dark slate color */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Light shadow for the navbar */
        position: relative;
        background-color: #f5f5f5; /* Light neutral background */
    }

    nav ul {
        display: flex;
        padding: 0;
        margin: 0;
        justify-content: center;
        align-items: center;
        width: 100%;
        list-style: none;
        transition: all 0.3s ease;
    }

    nav li {
        font-weight: 400;
        padding: 0 10px;
        position: relative; /* For hover animation positioning */
    }

    nav li a {
        text-decoration: none;
        color: #333333; /* Dark neutral gray for text */
        font-size: large;
        padding: 15px 20px;
        display: block;
        text-align: center;
        transition: all 0.3s ease-in-out;
        position: relative;
        z-index: 1; /* Ensure text appears above hover effects */
        overflow: hidden;
    }

    nav li a::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0%;
        height: 4px; /* Underline thickness */
        background-color: #d4a373; /* Muted gold underline */
        box-shadow: 0 2px 6px rgba(212, 163, 115, 0.5); /* Shadow for the underline */
        transition: all 0.4s ease-in-out;
        z-index: 0;
        transform: translateX(-50%);
    }

    nav li a:hover::before {
        width: 100%; /* Expands underline on hover */
    }

    nav li a:hover {
        color: #004d40; /* Teal text on hover */
        background-color: rgba(212, 163, 115, 0.15); /* Soft gold background highlight */
        box-shadow: 0 8px 15px rgba(0, 77, 64, 0.3); /* Deep shadow for hover effect */
        transition: all 0.3s ease-in-out;
        border-radius: 12px; /* Rounded corners for hover effect */
    }

    /* Menu Toggle Button */
    .menu-toggle {
        display: none;
        flex-direction: column;
        justify-content: space-around;
        height: 25px;
        width: 30px;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 10px;
    }

    .menu-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #333333; /* Matches nav text color */
        transition: all 0.3s ease;
    }

    /* Mobile View */
    @media (max-width: 768px) {
        nav ul {
            flex-direction: column;
            background-color: #f5f5f5; /* Matches nav background */
            position: absolute;
            top: 50px;
            right: 0;
            width: 200px;
            height: 0;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
        }

        nav ul.active {
            height: auto;
            opacity: 1;
            visibility: visible;
            z-index: 1;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        }

        .menu-toggle {
            display: flex;
        }
    }


/* Navigation End  */




/* Crousel Start */

/* .crausel{
    height:12.5cm;
    width: 100%;
    
} */



.slider {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.custom-carousel-container {
    position: relative;
    width: 100%;
    max-width: 1500px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background: #fff;
  }

  .custom-carousel-slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }

  .custom-carousel-slide {
    min-width: 100%;
    border-radius: 20px;
  }

  .custom-carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 20px;
  }

  .custom-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%;
    z-index: 10;
    transition: 0.3s ease;
  }

  .custom-carousel-btn:hover {
    background-color: #222;
  }

  .custom-carousel-prev {
    left: 10px;
  }

  .custom-carousel-next {
    right: 10px;
  }

  .custom-carousel-dots {
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    z-index: 5;
  }

  .custom-carousel-dot {
    height: 12px;
    width: 12px;
    margin: 0 6px;
    background-color: rgba(211, 210, 210, 0.73);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
  }

  .custom-carousel-dot:hover {
    background-color: #555;
  }

  .custom-carousel-dot.active {
    background-color: #ffc500;
    transform: scale(1.3);
  }

  @media (max-width: 768px) {
    .custom-carousel-container {
      border-radius: 14px;
    }

    .custom-carousel-btn {
      font-size: 18px;
      padding: 8px 12px;
    }

    .custom-carousel-dot {
      height: 10px;
      width: 10px;
    }

    .custom-carousel-slide img {
      border-radius: 14px;
    }
  }

  @media (max-width: 480px) {
    .custom-carousel-btn {
      font-size: 14px;
      padding: 6px 10px;
    }

    .custom-carousel-container {
      width: 100%;
    }

    .custom-carousel-dot {
      height: 8px;
      width: 8px;
    }
  }

/* Crousel End  */


/* Counter Start */

.counters {
    margin-top: 3px;
    padding: 3em 2em;
    /* background: #4193ff; */
    color: goldenrod;
    text-align: center;
}

.counters>div {
    max-width: 900px;
    margin: 0 auto;
    /* display: grid; */
    grid-template-columns: repeat(4, 1fr);
    gap: 4em 2em;
}

.counter {
    position: relative;
}

.counter h1 {
    font-size: 4em;
    margin-bottom:20px;
}

.counter:not(:last-child)::before {
    content: '';
    /* background: red; */
    position: absolute;
    width: 2px;
    height: 3em;
    top: 50%;
    transform: translateY(-50%);
    right: -1em;
}

@media (min-width: 768px) and (max-width: 950px) {
    .counters>div {
        /* grid-template-columns: 1fr 1fr; */
        display: grid;
    }

    .counter:nth-child(2)::before {
        display: none;
    }
}

@media (min-width: 951px) and (max-width:2560px) {
    .counters>div {
        /* grid-template-columns: 1fr 1fr; */
        display: grid;
        max-width: 1700px;
    }
    

    .counter:nth-child(2)::before {
        display: none;
    }
}

@media screen and (max-width:500px) {
    .counter>div {
        grid-template-columns: 1fr;
        row-gap: 5em;
    }

    .counter:not(:last-child)::before {
        width: 90%;
        height: 2px;
        top: initial;
        right: initial;
        bottom: -2em;
        left: 50%;
        transform: translateX(-50%);
    }
}


/* Counter End  */



/* Tag Start */



.so {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* Add padding for smaller screens */
}

.Tag {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto; /* Allow the height to adjust dynamically */
    width: 80%; /* Default width */
    padding: 10px; /* Padding for better spacing on smaller screens */
    background-color: black;
    font-size: 28px; /* Default font size */
    font-weight: 600;
    border: 3px solid goldenrod;
    border-radius: 20px;
    color: goldenrod;
    text-align: center; /* Center align text */
    transition: all 0.3s ease; /* Smooth transition for hover effects or resizing */
}



/* Responsive Design */

/* For small devices (phones, 320px and up) */
@media (max-width: 480px) {
    .Tag {
        width: 90%;
        font-size: 18px; /* Smaller font size for small screens */
        padding: 8px;
    }
}

/* For medium devices (tablets, 481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .Tag {
        width: 75%;
        font-size: 22px;
        padding: 10px;
    }
}

/* For large devices (small laptops, 769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .Tag {
        width: 60%;
        font-size: 22px;
        padding: 10px;
    }
}

/* For extra-large devices (desktops, 1025px and up) */
@media (min-width: 1025px) {
    .Tag {
        width: 45%; /* Restore the original width */
        font-size: 28px; /* Restore the original font size */
        padding: 12px;
    }
}




/* Tag End */




/* Service Card Start */

.service {
    margin-top: 30px;
    padding: 10px;
    background-color: rgba(211, 211, 211, 0.11);
}

.card1 {
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 20px;
}

.card1 .AC {
    height: 93px;
    width: 115px;
    border: 2px solid white;
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.card1 .AC:hover {
    background-color: lightgray;
    transform: scale(1.05);
}

.card1 img {
    height: 50px;
    margin-top:15px;
    /* margin-bottom: 10px; */
}

.card1 .AC p {
    font-size: 16px;
    text-align: center;
    color: black;
    /* font-weight: bold; */
}

.service button {
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block;
    font-weight: 600;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.service button a {
    text-decoration: none;
    color: white;
}

.service button:hover {
    background-color: goldenrod;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
}

/* Responsive Design */

/* For small devices (phones, 320px and up) */
@media (max-width: 480px) {
    .card1 .AC {
        width: 100px;
        height: 100px;
    }

    .card1 img {
        height: 40px;
    }

    .card1 .AC p {
        font-size: 14px;
    }
}

/* For medium devices (tablets, 481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .card1 {
        gap: 8px;
    }

    .card1 .AC {
        width: 90px;
        height: 90px;
    }
    .card1 .AC p {
        font-size: 14px;
    }
    
}

/* For large devices (small laptops, 769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .card1 {
        gap: 20px;
    }

    .card1 .AC {
        width: 110px;
        height: 110px;
    }

    .card1 img {
        height: 60px;
    }
    
}

/* For extra-large devices (desktops, 1025px and up) */
@media (min-width: 1025px) {
    .card1 {
        gap: 30px;
    }

    .card1 .AC {
        width: 115px;
        height: 93px;
    }

    .card1 img {
        height: 50px;
    }

    .card1 .AC p {
        font-size: 16px;
    }
    
}

/* Service Card End */



/* Card Tag Start */
.wu {
    /* height: 480px; */
    /* width: 100%; */
    background-color: rgba(0, 0, 255, 0.452);
    margin-top: 50px;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: flex-start; */
    /* Align items to the top */
}

.wu1 {
    /* margin-top: 40px; */
    /* text-align: center; */
    /* display: flex; */
    /* flex-direction: row; */
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.wut {
    font-size: 60px;
    color: white;
    
}

.wu1 .b1{
    margin-top: 10px;
    /* height:300px; */
    /* width:100%; */
    border-radius: 20px;
    background-color: black;
}
.wu1 .b1 img {  
    /* height: 100%; */
    /* width: 100%; */
    border-radius: 20px;
}
.wu1 .b2 {
    margin-top: 10px;
    /* height:300px; */
    /* width:100%; */
    border-radius: 20px;
    background-color: black;
}
.wu1 .b2 img {  
    /* height: 100%; */
    /* width: 100%; */
    border-radius: 20px;
}


/* Responsive design CARD TAG start */
/* Responsive Design 320px */

@media (min-width: 320px) and (max-width: 374px){
    .wu {
    height:100%;
    width: 100%;
    }
    .wu1 {
        /* margin-top: 40px; */
    text-align: center;
    display: flex;
    flex-direction:column;
    }
    .wut {
        margin-top: 10px;
        font-size: 40px;
        color: white;
    }
    .wu1 .b1{
        height:290px;
        width:90%;
    }
    .wu1 .b1 img {  
        height: 100%;
        width: 100%;
        border-radius: 20px;
    }
    .wu1 .b2 {
        height:290px;
        width:90%;
    }
    .wu1 .b2 img {  
        height: 100%;
        width: 100%;
        border-radius: 20px;
    }
    
    

}

/* Responsive Design 375px */


@media (min-width: 375px)and (max-width: 424px) {
    .wu {
        height:100%;
        width: 100%;
        }
        .wu1 {
            text-align: center;
            display: flex;
            flex-direction:column;
        }
        .wut {
            margin-top: 10px;
            font-size: 40px;
            color: white;
        }
        .wu1 .b1{
            height:320px;
            width:90%;
        }
        .wu1 .b1 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
        .wu1 .b2 {
            height:320px;
            width:90%;
        }
        .wu1 .b2 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }

}

/* Responsive Design 425px and (max-width: 455px) */


@media (min-width: 425px) and (max-width: 455px){
    .wu {
        height:100%;
        width: 100%;
        }
        .wu1 {
            text-align: center;
            display: flex;
            flex-direction:column;
        }
        .wut {
            margin-top: 20px;
            font-size: 40px;
            color: white;
        }
        .wu1 .b1{
            height:370px;
            width:90%;
        }
        .wu1 .b1 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
        .wu1 .b2 {
            height:370px;
            width:90%;
        }
        .wu1 .b2 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }

}


@media (min-width: 456px) and (max-width: 480px) {
    .wu {
        height:100%;
        width: 100%;
        }
        .wu1 {
            text-align: center;
            display: flex;
            flex-direction:column;
        }
        .wut {
            margin-top: 20px;
            font-size: 40px;
            color: white;
        }
        .wu1 .b1{
            height:370px;
            width:90%;
        }
        .wu1 .b1 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
        .wu1 .b2 {
            height:370px;
            width:90%;
        }
        .wu1 .b2 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
}

/* Responsive size 481px to 768px (e.g., iPhone 12, modern Android phones) */


@media (min-width: 481px) and (max-width: 767px) {
    .wu {
        height:100%;
        width: 100%;
        }
        .wu1 {
            text-align: center;
            display: flex;
            flex-direction:column;
        }
        .wut {
            margin-top: 20px;
            font-size: 40px;
            color: white;
        }
        .wu1 .b1{
            height:370px;
            width:90%;
        }
        .wu1 .b1 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
        .wu1 .b2 {
            height:370px;
            width:90%;
        }
        .wu1 .b2 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
}

/* Responsive size 768px to 950px (e.g., iPads, Samsung tablets) */

@media (min-width: 768px) and (max-width: 950px) {
    .wu {
        height:100%;
        width: 100%;
        }
        .wu1 {
            text-align: center;
            display: flex;
            flex-direction:column;
        }
        .wut {
            margin-top: 20px;
            font-size: 40px;
            color: white;
        }
        .wu1 .b1{
            height:450px;
            width:60%;
        }
        .wu1 .b1 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
        .wu1 .b2 {
            height:450px;
            width:60%;
        }
        .wu1 .b2 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
}


/* Responsive size 951px to 1024px (e.g., iPads, Samsung tablets) */

@media (min-width: 951px) and (max-width:1024px) {
    .wu {
        height:400px;
        width: 100%;
        justify-items: center;
        display: flex;
        }
        .wu1 {
            text-align: center;
            display: flex;
            
            
        }
        .wut {
            /* margin-top: 20px; */
            font-size: 30px;
            /* margin-right: 50px; */
            padding: 10px;
            color: white;
        }
        .wu1 .b1{
            height:350px;
            width:35%;
        }
        .wu1 .b1 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
        .wu1 .b2 {
            height:350px;
            width:35%;
        }
        .wu1 .b2 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
}

/* Responsive size 1025px to 1440px (e.g., MacBooks, standard laptops) */

@media (min-width: 1025px) and (max-width: 1440px) {
    .wu {
        height:450px;
        width: 100%;
        /* justify-items: center; */
        }
        .wu1 {
            text-align: center;
            display: flex;
            
            
        }
        .wut {
            /* margin-top: 20px; */
            font-size: 45px;
            /* margin-right: 50px; */
            padding: 70px;
            color: white;
        }
        .wu1 .b1{
            height:420px;
            width:30%;
        }
        .wu1 .b1 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
        .wu1 .b2 {
            height:420px;
            width:30%;
        }
        .wu1 .b2 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
}


/* Responsive size 1441px to 2560px (e.g., MacBooks, standard laptops) */

@media (min-width: 1441px) and (max-width: 2560px) {
    .wu {
        height:800px;
        width: 100%;
        justify-items: center;
        display: flex;
        }
        .wu1 {
            text-align: center;
            display: flex;
            /* align-items: center; */
            /* justify-content: center; */
            
        }
        .wut {
            /* margin-top: 20px; */
            font-size: 100px;
            /* margin-right: 50px; */
            padding: 100px;
            color: white;
            
        }
        .wu1 .b1{
            height:700px;
            width:30%;
        }
        .wu1 .b1 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }
        .wu1 .b2 {
            height:700px;
            width:30%;
        }
        .wu1 .b2 img {  
            height: 100%;
            width: 100%;
            border-radius: 20px;
        }   
}

/* Card Tag END */




/* Contact Form Start */

.mf {
    margin-top: 70px;
    height:100%;
    width: auto;
    background-color: rgba(127, 127, 133, 0.377);
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: flex-start; */
}

.mf1 {
    /* margin-top: 40px; */
    text-align: center;
    /* display: flex;    */
    /* flex-direction: column; */
    /* align-items: center; */
}

.mft {
    font-size: 70px;
    color: goldenrod;
    margin-bottom: 40px;
}

.boxes {
    display: flex;
    flex-direction: column;
    gap: 55px;
    /* margin-top: 20px; */
}

/* Box styling */
.mb1{
    /* height: 100%; */
    /* width: 100%; */
    /* margin-top: 10px; */
    /* background-color: royalblue; */
    border-radius: 20px;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}
.mb2 {
    /* height: 40px; */
    /* width: 450px; */
    /* background-color: #b8860b; */
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}    

.mb2 img {
    height: 80%;
    width: 100%;
    /* border-radius: 20px; */
}

/* Form Container Styling */
.cf {
    /* width: 100%;
    height: 100%; */
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}

/* Form styling within mb1 */
.contact-form {
    width: 90%;
    /* Adjust width to fit within mb1 */
    max-width: 400px;
    /* padding: 10px; */
    background-color: #f9f9f9;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.contact-form h2 {
    color: #333;
    font-size: 20px;
    text-align: center;
    padding: 0;
    margin: 0;
}

.contact-form label {
    font-size: 20px;
    color: #333;
    float: left;
    display: flex;
    margin-left: 10px;
}

.contact-form input,
.contact-form textarea {
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    width: 90%;
    margin-left: 7px;
    border-bottom: 2px solid;
}

.contact-form textarea {
    resize: none;
    height: 20px;
}

.contact-form button {
    /* padding: 10px; */
    font-size: 16px;
    color: #fff;
    background-color: goldenrod;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 35%;
    /* justify-items: center; */
    height: 38px;
    align-self: center;
}

.contact-form button:hover {
    background-color: #b8860b;
}



/* Responsive design CONTACT FORM start */
/* Responsive Design 320px */

@media (min-width: 320px) and (max-width: 374px){
    .mft {
        font-size: 30px;
       
    }
    .mb2 {
        height: 100%;
        width: 100%;
        
        
    }
    .mb2 img {
        height: 100%;
        width: 100%;
        /* border-radius: 20px; */
    }
    .mb1{
        height:100%;
        width: 100%;
    }
    .cf{
        width: 100%;
        height: 100%;
    }

}

/* Responsive Design 375px */


@media (min-width: 375px)and (max-width: 424px) {
    .mft {
        font-size: 30px;
       
    }
    .mb2 {
        height: 100%;
        width: 100%;
       
        
    }
    .mb2 img {
        height: 100%;
        width: 100%;
        /* border-radius: 20px; */
    }
    .mb1{
        height:100%;
        width: 100%;
    }
    .cf{
        width: 100%;
        height: 100%;
    }

}

/* Responsive Design 425px and (max-width: 455px) */


@media (min-width: 425px) and (max-width: 455px){
    .mft {
        font-size: 30px;
       
    }
    .mb2 {
        height: 100%;
        width: 100%;
        
        
    }
    .mb2 img {
        height: 100%;
        width: 100%;
        /* border-radius: 20px; */
    }
    .mb1{
        height:100%;
        width: 100%;
    }
    .cf{
        width: 100%;
        height: 100%;
    }

}


@media (min-width: 456px) and (max-width: 480px) {
    .mft {
        font-size: 30px;
       
    }
    .mb2 {
        height: 100%;
        width: 100%;
        
        
    }
    .mb2 img {
        height: 100%;
        width: 100%;
        /* border-radius: 20px; */
    }
    .mb1{
        height:100%;
        width: 100%;
    }
    .cf{
        width: 100%;
        height: 100%;
    }
}

/* Responsive size 481px to 768px (e.g., iPhone 12, modern Android phones) */


@media (min-width: 481px) and (max-width: 767px) {
    .mft {
        font-size: 30px;
       
    }
    .mb2 {
        height: 100%;
        width: 100%;
        
        
    }
    .mb2 img {
        height: 100%;
        width: 80%;
        /* border-radius: 20px; */
    }
    .mb1{
        height:100%;
        width: 100%;
    }
    .cf{
        width: 100%;
        height: 100%;
    }
}

/* Responsive size 768px to 950px (e.g., iPads, Samsung tablets) */

@media (min-width: 768px) and (max-width: 950px) {
    .mft {
        font-size: 40px;
       
    }
    .mb2 {
        height: 100%;
        width: 100%;
        
        
    }
    .mb2 img {
        height: 100%;
        width: 80%;
        /* border-radius: 20px; */
    }
    .mb1{
        height:100%;   
        width: 100%;
    }
    .cf{
        width: 70%;
        /* height: 100%; */
    }
}


/* Responsive size 951px to 1024px (e.g., iPads, Samsung tablets) */

@media (min-width: 951px) and (max-width:1024px) {
    .mft {
        font-size: 70px;
       
    }
    .boxes {
        display: flex;
        flex-direction: row;
        /* gap: 300px; */
        justify-content: space-around;
        /* margin-top: 20px; */
    }
    .mb2 {
        height: 450px;
        width: 40%;
        
        
    }
    .mb2 img {
        height: 100%;
        width: 100%;
        /* border-radius: 20px; */
    }
    .mb1{
        /* margin: 0px; */
        height:100%;
        width: 50%;
    }   
    .cf{
        width: 100%;
        height: 100%;
    }
}

/* Responsive size 1025px to 1440px (e.g., MacBooks, standard laptops) */

@media (min-width: 1025px) and (max-width: 1440px) {
    .mft {
        font-size: 70px;
    }
    .boxes {
        display: flex;
        flex-direction: row;
        /* gap: 300px; */
        justify-content: space-around;
        /* margin-top: 20px; */
    }
    .mb2 {
        height: 450px;
        width: 40%;
        /* background-color: #b8860b; */
    }
    .mb1{
        /* margin: 0px; */
        height:100%;
        width: 50%;
    } 
    .cf{
        width: 90%;
        max-width: 400px;
        height: 100%;
    }
}


/* Responsive size 1441px to 2560px (e.g., MacBooks, standard laptops) */

@media (min-width: 1441px) and (max-width: 2560px) {
    .mft {
        font-size: 70px;
    }
    .boxes {
        display: flex;
        flex-direction: row;
        /* gap: 300px; */
        justify-content: space-around;
        /* margin-top: 20px; */
    }
    .mb2 {
        height: 700px;
        width: 40%;
        
    }
    .mb1{
        /* margin: 0px; */
        height:100%;
        width: 50%;
    } 
    .cf{
        width: 90%;
        /* max-width: 400px; */
        height: 100%;
    }
    .contact-form{
        height: 600px;
        gap: 25px;
    }
    .contact-form label {
        font-size: 22px;
    }
}



/* Contact Form End  */





/* testimonail Start ***/

/* First Testimonial Styles */
.tc {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #f9f9f9;
    /* margin-top: 115px; */
    padding: 20px 0;
}

.testimonial-section {
    text-align: center;
    width: 90%;
    max-width: 1835px;
}

.testimonial-section h2 {
    font-size: 2em;
    margin-top: 55px;
    margin-bottom: 85px;
    color: #333;
    font-family: "Merienda", cursive;
}

.testimonial-container,
.testimonial-container-2 {
    display: flex;
    overflow: hidden;
    position: relative;
    
}

.testimonial-gap {
    height: 50px; /* Adjust spacing between the two sections */
}

.testimonial-slider {
    display: flex;
    animation: slideLeft 10s linear infinite; /* Slide left for the first testimonial carousel */
}

.testimonial-slider-2 {
    display: flex;
    animation: slideRight 10s linear infinite; /* Slide right for the second testimonial carousel */
}

.testimonial,
.testimonial-2 {
	flex: 0 0 33.33%;
    /* Show 3 testimonials per view */
    box-sizing: border-box;
    padding: 20px;
    background-color: #fdf4fa;
    margin: 0 10px;
    border-radius: 8px;
    border: 1px solid #E9D2AD;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 140px;
    /* Set fixed width */
    height: 200px;
    text-align: left;
}

.testimonial-2 {
    background-color: #f4f9fd; /* Different background color for second testimonial */
    border-color: #B2D6E2;
}

/* Right-aligned quotation mark for all testimonials */
.testimonial::before,
.testimonial-2::before {
    content: "”";
    font-size: 5em;
    color: #e0e0e0;
    position: absolute;
    top: -5px;
    right: 10px; /* Position the quotation mark on the right side */
}

.testimonial-content,
.testimonial-content-2 {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.testimonial img,
.testimonial-2 img {
    width: 60px;
    height: 60px;
    border-radius:50%;
    margin-right: 15px;
    border: 2px solid rgba(128, 128, 128, 0.575);
    
}

.testimonial-info,
.testimonial-info-2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.name,
.name-2 {
    font-size: 1em;
    font-weight: bold;
    color: #333;
    margin: 0;
    text-align: center;
}
.profession {
	font-size: 0.85em;
    color: #E9D2AD;
    margin: 0;
    padding: 0;
}

.profession-2 {
    font-size: 0.85em;
    color: #A2C9D2;
    text-align: center; /* Ensure each text line is centered */
    margin: 0;
}

.stars,
.stars-2 {
    color: #FFD700;
    margin-bottom: 10px;
}

.text,
.text-2 {
    font-size: 1.1em;
    color: #666;
    margin-top: 10px;
    font-family: "Chakra Petch", serif;
    font-weight: 300;
    font-style: normal;
}
.testimonial-slider {
    display: flex;
    animation: slideLeft 20s linear infinite; /* Increased to 20s for slower speed */
}

.testimonial-slider-2 {
    display: flex;
    animation: slideRight 20s linear infinite; /* Increased to 20s for slower speed */
}

/* Continuous Sliding Animation for Left and Right Directions */
@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}





/* Responsive design Testimonial start */
/* Responsive Design 320px */

@media (min-width: 320px) and (max-width: 374px){
    .tc {
        margin-top: 65px;
    }

}

/* Responsive Design 375px */


@media (min-width: 375px)and (max-width: 424px) {
    .tc {
        margin-top: 85px;
    }

}

/* Responsive Design 425px and (max-width: 455px) */


@media (min-width: 425px) and (max-width: 455px){
    .tc {
        margin-top: 135px;
    }

}


@media (min-width: 456px) and (max-width: 480px) {
    .tc {
        margin-top: 160px;
    }
}

/* Responsive size 481px to 768px (e.g., iPhone 12, modern Android phones) */


@media (min-width: 481px) and (max-width: 767px) {
    .tc {
        margin-top: 170px;
    }
}

/* Responsive size 768px to 950px (e.g., iPads, Samsung tablets) */

@media (min-width: 768px) and (max-width: 950px) {
    .tc {
        margin-top: 275px;
    }

}


/* Responsive size 951px to 1024px (e.g., iPads, Samsung tablets) */

@media (min-width: 951px) and (max-width:1024px) {
    .testimonial-section h2 {
        margin-top: 5px;
    }
}


/* Responsive size 1025px to 1440px (e.g., MacBooks, standard laptops) */

@media (min-width: 1025px) and (max-width: 1440px) {
    .testimonial-section h2 {
        margin-top: 5px;
    }
}


/* Responsive size 1441px to 2560px (e.g., MacBooks, standard laptops) */

@media (min-width: 1441px) and (max-width: 2560px) {
    .tc {
        margin-top: 220px;
    }
}

/* Testimonial End  */




/* Card Tag Start */

.FEAB {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
}

.FEA {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 80px;
    padding: 10px;
}

.FEA_box {
    width: 100%;
    max-width: 1200px;
    /* padding: 20px; */
    box-sizing: border-box;
    background-color: #e9ecef;
    border: 1px solid black;
    border-radius: 10px;
}

.features-container {
    display: flex;
    justify-content: center; /* Ensures the buttons are spaced evenly */
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
}

.feature-card {
    background-color: #b8343b;
    color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    margin: 10px;
    flex-basis: 30%;
    min-width: 280px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    box-sizing: border-box;
}

.feature-card h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 7px;
}

.feature-card p {
    font-size: 14px;
    margin-bottom: 20px;
}

.feature-card .button-container {
    display: flex;
    justify-content: center; /* Align buttons horizontally */
    width: 100%;
}

.feature-card button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    align-self: center;
}
.feature-card button a{
    text-decoration: none;
    color: white;
}

.feature-card button:hover {
    background-color: #218838;
}

.heart-icon {
    font-size: 50px;
    color: white;
    /* margin-bottom: 15px; */
}


/* Card tag End */


/* Footer start */
.ftr{
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #2d0c55;
    color: #fff;
  }
  .footer {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for responsiveness */
    justify-content: space-between;
    padding: 20px 10px;
    background-color: #4a148c;
    color: #fff;
    gap: 30px;
    margin-top: 80px;
  }
  .footer-column {
    flex: 1;
    min-width: 250px; /* Ensures columns stay readable on small screens */
    max-width: 400px;
    margin: 0 auto;
  }
  .footer h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #fff;
    display: flex;
    align-items: center;
  }
  .footer h3 .icon-circle {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ff8fda;
    border-radius: 50%;
    background-color: transparent;
    color: #ff8fda;
    margin-right: 8px;
    font-size: 16px;
  }
  .footer p, .footer a {
    color: #ff8fda;
    text-decoration: none;
    line-height: 1.8;
    font-size: 14px;
  }
  .footer a:hover {
    text-decoration: underline;
  }
  .footer .contact-info p {
    margin: 10px 0;
  }
  .footer .latest-news {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .footer .news-item {
    display: flex;
    align-items: center;
  }
  .footer .news-item img {
    width: 80px;
    height: 70px;
    border-radius: 5px;
    margin-right: 10px;
    transition: transform 0.3s ease;
  }
  .footer .news-item img:hover {
    transform: scale(1.1);
  }
  .footer .news-item-content {
    flex: 1;
  }
  .footer .news-item-content a {
    display: block;
    color: #ff8fda;
    font-size: 14px;
    margin-bottom: 4px;
  }
  .footer .news-item-content p {
    color: #ff8fda;
    font-size: 12px;
    margin-top: 5px;
    padding-left: 2px;
  }
  .email-subscribe {
    display: flex;
    margin-top: 10px;
    justify-content: center;
  }
  .email-subscribe input[type="email"] {
    padding: 8px;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
    font-size: 14px;
  }
  .email-subscribe button {
    background-color: #ff4081;
    color: #fff;
    padding: 8px;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .email-subscribe button:hover {
    background-color: #ff80ab;
  }
  .icon {
    margin-right: 8px;
    color: #ff8fda;
    transition: transform 0.3s ease, color 0.3s ease;
  }
  .icon:hover {
    transform: scale(1.2);
    color: #ff4081;
  }
  .instagram img {
    width: 80px;
    height: 80px;
    margin: 5px;
    transition: transform 0.3s ease;
  }
  .instagram img:hover {
    transform: scale(1.1);
  }
  .footer-bottom {
    border-top: 1px solid #c2c2c2;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #c2c2c2;
    background-color: #4a148c;
  }
  .footer-bottom a {
    color: #ff8fda;
    text-decoration: none;
  }
  .footer-bottom a:hover {
    text-decoration: underline;
  }

  /* Responsive Design */
  @media screen and (max-width: 768px) {
    .footer {
      flex-direction: column; /* Stacks columns vertically on small screens */
      align-items: center;
      gap: 20px;
    }
    .footer-column {
      max-width: 100%; /* Expands columns to full width */
      text-align: center; /* Center-aligns text for readability */
    }
    .footer .latest-news .news-item {
      flex-direction: column; /* News items stack vertically */
      align-items: center;
    }
    .footer .news-item img {
      margin: 0 0 10px 0; /* Adjust margin for stacked layout */
    }
    .footer-bottom {
      flex-direction: column;
      text-align: center;
      gap: 5px;
    }
  }

  @media screen and (max-width: 480px) {
    .footer h3 {
      font-size: 16px;
    }
    .footer p, .footer a {
      font-size: 12px;
    }
    .footer .news-item img {
      width: 70px;
      height: 60px;
    }
    .email-subscribe input[type="email"] {
      font-size: 12px;
      padding: 6px;
    }
    .email-subscribe button {
      font-size: 12px;
      padding: 6px;
    }
    .instagram img {
      width: 60px;
      height: 60px;
    }
  }

  /* Footer End  */