/* Sidebar styles */
    /* Sidebar styles */
.product-sidebar {
    display: flex;
    position: relative;
    width: 100%; /* Full width for the entire section */
}

.product-side-navbar {
    height: calc(100vh - 100px - 400px);/* Adjust the height to account for the header (top) and footer (bottom) */
    width: 250px; /* Fixed width for the sidebar */
    position: fixed; /* Positioning the sidebar over the container */
   
    top: 50px; /* Leave space for the header (adjust according to your header height) */
    left: 0;
    margin-bottom: 50px; /* Leave space for the footer */
    color: white;
    margin-top: 60px;
    z-index: 10; /* Ensure the sidebar stays above the container */
  
}

.main-title{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}
.product-side-navbar h3 {
    margin-left: 20px;
}

.product-side-navbar a {
    text-decoration: none;
    font-size: 18px;
    margin-left: 20px;
    display: block;
    margin-bottom: 15px;
    color: #3c3b3a;
    transition: color 0.3s ease;
}

.product-side-navbar a:hover {
    color: #31302f;
}

/* .product-side-navbar a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0px;
    left: 0;
    background-color: #eec762;
    transition: width 0.3s ease;
} */


.product-side-navbar a:hover::after {
    width: 42%;
}

.product-side-navbar a:hover {
   color: #eec762; /* Sidebar text white */
   
}

.product-side-navbar a.current::after {
    width: 42%;
}

.product-side-navbar a.current {
    color: #eec762;
}

/* Container styles */
.product-container-area {
    width: 100%; /* Full width for the content */
    position: relative; /* So that the sidebar overlaps the content */
    z-index: 1; /* Keep the container below the sidebar */
}

.product-wrapper {
    padding: 0px;
}

.product-banner {
    height: 60vh;
    padding: 0px;
    background-color: aliceblue;
    box-sizing: border-box;
    position: relative;
}

/*  ///////////////////////////////////////////  sections of page     ///////////////////////////////////////////////////////// */
.product-about-area {
    padding: 20px; /* Adjust as needed */
    background-image: url(./img/prefa.png);
    background-size: cover;
    box-sizing: border-box;
    position: relative;
    background-color: rgba(117, 190, 218, 0.5); /* Corrected syntax */
    overflow-y: visible; /* Ensure content is visible */
    min-height: 50vh; /* Allow the section to grow with content */
    overflow-block: hidden;
}

.product-portfolio-area{

    min-height: 50vh;
    padding: 0px;
    background-color: #ffffffcc;
    box-sizing: border-box;

}
.product-portfolio-area1{
    min-height: 20vh;
    padding: 0px;
   
    box-sizing: border-box;

    position: relative;
}

.product-portfolio-area2{
    min-height: 30vh;
    padding: 10px;
    background-color: #f9f9f900;
    box-sizing: border-box;
    position: relative;
    
}
 .product-service-area{
    height: 100vh;
    padding: 40px;
    background-color: #f9f9f900;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}

@media (max-width: 768px) {

    .product-service-area{
        height: 80vh;
        padding: 10px;
        background-color: #f9f9f900;
        box-sizing: border-box;
        position: relative;
        text-align: center;
    }
    .product-banner {
        height: 170vh;
        padding: 0px;
     background-color: aliceblue;
        box-sizing: border-box;
        position: relative;
    }

    

}
/* strt introduction*/
.product-text-content {
    padding: 0px;
    border-radius: 0px;
    padding-left:280px;
    min-height: 25vh
}

.product-text-content-intro{
    display: flex;
    flex-direction: row;
flex-wrap: nowrap;
    height: 60vh;
    padding: 0px;

}

.product-text-content-intro .intro1 img{
    height: 60vh;
    width: 100%;
    padding: 0px;
}
.product-text-content-intro .intro2{
    width:80%;
    padding: 10px;
}

.product-text-content-intro .intro2 h2{
    text-align: center;
    padding: 10px;
}
.product-text-content-intro .intro2 p{
    text-align: center;
    padding: 40px;
}
@media (min-width: 750px) and (max-width: 1300px) {
    .product-text-content-intro .intro2 p {
        text-align: center;
        padding: 10px;
        font-size: 15px;
    }
}

/* start benifits*/

.product-text-content-benefits{
    display: flex;
    flex-direction: row;
flex-wrap: nowrap;
    min-height: 50vh;
    padding: 60px;
    gap: 40px;
}

.highlights{

    text-align: center;
 

   
}
.highlights h2{

    text-align: start;
 

   
}
@media (max-width: 767px)  {
    .highlights h2{

        text-align: center;
     
    
       
    }
}


/* ////////////////////  for compatibility //////////////////////////*/
/* Media query for small devices */


@media (max-width: 768px) {

    .product-text-content-benefits {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        min-height: 100vh;
        padding: 0px;
        gap: 20px;
    }
    .highlights{
        width: 100%;
        text-align: center;
     
    
       
    }
    .benefits{
        width: 100%;
        text-align: center;
        
    }
    .product-banner {
        height: 120vh;
        padding: 0px;
        background-color: aliceblue;
        box-sizing: border-box;
        position: relative;
    }

    .product-portfolio-area2{
        height: 70vh;
        padding: 10px;
        background-color: #f9f9f900;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
    }
}
 

@media (max-width: 768px) {
    .product-text-content-intro {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: 60vh;
        padding: 0px;
    }
    .product-text-content-intro .intro2{
        width:100%;
        padding: 10px;
    }
}

/* Media query for very small devices (like mobile phones) */
@media (max-width: 480px) {
   
    .product-text-content-intro {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        height: 180vh;
        padding: 0px;
    }
    .product-text-content-intro .intro2{
        width:100%;
        padding: 10px;
    }

    .product-text-content-intro .intro2 p{
        text-align: center;
        padding: 0px;
    }
    .product-banner {
        min-height: 100vh;
        padding: 0px;
     background-color: aliceblue;
        box-sizing: border-box;
        position: relative;
    }
}


/*  highlights  drop down */
.question{
    border-bottom: 1px solid #000000;
    /* width: 80%; */
   
}

.question h4{
    color: #000000;
}
.question button{
    width: 80%;
    background-color: #ffffff00;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0px;
    border:none;
    outline: none;
    font-size: 18px;
    color: #070707;
    font-weight: 600;
    cursor: pointer;
}
.question p{
    font-size: 16px;
    max-height: 0;
    opacity: 0;
    line-height: 1.5;
    text-align: justify;
    color: #000000;
    overflow: hidden;
    transition: all 0.6s ease;
}
.d-arrow{
    transition: transform 0.5s ease-in ;
    color: #100f0f;
}

/*add this class when click*/
.question p.show{
    max-height: 400px; 
    opacity: 1;
    padding:0px 15px 30px 15px;
}
.question button .d-arrow.rotate{
    transform: rotate(180deg);
}


.heading {
    display: flex;
    justify-content: space-between; /* This will place the items at the far ends of the row */
    align-items: center; /* Aligns the items vertically in the middle */
    padding: 20px;
    padding-right: 280px;
    border-bottom: 1px solid #e4e7eb; /* Optional, adds a border below the heading */
    padding-left: 60px;
}

.heading1 h1 {

   
    font-size: 50px;
    color: #080808; /* Customize color as needed */
    margin: 0;
}

.heading2 h4 {
    font-size: 24px;
    color: #0f0e0e; /* Customize color as needed */
    margin: 0;
}

/* Responsive for smaller screens */
@media (max-width: 768px) {
    .heading {
        flex-direction: column; /* Stack .heading1 and .heading2 vertically */
        text-align: center; /* Center-align text when stacked */
        padding-right: 0;
        padding-left: 0;
        width: 100%; /* Ensure full width on small screens */
    }

    .heading1 h1 {
        font-size: 36px; /* Decrease font size for smaller screens */
    }

    .heading2 h4 {
        font-size: 18px; /* Smaller font for h4 on small screens */
        margin-top: 10px; /* Add some space between h1 and h4 */
    }
   
}

/* Responsive for very small screens (mobile devices) */
@media (max-width: 480px) {
    .heading {
        padding: 10px; /* Reduce padding for very small screens */
    }

    .heading1 h1 {
        font-size: 28px; /* Further reduce h1 size for mobile */
    }

    .heading2 h4 {
        font-size: 16px; /* Smaller h4 size on mobile */
    }
}
/* .benefits{
    width: 40%;
    text-align: center;
} */
.product-button-container {
    margin-top: 20px;
}

.product-action-btn {
    background-color: #e67e22; 
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    transition: background-color 0.3s ease;

}

.product-action-btn:hover {
    background-color: #d35400;
}

.product-action-btn a {
    color: #fff;
    text-decoration: none;
}

/* Responsive styles */
@media only screen and (max-width: 990px) {
    .product-container-area {
        width: 100%; /* Full width for the content on small screens */
    }

    .product-side-navbar {
        display: none; /* Hide the sidebar on small screens */
    }

    .product-text-content {
        padding: 10px;
    }
    .product-side-navbar {
    height: calc(100vh - 100px - 500px);/* Adjust the height to account for the header (top) and footer (bottom) */
    width: 250px; /* Fixed width for the sidebar */
    position: fixed; /* Positioning the sidebar over the container */
    top: 50px; /* Leave space for the header (adjust according to your header height) */
    left: 0;
    margin-bottom: 50px; /* Leave space for the footer */
    color: white;
    margin-top: 60px;
    z-index: 1000; /* Ensure the sidebar stays above the container */
    background-color: #33333300; /* Optional: Add a background color */
}

}
/*////////////////////////////////////////////////////// third section components /////////////////////////////////////////////////////////*/


.product-text-content-component{
    height: 60vh;
    padding: 5px;

}
.product-text-content-component img{
    height:100%;
}

@media only screen and (max-width: 760px) {

    .product-text-content-component img{
        height:80%;
    }
}

/*////////////////////////////////////////////////////// fouth section /////////////////////////////////////////////////////////*/

.product-text-content-module{
    padding: 10px;
    text-align: center;
    padding-left: 40px;
    padding-right: 40px;
    min-height: 40vh;
}
.product-text-content-module h3{
 font-size: 30px;

}
.product-text-content-module p{
    font-size: 17px;
   }
.product-text-content-module1{
    display: flex;
    flex-direction: row;
flex-wrap: nowrap;
   
    padding: 0px;
}
.product-text-content-module1 h4{
   text-align: start;
}
@media (max-width: 768px) {


    .product-text-content-module1{
        display: flex;
        flex-direction: column;
    flex-wrap: nowrap;
       
        padding: 0px;
    }

    .product-text-content-module1 .module3{
        min-width: 100%;
    }

}

@media (max-width: 480px) {

    .product-text-content-module1 .module3{

       min-width: 100%;
    }


}




.product-text-content-module1 .module2{
width: 50%;
padding: 20px;
min-height: auto;

}
.product-text-content-module1 .module3{
    width: 40%;
}
.product-text-content-module1 .module3 img{
    height: auto;
    width: 100%;
    padding: 10px;
}

.question1{
    border-bottom: 1px solid #000000;
    width: 60%;
    text-align: start;align-items:flex-start ;
}

.question1 h4{
    color: #000000;
}
.question1 button{
    width: 98%;
    background-color: #ffffff00;
    display: flex;
    justify-content:left;   
    gap: 20px;
    align-items: center;
    padding: 10px 0px;
    border:none;
    outline: none;
    font-size: 18px;
    color: #070707;
    font-weight: 600;
    cursor: pointer;
}
.question1 p{
    font-size: 16px;
    max-height: 0;
    opacity: 0;
     text-align: start;
    line-height: 1.5;
    overflow: hidden;
    transition: all 0.6s ease;
}
.d-arrow{
    transition: transform 0.5s ease-in ;
    color: #100f0f;
}

/*add this class when click*/
.question1 p.show{
   max-height: 400px;
    opacity: 1;
    padding:0px 15px 30px 15px;
}
.question1 button .d-arrow.rotate{
    transform: rotate(180deg);
}

@media (max-width: 768px) {

    .question1 p.show{
        max-height: 400px;
        width: 100%;
        
    }
    .question1{
        border-bottom: 1px solid #000000;
        width: 100%;
        text-align: start;align-items:flex-start ;
        
    }

    .product-text-content-module1 .module2{
        width: 100%;
        padding: 10px;
        min-height: 60vh;
        
        }
}
/*  ////////////////////////////////////// section five  //////////////////////////////////////////////////////////////*/


.product-portfolio-area1{

    text-align:left; 
    padding-top: 0px;
    padding-left: 220px;
    position: relative;
    
   
}
@media (max-width: 900px) {


    .product-portfolio-area1{

        text-align:left;
        padding-top: 0px;
        padding-left: 0px;
        position: relative;
        
       
    }
    
}
.product-portfolio-area1 h3{
    font-size: 50px;
    padding-left: 240px;
}

.product-portfolio-area1 .faq p{
    font-size: 30px;
    text-align: start;
}
@media (max-width: 768px) {

    .product-portfolio-area1{

        text-align:center;
        padding-top: 60px;
        padding-left: 0px;
        background-color: #adbbda29;
    }
    .product-portfolio-area1 h3{
        font-size: 50px;
        padding-left: 0px;
    }
    
    .product-portfolio-area1 .faq p{
        font-size: 20px;
        text-align: center;
    }

}

/*//////////////////////////////    section six                //////////////////////////////////////////////////////////////////*/



/* Container for the images */
.product-text-content-images {
    display: flex;
    flex-wrap: wrap; /* Allows the images to wrap onto the next line */
    justify-content: space-between; /* Adds space between the images */
    min-height: 20vh; 
}
.product-text-content-images .image2{
    width: 40%; /* Adjust width to fit two images in a row with space in between */
    margin-bottom: 20px; 
    align-content: center;

}

.product-text-content-images .image2 h3{
    border-radius: 40px;
    background: #514f4f;
    
   color: white;
   padding: 10px; 
   

  
}
.product-text-content-images .image2 h3:hover{
    background-color: #daad60;
}

@media (max-width: 768px) {


    .product-text-content-images {
        display: flex;
        flex-direction: column;

        flex-wrap: nowrap; /* Allows the images to wrap onto the next line */
        justify-content: space-between; /* Adds space between the images */ 
        margin-bottom: 10px;
        height: 60vh;
    }

/* Each image wrapper */
.product-text-content-images .image1 {
    min-width: 100%; /* Adjust width to fit two images in a row with space in between */
    margin-bottom: 20px; /* Optional: Adds some space below each image */
    height: 60vh;
}
.product-text-content-images .image2{
    width: 100%; /* Adjust width to fit two images in a row with space in between */
    margin-bottom: 20px; /* Optional: Adds some space below each image */
    align-content: center;

}

.product-text-content-images .image2 h3{
    border-radius: 40px;
    background: #514f4f;
    color: white;
}

}
/* Each image wrapper */
.product-text-content-images .image1 {
    width: 48%; /* Adjust width to fit two images in a row with space in between */
    margin-bottom: 20px; /* Optional: Adds some space below each image */
}

/* Image styling */
.product-text-content-images .image1 img {
    width: 100%; /* Make sure each image takes up the full width of its container */
    height: auto; /* Maintain aspect ratio */
    display: block;
}




/* ////////////////////////////////////First section with parallax background ///////////////////////////////// */
.first-section {
    height: 80vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
}

.first-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for contrast */
    z-index: 0;
}
/* Hide overflow in the last section */
.last-section {
    height: 80vh;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden; /* Ensure that any overflow content is hidden */
    z-index: 1;
}

/* Hidden state for the sidebar */
.product-side-navbar.hidden {
    opacity: 0; /* Hide with transparency */
    visibility: hidden; /* Fully hide it */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.title {
    z-index: 1;
    color: #fff;
    font-size: 3rem;
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .title {
        font-size: 2rem;
    }
    .last-section {
        height: 80vh;
        width: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-attachment:fixed;
        display: flex;
        flex-direction: column;
        /* margin-top: -20px; */
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        overflow: hidden; /* Ensure that any overflow content is hidden */
        z-index: 1;
    }

    .title {
        z-index: 1;
        color: #fff;
        font-size: 2rem;
        font-weight: bold;
        text-transform: uppercase;
    }
    
}