/* sashless kitset css */

/* Flash effect */
@keyframes flash {
0% {
    background-color: rgba(200, 200, 200, 0.5); /* Example flash color */
}
50% {
    background-color: rgba(200, 200, 200, 0.5); /* Keep the color for half the time */
}
100% {
    background-color: transparent; /* Reset back to original */
}
}

.kitset-profile img {
    width: 100%;
}

.flash {
animation: flash 0.75s ease-in-out;
}

.kitset-wrapper {
max-width: 1760px;
margin: 0 auto;
width: 100%;
overflow: hidden;
}

.kitset-section-heading{
width: 100%;
height: auto;
padding: 40px 60px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start; /* Align the content to the top left */
box-sizing: border-box; /* Include padding in the width/height calculation */
transition: background-color 0.75s ease;
font-weight:500;
font-size:2em;
}

.kitset-section heading{
font-weight:500;
font-size:1.5em;
}

.sashless-ad {
width: 100%;
max-width: 2160px;
margin: 0 auto;
background-image: url('../images/sashless-ad.webp');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
height: 400px;
text-align: center;
box-sizing: border-box;
color: #fff;
}

.sashless-ad-content {
background-color: rgba(0, 0, 0, 0.4); /* Slightly dark background for readability */
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.sashless-ad-content p {
font-size: 1.5em;
font-family: 'Poppins', sans-serif;
margin-bottom: 15px;
}

.sashless-ad-content button {
background-color: #475467;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 1em;
font-family: 'Poppins', sans-serif;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds drop shadow */
}

.sashless-ad-content button:hover {
background-color: #374150;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Intensifies shadow on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
.sashless-ad-content p {
    font-size: 1.2em;
}

.sashless-ad-content button {
    padding: 8px 16px;
    font-size: 0.9em;
}
}

/* Base overlay styles */
.overlay {
display: flex;
width: 100%;
height: 75px; 
z-index: 10;
background-color: #171717;
transition: top 0.3s ease, position 0.3s ease;
}

.overlay.sticky {
position: fixed; /* When it becomes sticky */
top: 72px;
}

/* Individual parts inside the overlay */
.overlay-part {
width: 20%;
height: auto;
background-color: rgba(255, 255, 255, 0.3); /* Light overlay color */
display: flex;
align-items: center;
justify-content: center;
padding: 5px 20px;
position: relative;
transition: background-color 0.25s ease-in-out;
}

.overlay-heading {
margin: 0;
font-size: 1.2rem;
color: #ffffff;
width: 100%;
font-weight: 400;
}

.overlay-part:hover {
background-color: rgba(169, 169, 169, 0.7);
}

.kitset-heading{
width: 100%;
height: auto;
padding: 60px 60px 0 60px;
font-weight: 500; 
font-size: 2em;
display: flex; 
justify-content: center; 
flex-direction: column;
align-items: center;
box-sizing: border-box;
text-align: center;
transition: background-color 0.75s ease;
}

.contact_footer {
/*   background-color: rgba(169, 169, 169, 0.3); */
position: relative;
}

.kitset_footer {
background-color: transparent;
}


.kitset-container {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}

.kitset-image {
width: 100%;
max-width: 2160px;
height: auto;
max-height: 100vh;
object-fit: cover;
position: relative;
}

.kitset-static-image {
width: 100%;
}

.kitset-phone-heading{
display:none;
}

.kitset-phone-hero{
display:none;
}

.kitset-section {
width: 100%;
height: auto;
padding: 60px;
display: flex;
flex-direction: column;
/*   align-items: flex-start; */
justify-content: flex-start;
box-sizing: border-box;
gap:20px;
transition: background-color 0.75s ease;
}

.kitset-section h2 {
margin: 0;
font-size: 2rem;
color: #333;
font-weight: 500;
font-size: 1.5em;
}

.kitset-content-wrap{
display:flex;
flex-direction:row;
gap:40px;
align-items: center;
justify-content: center;
}

.kitset-paragraph{
width:50%;
display: flex;
flex-direction: column;
text-align: left;
gap:20px;
}

.kitset-table-container {
flex-flow: column;
width: 100%;
max-width: 100rem;
margin-left: auto;
margin-right: auto;
display: block;
padding:40px 60px 80px 60px;
box-sizing: border-box;
}

.kitset-table-container-smaller {
flex-flow: column;
width: 100%;
max-width: 80rem;
margin-left: auto;
margin-right: auto;
display: block;
padding:40px 60px 80px 60px;
box-sizing: border-box;
}

.kitset-table-container .max-1200-hero, .kitset-table-container-smaller .max-1200-hero{
font-size:.8em;
}

.kitset-image-container {
width: 450px;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
margin-top:20px;
}

.kitset-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}

.kitset-featured{
width:100%;
height:auto;
align-items: center;
justify-content: center;
display:flex;
flex-direction: column;
padding: 40px 60px 40px 60px;
color:#333;
gap:40px;
box-sizing: border-box;
}

.kitset-featured-wrap{
display:flex;
flex-direction:row;
gap:40px;
justify-content: center;
align-items: center;
width:100%;
}

.kitset-image-container-wrap{
display:flex;
flex-direction:column;
gap:20px;
}

.kitset-featured-product{
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: center;
    max-width: 500px;
    height: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 40px;
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 15px;
}

.kitset-featured-product h2{
font-weight:500;
font-size:1.5em;
margin:0;
}

.kitset-featured-product-image{
width:100%;
height:100%;
max-height:420px;
}


.kitset-featured-heading{
font-weight:500;
font-size:2em;
align-items: center;
justify-content: center;
text-align: center;
}

.hero-kitset-section {
width: 100%;
height: auto; /* initally 100vh */
/*   background-color: #171717; */
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
/* padding: 20px 60px; */
box-sizing: border-box;
}

/* .hero-box{
border:#333 1px solid;
display: block;
padding:20px;
} */

.hero-box {
    /* Existing styles */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    font-family: 'Poppins', sans-serif;
    height: 100%;
    width: 100%;
    max-width:2160px;
    padding: 40px;
    transform: scale(0.9);
    opacity: 0;
    color:#333;
    transition: transform 0.6s ease, opacity 0.6s ease;
    background-color: #fdfdfd;
    box-sizing: border-box;
    /* background-image: url(../images/sashless-ad.webp); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative; /* Required for the overlay */
    overflow: hidden; /* Ensures the overlay stays within the container */
}

.hero-box-content{
    width:50%;
    text-align: center;
    align-items: center;
    justify-content: center;
    display:flex;
    flex-direction: column;
}

.hero-box-content img{
    max-width:600px;
}

.hero-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

  .hero-box * {
    position: relative;
    z-index: 2;
}

.hero-box.animate { 
transform: scale(1); /* Scale up to normal size */
opacity: 1; /* Fade in */
}

.hero-box h3{
    font-size:1.5em;
    font-family:'Poppins', sans-serif;
    font-weight:500;
    margin:0;
}

.hero-box button {
    padding: 15px 25px; /* Adjusted padding for a balanced look */
    font-size: 1em; /* Consistent font size */
    background-color: #475467; /* Dark background color */
    color: #fdfdfd; /* Light text color */
    border: none; /* Removes default border */
    border-radius: 8px; /* Soft rounded corners */
    width: 280px; /* Slightly narrower width for a balanced look */
    margin-top: 20px;
    cursor: pointer; /* Pointer cursor for better UX */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15); /* Subtle drop shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
    font-family: 'Poppins', sans-serif;
}

 /* Hover effect for a more interactive feel */
.hero-box button:hover {
    transform: translateY(-2px); /* Lifts the button slightly */
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
    background-color: #394553; /* Slightly darker background on hover */
}

.hero-box p{
    max-width:1000px;
}

.sash-system{
height:400px;
width:400px;
transform: scale(0.9); /* Start slightly smaller */
opacity: 0; /* Start invisible */
transition: transform 0.6s ease, opacity 0.6s ease;
}

.sash-system.animate { 
transform: scale(1); /* Scale up to normal size */
opacity: 1; /* Fade in */
}

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

.kitset-logo{
/* padding-top:40px; */
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
/* padding-right:80px; */
z-index: 1; /* Ensure the image is on top */
}

.kitset-logo img{
    max-height:48px;
    left:-9px;
    position: relative;
}

.kitset-title{
    width:100%;
}

.hero-kitset-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal-width columns */
    grid-template-rows: auto; /* Single row */
    grid-template-areas: 
        "left right"; /* Two columns in one row */
    width: 100%;
    box-sizing: border-box;
    padding: 80px 60px 40px 60px;
    gap: 2rem;
}

.header {
    grid-area: header; /* Spans across two columns */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.left {
    grid-area: left;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}

.right {
    grid-area: right;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    flex-direction: column;
}

.slider {
    width: 100%;
    max-width: 600px;
    height: 600px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: calc(100% * 7); /* Adjust for 7 images (5 original + 2 duplicates) */
    transform: translateX(-100%); /* Start with the first real image */
}

.slides img {
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 600px;
    object-fit: contain;
}

.hero-header{
    width:100%;
    align-items: stretch;
    background-color: rgba(200, 200, 200, 0.5);
    box-sizing: border-box;
    padding: 20px;
    border-radius: 20px;
}

.hero-logo-top img {
    max-height: 50px; /* Restricts the height */
    width: auto; /* Maintains the aspect ratio */
    object-fit: contain; /* Prevents image distortion */
}

.logo-title {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Align content to the left */
    justify-content: center; /* Align content at the top of the container */
    width: 100%;
    box-sizing: border-box;
    padding: 40px; /* Adds padding around the content */
}

.logo-title-2 {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Align content to the left */
    justify-content: center; /* Align content at the top of the container */
    width: 100%;
    box-sizing: border-box;
    padding: 40px; /* Adds padding around the content */
}

.hero-logo {
    margin-bottom: 20px; /* Adds spacing below the logo title */
}

.logo-title div{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap:10px;
}

.hero-logo {
display: flex;
justify-content: flex-start; /* Aligns the logo to the left */
align-items: center;
margin-bottom: 0px;
text-align: center;
}

.hero-logo-top {
    width: 100%; /* Ensures it spans the full width of the parent container */
    display: flex;
    justify-content: flex-start; /* Aligns the logo to the left */
    align-items: center;
    margin-bottom: 20px; /* Adds spacing below the logo */
}


.hero-kitset-3 .banner-ad{
    width:100%;
}

.hero-kitset-content-wrap{
    padding:20px 60px;
    display:flex;
    width:100%;
    box-sizing: border-box;
    height: 100vh;
}

.hero-box-wrap{
    padding:60px;
    display:flex;
    width:100%;
    box-sizing: border-box;
}


.button-wrap-kitset{
display:flex;
box-sizing: border-box;
width: 100%;
font-family: 'Poppins', sans-serif;
align-items: center;
justify-content: center;
}

.hero-kitset-single{
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap:10px;
width:100%;
}

.hero-kitset-2{
display:flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
gap:10px;
width:50%;
}

.hero-kitset-2 h1{
    width:100%;
}

.hero-kitset-3{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap:10px;
    width:50%;
}

.hero-kitset-content h1 {
font-size: 2em;
margin: 0px;
font-weight:500;
}

.hero-kitset-content h3 {
font-size: 1.25em;
margin: 0 0 10px;
font-weight:500;
}

.hero-kitset-content p {
font-size: 1rem;
/* margin-bottom: 25px; */
max-width:900px;
}

.center-paragraph{
    text-align: center;
}

.logo-title-2 .center{
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.hero-kitset-content button {
background-color: #475467;
color: #ffffff;
padding: 15px 40px;
border: none;
cursor: pointer;
font-size: 1.5rem;
border-radius: 5px;
transition: background-color 0.3s ease;
width: auto;
font-family: 'Poppins', sans-serif;
font-size:1.15em;
}

.hero-kitset-content button:hover {
background-color: #374150;
}

.sashless-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    height: 900px;
    /* left:-136px; */
}

.frame {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
opacity: 0;
object-fit: cover;
}

/* Keyframes for smooth transition between two frames */
@keyframes seamlessTransition {
0%, 45% { 
    opacity: 1; /* Frame is fully visible */
}
50%, 95% {
    opacity: 0; /* Frame fades out, allowing the other frame to appear */
}
100% {
    opacity: 1; /* Restart cycle */
}
}

/* Apply animations for each frame with delays for a seamless effect */
.frame1 {
animation: seamlessTransition 6s infinite;
}

.frame2 {
animation: seamlessTransition 6s infinite;
animation-delay: 3s; /* Frame 2 appears halfway through the cycle */
}


@media screen and (max-width: 1200px){
.kitset-table-container{
    max-width:1000px;
}
.overlay{
    height: 50px; 
}
.overlay-heading{
    font-size:1em;
}
.kitset-image-container{
    width:600px;
    height:auto;
}
.kitset-paragraph{
    font-size: 0.8em;
}
.kitset-featured-product{
    width:50%;
}
.kitset-table-container-smaller{
    padding:0;
}
.kitset-table-container .max-1200-tablet, .kitset-table-container-smaller .max-1200-tablet{
    font-size:1em;
}
.kitset-paragraph{
    width:100%;
    text-align: center;
}
.kitset-featured{
    height:auto;
}
.hero-kitset-content {
    display: flex;
    flex-direction: column;
    padding:0;
}
.hero-kitset-content-wrap{
    height:auto;
    padding-top:40px;
}
.sashless-frame{
    height:600px;
    width: 600px;
}
.first .right{
    order:-1;
}
.logo-title, .logo-title-2{
    padding:0;
}
.logo-title div{
    align-items: center;
    justify-content: center;
    text-align: center;
}
}

@media screen and (max-width:1000px){
    .kitset-profile {
        display: none;
    }
}

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

.hero-logo, .hero-logo-top, .hero-logo-top img{
    width:100%;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hero-kitset-content h1{
    width:100%;
}
.hero-kitset-content p{
    text-align: center;
}
.logo-title{
    padding:0;
    align-items: center;
    justify-content: center;
}
.kitset-content-wrap{
flex-direction: column;
gap:40px;
}
.kitset-featured-wrap{
flex-direction:column;
width:100%;
}
.kitset-featured-product{
width:100%;
max-width:500px;
}
.hero-kitset-section {
height:auto;
/* padding:20px 60px; */
/* min-height:1080px; */
justify-content: flex-start;
padding-bottom:60px;
}
.top-logo{
max-height:15vh;
}
.sash-system{
height:100%;
width:100%;
max-width:400px;
}
}

@media screen and (max-width:642px){
.overlay-heading{
    display:none;
}
.kitset-phone-heading{
    display:flex;
    color:white;
    font-weight:400;
    font-size:1em;
    width:100%;
    text-align: center;
}
.kitset-static-image{
    display:none;
}
.hero-kitset-content .full-paragraph{
    display:none;
}
.hero-kitset-content .kitset-phone-hero{
    display:flex;
    padding:0;
}
}

@media screen and (max-width:600px){
.sashless-frame{
    width:400px;
    height:400px;
}
.hero-kitset-content-wrap{
    padding:20px;
}
.hero-kitset-content{
    padding:20px;
}
.kitset-featured{
    height:auto;
    padding:40px;
    gap:40px;
}
.kitset-table-container {
    padding:40px;
}
.hero-kitset-section{
    padding:20px 0;
    height:100%;
    margin-bottom:20px;
}
.hero-kitset-content p{
    font-size:0.8em;
}
.kitset-section{
    padding:40px;
    text-align: center;

}
.kitset-image-container{
    width:auto;
    height:100%;
}
.kitset-paragraph{
    width:100%;
    box-sizing: border-box;
    padding:20px;
}
.kitset-featured-product{
    width:100%;
    padding:20px;
}
.kitset-heading{
    padding:0;
    padding-bottom:20px;
    margin-top:50px;
    text-align: center;
    font-size:1.25em;
}
.kitset-featured-heading, .hero-kitset-content h1{
    font-size:1.25em;
}
.kitset-section h2{
    width:100%;
    font-size:1.25em;
}
.kitset-featured-product p{
    font-size:0.8em;
}
.kitset-featured-product h2{
    font-size: 1.25em;
}
.full-paragraph{
    box-sizing:border-box;
    padding: 0 20px;
}
.hero-box{
    margin:20px;
}
.hero-kitset-content{
    gap:40px;
}
.button-wrap-kitset{
    padding:0 20px;
    margin-top:20px;
}
.hero-kitset-content button{
    font-size:0.8em;
    width:100%;
}
.hero-button{
    width:100%;
    max-width: 350px;
}
.slider{
    height:auto;
}
.top-logo{
    height:100%;
    padding: 20px 0;
}
.kitset-table-container .max-1200-tablet, .kitset-table-container-smaller .max-1200-tablet{
    font-size:0.8em;
}
.sashless-ad-content{
    padding:0 20px;
}
.sashless-ad-content p{
    font-size: 1em;
}
.sashless-ad-content button{
    font-size: .8em;
}
.kitset-content-wrap{
    gap:20px;
}
}

@media screen and (max-width:479px){
.hero-kitset-content button {
    padding: 10px 40px;
    font-size:0.8em;
}
.overlay{
    display:none;
}
.hero-button{
    max-width:250px;
}
.kitset-phone-hero{
    box-sizing:border-box;
    padding: 0;
}
.hero-box .kitset-phone-hero{
    padding:0;
}
.top-logo img {
    max-height: 30px;
}
.hero-kitset-content button{
width: 100%;
}
}

/* sashless kitset css */