@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

:root{
    --yellow:#f5bf23;
    --black:#111;
    --white:#fff;
    --light-color:#666;
    --light-bg:#eee;
    --border:.1rem solid rgba(0,0,0,.3);
    --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
}
*{
    font-family: "Lato", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: .2s linear
}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--val), 1fr));
    gap: 1.5rem;
}

.titleText {
    font-size: var(--titleSize);
    text-transform: uppercase;
    color: var(--black);
}

.graphText {
    font-size: var(--graphSize);
    line-height: 2;
    color: var(--light-color);
}

html{
    font-size: 60%;
    overflow-x:hidden ;
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;

    &::-webkit-scrollbar{
        
        width: 1rem;
    }

    &::-webkit-scrollbar-track{
        background: transparent;
    }

    &::-webkit-scrollbar-thumb{
        background: grey;
        border-radius: 5rem;
}
}
@keyframes fadeIn{
    0%{
        top: 50%;
        opacity: 0;
    }
}


.header{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: var(--box-shadow);
    padding:1.5rem 10% ;
    z-index: 1000;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--white);
    
}
.navbar a {
    font-size: 1.5rem;
    margin-left: 2rem;
    color: var(--black);
    transition: transform 0.3s ease; /* Adding transition for smooth movement */
}

.navbar a:hover {
    color: coral; /* Changing color on hover */
    transform: translateY(-3px); /* Moving the link slightly up on hover */
}
.dropdown {
  position: relative;
  display: inline-block; /* Display dropdown container inline */
}

.dropdown-toggle {
  display: block;
  text-decoration: none; /* Remove underline from link */
  padding: 10px; /* Add padding to make the link clickable */
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.dropdown-menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dropdown-menu li {
  padding: 10px;
}

/* Show the dropdown menu when its parent is hovered or focused */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Align navigation items horizontally */
.dropdown-menu ul {
  display: flex;
  flex-direction: column; /* Stack items vertically */
}

.dropdown-menu li {
  margin: 0; /* Remove margin to keep items aligned */
}
.icons {
    display: flex;
    justify-content: center;
    align-items: center;
}

.icons div {
    height: 5rem;
    width: 5rem;
    line-height: 5rem;
    font-size: 2rem;
    color: var(--black);
    cursor: pointer;
}

.icons div:hover {
    color: coral;
   
}
#menu-btn{
    display: none;
}

section{
    padding: 5rem 10%;
}

.search-form{
    position: absolute;
    top: 110%; left: 50%;
    transform: translateX(-50%);
    width: 70rem;
    padding: 1rem;
    background: var(--white);
    display: flex;
    align-items: center;
    box-shadow: var(--box-shadow);
    border: var(--border);
    gap: 1rem;
    display: none;
    animation: fadeIn .2s linear;

    &.active{
        display: flex;
    }

    input{
        width: 100%;
        padding: 1.2rem 1.4rem;
        background: var(--light-bg);
        font-size: 1.6rem;
        color: var(--light-color);
    }
    label{
        font-size:2.5rem;
        color: var(--black);
        cursor: pointer;
        margin: 0 1rem;
        &:hover{
            color: plum;
        }
    }
}

.contact-info{
    position: fixed;
    top: 0; right: 0;
    width: 35rem;
    height: 100%;
    background: var(--white);
    text-align: center;
    z-index: 1100;
    padding: 0 2rem;
    padding-top: 5rem;
    display: none;

    &.active{
        box-shadow: 0 0 0 100vw rgba(0,0,0,.7);
        display: block;
    }

    #close-contact-info{
        position: absolute;
        top: 1rem; right: 1.5rem;
        font-size: 5rem;
        cursor: pointer;
        color: var(--black);
        &:hover{
            transform: rotate(90deg);
        }
    }
   
    .info{
        padding: 2rem 0;
        i{
            height:5rem;
            width: 5rem;
            line-height: 5rem;
            background: var(--light-bg);
            color: var(--black);
            cursor: pointer;
            text-align: center;
            margin-bottom: .5rem;
            font-weight: bold;
            font-size: larger;

        }
        h3{
            font-size: var(--titleSize);
            text-transform: uppercase;
            color: var(--black);
            padding: 1rem 0;
            font-weight: bolder;
            font-size: larger;
        }
        p{
            font-size: var(--graphSize);
            line-height: 2;
            color: var(--black);
            font-size: larger;
            font-weight: 5rem;
            
        }
    }
    .share{
        padding-top: 1rem;
        border-top: var(--border);
        margin-top: 1rem;

        a{
            height: 5rem; 
            width: 5rem; /* Increase the width */
            line-height: 5rem; 
            background: var(--light-bg);
            color: var(--black);
            cursor: pointer;
            text-align: center;
            margin-bottom: .5rem;
            font-weight: bold;
            font-size: larger;
            margin: 0.3rem;
        }
        a.fab.fa-instagram,
        a.fab.fa-whatsapp,
        a.fab.fa-facebook-f
        {
            font-size: 3rem; /* Increase the font size to make the Instagram logo larger */
            color: var(--black);
            cursor: pointer;
            margin-bottom: .5rem;
        }
        
    }
}


.title-1 {
    font-size: 4rem;
    text-transform: uppercase;
    margin-bottom: 1rem; 
    font-family: 'Abril Fatface', cursive; 
}

.sub-title-1 {
    font-size: 3rem;
    margin-bottom: 1rem; 
}

.work-1 {
    font-size: 2rem;
    margin-bottom: 20px; /* Add margin bottom for space */
}

.home {
    padding: 0;
    .slide {
        min-height: 50rem;
        display: flex;
        align-items: center;
        position: relative;
        background-size: cover !important;
        background-position: center !important;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, var(--white), transparent);
        }

        .content {
            width: 50rem;
            position: relative;

            h3 {
                font-size: 4rem;
                text-transform: uppercase;
                margin-bottom: 20px; /* Add margin bottom for gap */
            }

            p {
                font-size: 1.5rem;
                line-height: 2;
                color: var(--light-color);
                margin-bottom: 20px; 
                padding: 1rem 0;
            }

            a {
                margin-bottom: 20px; /* Add margin bottom for gap */
            }
        }
    }
    .swiper-button-next,
    .swiper-button-prev{
        top:initial;
        bottom : 0;
        left:initial;
        right: 0;
        height: 7rem;
        width: 7rem;
        line-height: 7rem;
        font-size: 3rem;
        background: var(--white);
        
        &:hover{
            background: coral;
        }

    }

    .swiper-button-next::after,
    .swiper-button-prev::after{
        font-size: 2rem;
        color: var(--black);
    }
.swiper-button-prev{
    right: 7rem;
}
}

/* about */

.heading{
    text-align: center;
    margin-bottom: 3rem;
    font-size: var(--titleSize);
    text-transform: uppercase;
    color: var(--black);
    padding-left: 1rem ;
    font-size:xx-large;
    

}

.about .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7rem;
  }
  
  .about .row .video {
    flex: 1 1 40%;
  }
  
  .about .row .video video {
    width: 100%;
  }
  
  .about .row .content {
    flex: 1 1 50%;
  }
  
  .about .row .content h3 {
    font-size: 30px;
    color: var(--black);
    margin-bottom: 20px;
  }
  
  .about .row .content p {
    font-size: 15px;
    color:#666;
    margin-bottom: 30px;
  }
  
  .about .row .content .btn {
    background-color: gray;
    color: white;
    border-radius: 0;
    font-size: 20px;
    padding: 10px 10px;
  }
  .about-1 {
    display: flex;
    flex-wrap: wrap;
  }
  
  .about-1 .text {
    margin-top: 30px;
    flex: 1 1 60%; /* Adjust the width of the text area */
    padding-right: 20px; /* Add space between text and images */
  }

  .about-1 h2,
  .about-1 h4,
  .about-1 p {
    
    /* Set font sizes relative to the parent container */
    font-size: 100%; /* Reset font size */
  }
  
  .about-1 h2 {
    font-size: 2.2em; /* Adjust font size for h2 */
  }
  
  .about-1 h4 {
    margin-top: 30px;
    font-size: 2.0em; /* Adjust font size for h4 */
  }
  
  .about-1 p {
    margin-top: 30px;
    font-size:1.5em; /* Adjust font size for p */
  }
  
  
  .about-1 .images {
    height: 450px;
    flex: 1 1 40%; /* Adjust the width of the images area */
  }
  
  .about-1 .images img {
    margin-top: 30px;
    display: block;
    max-width: 85%; /* Set maximum width to 100% of container */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Add space between images */
  }
  
  /* project */


.project-container p{

    font-size: 1.5em;

}
.project-container {
    display: flex;
    align-items: center;
  }
  
  .project-container .image {
    flex: 1 1 40%; /* Adjust the width of the image area */
  }
  
  .project-container .image img {
    max-width: 100%; /* Ensure the image doesn't exceed its container */
    display: block;
    width: 100%; /* Ensure the image fills its container */
    height: auto; /* Maintain aspect ratio */
}

  
  .project-container .content {
    flex: 1 1 60%; /* Adjust the width of the content area */
    padding-left: 20px; /* Add spacing between image and content */
  }
  
  .our-project {
    font-size: 2em;
    text-align: center; /* Center the "Our Projects" heading */
    margin-top: 20px; /* Add space between content and "Our Projects" */
  }

  .our-project p{
    margin-top: 10px;
    font-size: 15px;
  }

  /* Styles for Swiper.js slider */
  .swiper-container {
    width: 100%;
    margin-top: 20px;
    overflow: hidden; /* Hide overflow to prevent horizontal scroll */
}

.swiper-slide {
    width: calc(20% - 10px); /* Set width for each slide */
    margin-right: 20px; /* Space between slides */
}

.swiper-slide img {
    width: 100%; /* Ensure images take up the entire space of the slide */
    height: auto; /* Maintain aspect ratio */
}
.swiper-slide:last-child {
    margin-right: 0;
} 

.swiper-slide img {
    margin-top: 20px;
    width: 200px; /* Set the width of the images */
    height: 150px; /* Set the height of the images */
    margin-right: 20px; 
}
.button-container {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    text-decoration: none;
    background-color: rgb(254, 161, 127); /* Background color */
    color: white; /* Text color */
}
.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
.button-container h3,
.button-container h6,
.button-container a {
    margin-bottom: 10px; /* Adjust as needed */
}

.custom-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .custom-column {
    flex-basis: 30%; /* Adjust this value to change column width */
  }
  
  
  .custom-square img {
    width: 35px;
    height: 35px;
    display: block;
    margin: 0 auto 10px; /* Center image */
  }
  
  .custom-square h3 {
    color: #333;
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  
  .custom-square p {
    color: #666;
  }
  .custom-row-unique {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 25px;
  }
  
  .custom-heading {
    text-align: center;
    width: 100%;
  }
  
  .custom-heading h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  .custom-heading p {
    font-size: 16px;
    margin-bottom: 20px;
  }
  
  .custom-column-unique {
    flex-basis: calc(20% - 20px); /* Adjust the width as needed */
    margin-bottom: 20px;
  }
  
  .custom-square-unique {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: center; /* Center items vertically */
  }
  
  .custom-square-unique img {
    width: 75px;
    /* max-width: 100%; */
    height: 75px;
    display: block;
    margin-bottom: 10px;
  }
  
  .custom-square-unique h3 {
    font-size: 10px;
    margin-bottom: 0;
  }
  
  .custom-square-unique p {
    font-size: 6pxpx;
  }
  
/* service */

.service {
    padding: 50px 0;
    background-color: #f8f8f8; /* Adjust as needed */
}

.service-container {
    width: 80%;
    margin: 0 auto;
}

.service h2 {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 30px;
}

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

.col {
    flex: 1;
    padding: 0 15px;
}

.col img {
    max-width: 100%;
    height: auto;
}

.col p {
    font-size: 1.5rem;
    line-height: 1.6;

}
.serv{
    background-color: coral;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}



/* Interior Design Section Styles */


.interior-row {
    margin-top: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  /* Column Styling */
  .interior-col {
    flex: 1;
    padding: 20px;
  }
  
  /* Section Heading */
  .interior-heading {
    font-size: 2.5rem;
    color: coral;
    text-align: center;
    margin-bottom: 10px; /* Adjusted margin-top to set 10px space */
  }
  
  /* Image Styling */
  .interior-img {
    height: 250px;
    
  }
  
  /* Paragraph Styling */
  .interior-text {
    font-size: 1.5rem;
    text-align: justify;
    line-height: 1.6;
  }



/* New Section Styles */

.new-section {
    text-align: center;
    margin-bottom: 0px; 
  }
  
  .new-section-heading {
    margin-bottom: 20px;
  }
  
  .new-section-title {
    color: coral;
    font-size: 2rem;
  }
  
  .new-section-content {
    margin-bottom: 20px;
  }
  
  .new-section-paragraph {
    font-size: 1.5rem;
    line-height: 1.5;
    margin-left: auto;
    margin-right: auto;
}

  
  .new-section-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }
  
  .new-section-col {
    flex: 1;
    padding: 20px;
    text-align: center;
  }
  
  .new-section-subtitle {
    color: cadetblue;
    font-size: 1.5rem;
  }
  
  .new-section-img {
    height: 150px; 
    width: auto;
    margin-top: 10px;
  }
  
  .new-section-text {
    font-size: 1rem;
    margin-top: 10px;
  }
    


  /* Dining Section Styles */
  /* .dining-section {
    text-align: center;
    margin-bottom: 50px;
  }
  
  .dining-heading {
    margin-bottom: 20px;
  }
  
  .dining-title {
    color: coral;
    font-size: 2rem;
  }

  
  .dining-content {
    margin-bottom: 20px;
  }
  
  .dining-paragraph {
    font-size: 1.5rem;
    line-height: 1.5;
   
    margin-left: auto;
    margin-right: auto;
  }
  
  .dining-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }
  
  .dining-col {
    flex: 1;
    margin: 0px;
    text-align: center;
  }
  
  .dining-subtitle {
    color: cadetblue;
    font-size: 1.5rem;
  }
  
  .dining-img {
    height: 150px;
    width: auto;
    margin-top: 10px;
  }
  
  .dining-text {
    font-size: 1rem;
    margin-top: 10px;
  }
   */
  

/* Wall & Roof Section Styles */

.wall-roof-section {
    text-align: center;
    margin-bottom: 50px; /* Adjust as needed */
  }
  
  .wall-roof-heading {
    margin-bottom: 20px;
  }
  
  .wall-roof-title {
    color: coral;
    font-size: 2rem;
  }
  
  .wall-roof-content {
    margin-bottom: 20px;
  }
  
  .wall-roof-paragraph {
    font-size: 1.2rem;
  }
  
  .wall-roof-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }
  
  .wall-roof-col {
    flex: 1;
    padding: 20px;
    text-align: center;
  }
  
  .wall-roof-subtitle {
    color: cadetblue;
    font-size: 1.5rem;
  }
  
  .wall-roof-img {
    height: 150px; /* Adjust as needed */
    width: auto;
    margin-top: 10px;
  }
  
  .wall-roof-text {
    font-size: 1rem;
    margin-top: 10px;
  }
/* Bedroom Interior Designers Section Styles */

.bedroom-section {
    text-align: center;
    margin-bottom: 50px; /* Adjust as needed */
  }
  
  .bedroom-heading {
    margin-bottom: 20px;
  }
  
  .bedroom-title {
    color: coral;
    font-size: 2rem;
  }
  
  .bedroom-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
  }
  
  .bedroom-col {
    flex: 1;
    padding: 20px;
    text-align: center;
  }
  
  .bedroom-subtitle {
    color: cadetblue;
    font-size: 1.5rem;
  }
  
  .bedroom-img {
    height: 150px; /* Adjust as needed */
    width: auto;
    margin-top: 10px;
  }
  
  .bedroom-text {
    font-size: 1rem;
    margin-top: 10px;
  }
/*pooja */
/* Bedroom Section Styles */
.bedroom-section {
    margin-top: 50px;
  }
  
  .bedroom-title {
    color: coral;
    text-align: center;
  }
  
  .bedroom-content {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .bedroom-paragraph {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  
  .bedroom-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 30px;
  }
  
  .bedroom-col {
    flex: 1;
    padding: 0 10px;
  }
  
  .bedroom-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .bedroom-text {
    margin-top: 15px;
  }
  
  /* Pooja Room Section Styles */
  .pooja-section {
    margin-top: 50px;
  }
  
  .pooja-title {
    color: coral;
    text-align: center;
  }
  
  .pooja-content {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .pooja-paragraph {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  
  .pooja-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 30px;
  }
  
  .pooja-col {
    flex: 1;
    padding: 0 10px;
  }
  
  .pooja-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .pooja-text {
    margin-top: 15px;
  }
/* False Ceiling Section Styles */
.false-ceiling-section {
    margin-top: 50px;
  }
  
  .false-ceiling-title {
    color: coral;
    text-align: center;
  }
  
  .false-ceiling-content {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .false-ceiling-paragraph {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  
  .false-ceiling-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 30px;
  }
  
  .false-ceiling-col {
    flex: 1;
    padding: 0 10px;
  }
  
  .false-ceiling-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .false-ceiling-text {
    margin-top: 15px;
  }

  
  /* Button Styling */

   .btn-interior {
    background-color: coral;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    margin-top: 20px;
  }
  
  .btn-interior:hover {
    background-color: darkorange;
    cursor: pointer;
  }
  
 
   @media only screen and (max-width: 768px) {
   
    .interior-row {
      flex-direction: column;
    }
  }


  /* Renovation Section Styles */
.renovation-section {
    margin-top: 50px;
  }
  
  .renovation-title {
    color: coral;
    text-align: center;
  }
  
  .renovation-row {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 30px;
  }
  
  .renovation-col {
    flex: 1;
    padding: 0 10px;
    text-align: center;
  }
  
  .renovation-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .renovation-subtitle {
    color: cadetblue;
  }
  
  .renovation-text {
    margin-top: 15px;
    font-size: 1.1rem;
    line-height: 1.6;
  }
  


/* Package Section */
.package-section {
    margin-top: 50px;
  }
  
  .package-title {
    color: coral;
    text-align: center;
  }
  
  .package-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 30px;
  }
  
  .package-col {
    flex: 1;
    padding: 0 20px;
  }
  
  .package-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .package-text {
    font-size: 1.5em;
    text-align: justify;
    line-height: 1.6;
  }
  
  .package-price-box {
    text-align: center;
    margin-top: 50px;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    width: fit-content;
    margin: 0 auto;
  }
  
  .package-price {
    margin: 0;
  }
  
  .package-price-title {
    font-size: 1.5em;
    color: cadetblue;
  }
  
  .package-price-item {
    font-size: 1.2em;
    margin: 10px 0;
  }
  
  /* Horizontal Line */
  hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 20px 0;
  }

  
  .square {
    background-color: #f0f0f0; /* Background color for the square */
    padding: 20px; /* Padding for the square */
    border-radius: 10px; /* Border radius to make it rounded */
    text-align: center; /* Center the content */
    margin-bottom: 20px; /* Add some space between squares */
  }
  
  .square-title {
    font-size: 1.2em;
    color: coral;
  }
  
  .square-text {
    font-size: 1em;
    color: #333;
  }
  
  .square-content {
    font-size: 0.9em;
    color: #666;
  }
  
  .btn-quote {
    padding: 10px 20px;
    background-color: coral;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  
  .btn-quote:hover {
    background-color: #ff704d; /* Darken the color on hover */
  }
  
  /* Adjustments for package-section */
  .package-section {
    margin-top: 50px;
  }
  
  .package-title {
    color: coral;
    text-align: center;
  }
  
  .package-row {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 30px;
  }
  
  .package-col {
    flex: 1;
    padding: 0 20px;
  }
  
  .package-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  
  .package-text {
    font-size: 1.5em;
    text-align: justify;
    line-height: 1.6;
  }
  
  .package-price-box {
    text-align: center;
    margin-top: 50px;
    background-color: #f0f0f0; /* Background color for the square box */
    padding: 20px; /* Padding for the square box */
    border-radius: 10px; /* Border radius to make it rounded */
    width: fit-content; /* Adjust the width to fit the content */
    margin: 0 auto; /* Center the square box horizontally */
  }
  
  .package-price {
    margin: 0;
  }
  
  .package-price-title {
    font-size: 1.5em;
    color: cadetblue;
  }
  
  .package-price-item {
    font-size: 1.2em;
    margin: 10px 0;
  }
  
  /* Horizontal Line */
  hr {
    border: 0;
    border-top: 1px solid #ccc;
    margin: 20px 0;
  }
  
  .square-container {
    display: flex;
    justify-content: space-around; /* Adjust as needed */
    align-items: center; /* Align vertically */
    margin-top: 30px; /* Adjust margin as needed */
  }
  
  /* Individual Square */
  .square {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    /* Optionally, you can set a minimum width and height */
    min-width: 150px;
    min-height: 100px;
  }
  
  .square-title {
    color: cadetblue;
    font-size: 1.5em;
  }
  
  .square-text {
    font-size: 1.2em;
  }
  
  .square-content {
    font-size: 1em;
    margin-top: 10px;
  }
  
  .btn-quote {
    padding: 5px 15px;
    background-color: coral;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .btn-quote:hover {
    background-color: darkorange;
  } 
  





/* faq */
.faq {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}
.faq-title {
  color: coral;
  text-align: center;
   font-size: 4em;
}
/* Style for question */
.question {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  margin: 0;
  font-size: 1.2em;
}

/* Style for answer */
.answer {
  display: none;
  font-size: 1.4em;
  line-height: 1.5;
  padding: 10px 0;
  margin: 0;
  margin-top: 5px; /* Add margin to separate answers */
}
.rotate {
  transform: rotate(180deg);
  transition: transform 0.3s ease; /* Smooth transition */
}
.arrow {
  cursor: pointer;
  transition: transform 0.3s ease;
}



/* @keyframes fade{
    from{
        opacity: 0;
        transform: translateY(-10px);
    }
    to{
        opacity: 1;
        transform: translateY(0px);
    }
} */






/* reviews */


.x-container {
  width: 100%;
  height: 100vh;
  color: white;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background-color: #090921;
}

h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.description {
  text-align: center;
  width: 43%;
}

.z-clientImage {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: white;
}

.z-clientImage span {
  margin-left: 10px;
}

.z-clientImage img {
  width: 40px;
}
.z-clientImage ul {
  display: flex;
  list-style: none;
  margin-left: 10px; /* Adjust as needed */
}

.z-clientImage ul li {
  padding-left: 4px;
}

.z-clientImage ul li i {
  color: yellow;
  font-size: 1.2em;
}
.z-reviewSection {
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.z-reviewItem {
  width: 300px;
  padding: 10px;
  margin: 1rem;
  cursor: pointer;
  border-radius: 10px;
  background-color: #10102a;
  border: 1px solid #10102a;
  transition: all .2s linear;
}

.z-reviewItem:hover {
  border-color: aqua;
  transform: scale(1.01);
  background-color: #090921;
  box-shadow: 0 0px 5px 0px #cbc0c0;
}

.z-top {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.z-top ul {
  display: flex;
  list-style: none;
}

.z-top ul li {
  padding-left: 4px;
}

article p {
  margin-top: 15px;
  font-size: 13px;
  line-height: 1.5;
  /* font-weight: 100; */
  margin-bottom: 1rem;
  font-family: system-ui;
}


@media screen and (max-width:700px) {
  .x-container {
      height: auto;
  }

  .description {
      width: 90%;
  }
}

@media screen and (max-width:375px) {
  .z-reviewSection {
      padding: 0;
  }

  .z-reviewItem {
      width: 100%;
  }

  .z-clientImage {
      margin-bottom: 0.6rem;
  }

  .z-top {
      align-items: center;
      flex-direction: column;
      justify-content: center;
  }
}





/* contact */

.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    background-color: #f2f2f2;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  
  .contact-container h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
  
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  
  .form-group input,
  .form-group select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .radio-group {
    display: flex;
    flex-direction: column;
  }
  
  .radio-group label {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  .radio-group input[type="radio"] {
    margin-right: 0.5rem;
  }
  
  .form-group button[type="submit"] {
    background-color: coral ;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: block;
    margin: 0 auto;
  }
  
  .form-group button[type="submit"]:hover {
    background-color: rgb(244, 102, 51);
  }
  
  .checkbox-group {
    display: flex;
  }
  
  .checkbox-group label {
    margin-right: 1rem;
  }
  
  .checkbox-group input[type="checkbox"] {
    margin-right: 0.5rem;
  }



/* footer */


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.custom-footer {
    background-color: #f8f9fa;
    padding: 50px 0;
    text-align: center;
}

.footer-container {
    width: 100%;
    margin: 0 auto;
}

.footer-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.footer-title {
    width: 100%;
}

.footer-title h1 {
    font-size: 2rem;
    margin-top: 0;
}

.col-md-6 {
    flex: 1;
    margin: 0 10px;
}

/* .footer-square {
    background-color: coral;
    border: 1px solid coral;
    padding: 20px;
    border-radius: 5px;
    color: white;
} */

.footer-square p {
    margin-bottom: 10px;
}

.footer-button {
    background-color: black;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
}

.footer-button:hover {
    background-color: #141515;
}

.footer-contact-info {
    text-align: left;
}

.footer-info-item {
    display: flex;
    align-items: center;
    font-size: 1.1em;
}

.footer-info-item i {
    margin-right: 10px;
}

.footer-info {
    margin: 10px 0;
}

.footer-gap {
    height: 20px;
}

.footer-gap {
    height: 20px;
}

.footer-info-section {
    background-color: sandybrown; /* Example background color */
    color: #fff; /* Example text color */
    padding: 20px; /* Add padding to create space around the content */
}

.footer-info-section .footer-info p {
    margin-bottom: 10px; /* Add margin between paragraphs */
}
.custom-footer {
    background-color: #333; /* Example background color */
    color: #fff; /* Example text color */
}

.footer-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px; /* Add padding to create space around the content */
}

.footer-info-section .footer-info p {
    margin-bottom: 10px; /* Add margin between paragraphs */
}







/* media queries */
@media (max-width: 1200px) {
    .header {
        padding: 1.5rem 2rem;
    }
    section {
        padding: 3rem 5%;
    }
}

@media (max-width: 990px) {
    html {
        font-size: 55%;
    }
    section {
        padding: 3rem 2rem;
    }
    .header {
        #menu-btn {
            display: inline-block;
        }

        .navbar {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: var(--white);
            border-top: var(--border);
            border-bottom: var(--border);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
            transition: .2s linear;

            &.active {
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            }

            a {
                display: block;
                margin: 2rem;
            }
        }
    }
}

@media (max-width: 750px) {
    .header {
        .search-form {
            width: 90%;
        }
    }
    .faq-title {
        text-align: center;}
    .home .slide {
        justify-content: center;

        .content {
            text-align: center;

            h3 {
                font-size: 3rem;
            }
        }
    }
}
@media (max-width: 600px) {
    .package-text {
        font-size: 1.2em;
    }
    .package-img {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 450px) {
    html {
        font-size: 50%;
    }
}