#root main{width:100%;height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center}@media screen and (max-width: 768px){#root main{padding-top:100px}}#root main .slider{position:relative;max-width:100%;overflow:hidden}#root main .slider .sliderInfo{width:100%;height:100%;position:absolute;display:flex;z-index:10;justify-content:space-between;align-items:center;flex-direction:column;padding:80px 20px}#root main .slider .sliderInfo .title{color:rgba(255,255,255,.45);font-family:Kanit;font-size:100px;font-weight:400;line-height:150px;letter-spacing:0%;text-align:center}@media screen and (max-width: 768px){#root main .slider .sliderInfo .title{font-size:70px;line-height:70px}}#root main .slider .sliderInfo .call-a-measurer{padding:16px 40px;background-color:#a967d5;border:none;border-radius:6px}#root main .slider .sliderInfo .call-a-measurer a{font-size:22px;line-height:36px;color:#212020}#root main .slider .slides{display:flex;transition:transform .5s ease-in-out}#root main .slider .slides .slide{min-width:100%;min-height:100vh}#root main .slider .slides .slide img{width:100%;height:100%;display:block;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}#root main .slider .prev{position:absolute;transform:translate(-50%);width:28px;height:22px;top:50%;left:100px;background-color:rgba(0,0,0,0);border:none;cursor:pointer;color:#fff;z-index:20}@media screen and (max-width: 768px){#root main .slider .prev{left:40px}}#root main .slider .next{position:absolute;top:50%;transform:translate(-50%);right:100px;width:28px;height:22px;background-color:rgba(0,0,0,0);border:none;cursor:pointer;color:#fff;z-index:20}@media screen and (max-width: 768px){#root main .slider .next{right:20px}}#root #stretch-ceiling-benefits{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 20px}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont{width:1100px;display:flex;flex-direction:column;gap:84px;padding:54px 0}@media screen and (max-width: 1200px){#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont{width:100%}}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top{width:100%;display:flex;align-items:center;flex-direction:column;gap:65px}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .title{color:#000;font-family:Kanit;font-size:32px;font-weight:500;line-height:48px;letter-spacing:0%;text-align:center}@media screen and (max-width: 768px){#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .title{font-size:24px;line-height:34px}}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .item-cont{width:100%;display:grid;grid-template-columns:auto auto auto;gap:26px}@media screen and (max-width: 768px){#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .item-cont{grid-template-columns:auto auto}}@media screen and (max-width: 520px){#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .item-cont{grid-template-columns:auto}}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .item-cont .item{padding:26px;display:flex;flex-direction:column;align-items:center;border-radius:3px;box-shadow:2px 2px 20px 3px rgba(168,168,168,.8);background:#fff;min-height:300px}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .item-cont .item .item-title{color:#000;font-family:Kanit;font-size:22px;font-weight:400;line-height:33px;letter-spacing:0%;text-align:center;margin:14px 0}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .item-cont .item p{color:#000;font-family:Hind Siliguri;font-size:16px;font-weight:400;line-height:20px;letter-spacing:0%;text-align:center}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .top .item-cont .item img{height:70px;-o-object-fit:scale-down;object-fit:scale-down}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .down{width:100%;display:flex;align-items:center;flex-direction:column;gap:65px}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .down .title{color:#000;font-family:Kanit;font-size:32px;font-weight:500;line-height:48px;letter-spacing:0%;text-align:center}@media screen and (max-width: 768px){#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .down .title{font-size:24px;line-height:34px}}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .down .item-cont{width:100%;display:flex;gap:62px;flex-wrap:wrap;justify-content:center;align-items:center}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .down .item-cont .item{width:172px;min-height:324px;display:flex;flex-direction:column;align-items:center;align-self:center}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .down .item-cont .item .item-title{color:#000;font-family:Kanit;font-size:22px;font-weight:400;line-height:33px;letter-spacing:0%;text-align:center;margin:10px}#root #stretch-ceiling-benefits .stretch-ceiling-benefits-cont .down .item-cont .item p{color:#000;font-family:Hind Siliguri;font-size:16px;font-weight:400;line-height:20px;letter-spacing:0%;text-align:center}#root .call-a-mauser{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:62px;background:#7ca124;padding:20px}#root .call-a-mauser .form-title{color:#000;font-family:Kanit;font-size:32px;font-weight:500;line-height:48px;letter-spacing:0%;text-align:center}#root .call-a-mauser form{width:940px;display:flex;flex-direction:column;gap:20px}@media screen and (max-width: 1200px){#root .call-a-mauser form{width:100%}}#root .call-a-mauser form .input-cont{display:flex;gap:28px}#root .call-a-mauser form .input-cont input{width:50%;border-radius:3px;background:#f4efef;border:none;padding:10px}#root .call-a-mauser form .input-cont input::-moz-placeholder{font-size:18px;line-height:28px}#root .call-a-mauser form .input-cont input::placeholder{font-size:18px;line-height:28px}#root .call-a-mauser form input{width:100%;border-radius:3px;background:#f4efef;border:none;padding:10px}#root .call-a-mauser form input::-moz-placeholder{font-size:18px;line-height:28px}#root .call-a-mauser form input::placeholder{font-size:18px;line-height:28px}#root .call-a-mauser form textarea{width:100%;border-radius:3px;background:#f4efef;border:none;padding:10px;resize:none}#root .call-a-mauser form textarea::-moz-placeholder{font-size:18px;line-height:28px}#root .call-a-mauser form textarea::placeholder{font-size:18px;line-height:28px}#root .call-a-mauser form .send-cont{display:flex;align-items:center;justify-content:space-between}@media screen and (max-width: 768px){#root .call-a-mauser form .send-cont{flex-direction:column;align-items:start;gap:20px}}#root .call-a-mauser form .send-cont .checkbox-cont{display:flex;align-items:center;gap:20px}#root .call-a-mauser form .send-cont .checkbox-cont input[type=checkbox]{width:26px;height:26px;border:1px solid #f4efef;border-radius:3px;background:#fffcfc}#root .call-a-mauser form .send-cont .checkbox-cont label{color:#000;font-family:Hind Siliguri;font-size:18px;font-weight:400;line-height:29px;letter-spacing:0%;text-align:left}@media screen and (max-width: 768px){#root .call-a-mauser form .send-cont .checkbox-cont label{font-size:12px;line-height:14px}}#root .call-a-mauser form .send-cont button[type=submit]{width:224px;padding:16px 80px;background-color:#a967d5;border:none;cursor:pointer;font-size:22px;line-height:34px;color:#303230}#root #about-us{width:100%;display:flex;justify-content:center;align-items:center;position:relative}#root #about-us .yellowBox{width:240px;height:240px;border-radius:50%;background-color:rgba(255,229,115,.8980392157);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);transition:1s ease-in-out}#root #about-us .yellowBox:hover{width:100%;height:100%;border-radius:0}#root #about-us .about-us-cont{width:1100px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:26px 20px;gap:34px}@media screen and (max-width: 1200px){#root #about-us .about-us-cont{width:100%}}#root #about-us .about-us-cont .title{color:#000;font-family:Kanit;font-size:32px;font-weight:500;line-height:48px;letter-spacing:0%;text-align:center;position:relative;z-index:1}#root #about-us .about-us-cont .aboutMe-text{color:#000;font-family:Hind Siliguri;font-size:22px;font-weight:400;line-height:35px;letter-spacing:0%;text-align:left;position:relative;z-index:1}@media screen and (max-width: 520px){#root #about-us .about-us-cont .aboutMe-text{font-size:18px;line-height:22px}}
/* ==========================================
   COMBINED PREMIUM EFFECTS (FIXED)
   ========================================== */

/* 1. Clear Setup for the Entry Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 2. Apply Fade-In and KEEP Hover Transitions Alive */
.item {
    /* This handles the initial page-load fade-in */
    animation: fadeInUp 0.8s ease-out forwards;
    
    /* CRUCIAL: This prepares the card to smoothly animate when hovered */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}

/* 3. The Zoom-In Effect on Hover (Now fully compatible!) */
.item-cont .item:hover, .down .item:hover {
    transform: translateY(-5px) scale(1.04) !important; /* Lifts up slightly and zooms */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
    cursor: pointer;
}

/* 4. Smooth Slider Architecture (Keeping your working slider settings) */
./* ==========================================
   FIXED SLIDER ARCHITECTURE (PROPER SIZING)
   ========================================== */

.slider {
    position: relative;
    width: 100%;
    height: 75vh; /* This sets the height limit on your screen */
    overflow: hidden; /* Keeps the other 9 images hidden off-screen */
    background-color: #000;
}

.slides {
    display: flex;
    width: 100%; /* Changed from 1000% back to 100% so images stay their normal size */
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1); /* Keeps the smooth slide motion */
}

.slide {
    min-width: 100%; /* Forces each slide to match the exact width of the viewport */
    height: 100%;
    flex-shrink: 0; /* Prevents the browser from squeezing your images horizontally */
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps your stretch ceiling graphics perfectly scaled without distortion */
}

/* 5. Main Action Button Attention-Grabber */
@keyframes callAttention {
    0% { transform: scale(1); }
    5% { transform: scale(1.03) translate(-1px, 1px); }
    10% { transform: scale(1.03) translate(1px, -1px); }
    15% { transform: scale(1.03) translate(-1px, -1px); }
    20% { transform: scale(1.03) translate(1px, 1px); }
    25% { transform: scale(1.03) translate(0, 0); }
    100% { transform: scale(1); }
}

.call-a-measurer {
    animation: callAttention 4s ease-in-out infinite;
}

/* ==========================================
   PREMIUM 3D SHADED BUTTON EFFECT
   ========================================== */

.call-a-measurer {
    position: relative;
    background-color: #f39c12; /* Your primary brand yellow */
    border: none;
    
    /* 1. This creates the 3D 'thickness' at the bottom of the button */
    border-bottom: 5px solid #d35400; 
    
    padding: 14px 28px;
    border-radius: 6px;
    cursor: pointer;
    
    /* 2. Deep, realistic ambient shading + crisp drop shadow */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 
                0 4px 0px #d35400;
                
    /* Smooth transition for hover effects */
    transition: all 0.15s ease;
    
    /* Keeps your attention-grabbing animation running smoothly */
    animation: callAttention 4s ease-in-out infinite;
}

.call-a-measurer a {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* Soft shadow on the text itself */
}

/* 3. Hover State: Slightly deepens the glow and highlight */
.call-a-measurer:hover {
    animation: none; /* Stops the vibration loop so it's clean to click */
    background-color: #f5a623;
    box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4), 
                0 4px 0px #d35400;
    transform: translateY(-2px); /* Slight hover lift */
}

/* 4. Click State: The physical 3D 'Press' mechanics */
.call-a-measurer:active {
    transform: translateY(3px); /* Pushes the button down visually */
    border-bottom: 1px solid #d35400; /* Flattens the bottom border thickness */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 
                0 1px 0px #d35400; /* Flattens the shadow shadow closer to the surface */
}
/* ==========================================
   PREMIUM EFFECTS & 3D BUTTON (RESTORED)
   ========================================== */

/* 1. Page Load Fade-In */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}
.item {
    animation: fadeInUp 0.8s ease-out forwards;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background-color 0.3s ease;
}
.item-cont .item:hover, .down .item:hover {
    transform: translateY(-5px) scale(1.04) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    background-color: #ffffff;
    cursor: pointer;
}

/* 2. Slider Architecture */
.slider {
    position: relative;
    width: 100%;
    height: 75vh;
    overflow: hidden;
    background-color: #000;
}
.slides {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.42, 0, 0.58, 1);
}
.slide {
    min-width: 100%;
    height: 100%;
    flex-shrink: 0;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. 3D Shaded Button */
.call-a-measurer {
    position: relative;
    background-color: #f39c12;
    border: none;
    border-bottom: 5px solid #d35400;
    padding: 14px 28px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 4px 0px #d35400;
    transition: all 0.15s ease;
}
.call-a-measurer:hover {
    background-color: #f5a623;
    box-shadow: 0 8px 20px rgba(243, 156, 18, 0.4), 0 4px 0px #d35400;
    transform: translateY(-2px);
}
.call-a-measurer:active {
    transform: translateY(3px);
    border-bottom: 1px solid #d35400;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), 0 1px 0px #d35400;
}