html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    overflow-x:hidden;
    font-family:Arial,sans-serif;
    color:white;
    background-color:black;
}

body{
    background:
    linear-gradient(
    rgba(0,0,0,0.5),
    rgba(0,0,0,0.7)
    ),
    url("Image/back2-1.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

.logo {
    position: fixed;
    top: 30px;  
    left: 40px; 
    z-index: 1000;
    transition: top 0.4s ease;
}

.logo img {
    width: 80px; 
    height: auto;
}   

.navbar {
    position: fixed;
    top: 40px;
    right: 40px;
    display: flex;
    align-items: center;
    padding: 6px 10px; 
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: top 0.4s ease;
}

.menu {
    display: flex;
    gap: 10px;  
}

.menu a {
    text-decoration: none;
    color: white;
    font-size: 15px;
    padding: 10px 18px;  
    border-radius: 40px;
    position: relative; 
    overflow: hidden;
    transition: all 0.3s ease;
}

.menu a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 40px; 
}

.menu a:hover::before {
    opacity: 0.7; 
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 40px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 10px rgba(255,255,255,0.1);
    z-index: 1000;
}

.menu .active {
    font-size: 15px;
    background: #B0B0B0;
    color: black;
    transform: scale(1.17);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.tint-demo-section {
    width: 100%;
    padding: 100px 20px 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

.tint-demo-title {
    margin: 30px 0 34px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
}

.tint-glass-card {
    width: min(var(--card-width), 92vw);
    height: var(--card-height);
    position: relative;
    overflow: hidden;
    border-radius: var(--card-radius);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.08)),
        rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(255,255,255,0.06);
}

.tint-card-top {
    height: var(--top-bar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.08),
        rgba(255,255,255,0.03)
    );
    border-bottom: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.95);
    font-size: 25px;
    font-weight: 150;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.15);
}

.comparison-wrapper {
    position: relative;
    flex: 1;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.02),
            rgba(255,255,255,0.01)
        );
}

.comparison-box {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
}

.base-image,
.after-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.after-layer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    clip-path: inset(0 0 0 50%);
}

.tint-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    pointer-events: none;
    transition: background 0.25s ease;
}

.slider-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 3px;
    height: 100%;
    transform: translateX(-50%);
    z-index: 6;
    background: rgba(10,10,10,0.85);
    box-shadow: 0 0 10px rgba(255,255,255,0.08);
}

.slider-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 54px;
    height: 54px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.22),
            rgba(255,255,255,0.10)
        );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.24);
    box-shadow:
        0 10px 28px rgba(0,0,0,0.28),
        inset 0 1px 0 rgba(255,255,255,0.18);
}

.slider-handle::before,
.slider-handle::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-top: 2px solid rgba(255,255,255,0.95);
    border-right: 2px solid rgba(255,255,255,0.95);
}

.slider-handle::before {
    left: 15px;
    transform: translateY(-50%) rotate(225deg);
}

.slider-handle::after {
    right: 15px;
    transform: translateY(-50%) rotate(45deg);
}

.tint-card-bottom {
    height: var(--bottom-panel-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
    padding: 18px 20px 16px;
    box-sizing: border-box;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.07)
    );
    border-top: 1px solid rgba(255,255,255,0.08);
}

.tint-info-text {
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-size: clamp(15px, 1vw, 21px);
    font-weight: 400;
    text-align: center;
}

.tint-percent-bar {
    width: min(720px, 92%);
    padding: 8px;
    border-radius: 999px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    box-sizing: border-box;
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.16),
            rgba(255,255,255,0.08)
        );
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        0 10px 24px rgba(0,0,0,0.16);
}

.percent-btn {
    border: none;
    outline: none;
    background: transparent;
    color: rgba(255,255,255,0.92);
    font-size: clamp(15px, 1.15vw, 22px);
    font-weight: 500;
    padding: 13px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.28s ease;
}

.percent-btn:hover {
    background: rgba(255,255,255,0.10);
}

.percent-btn.active {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.18),
            rgba(255,255,255,0.10)
        );
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow:
        0 8px 18px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.16);
}

.projects-section{
    width:100%;
    padding:80px 100px;
    box-sizing: border-box;
}

.projects-title{
    font-size:30px;
    font-weight:700;
    margin-bottom:55px;
    letter-spacing:-1px;
}

.projects-grid{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:150px 70px;
    max-width:1200px;
    width: 100%;
    margin: 0 auto;
	margin-bottom: 80px;
}

.project-card{
    text-decoration:none;
    color:white;
    display:block;
    transition:0.35s ease;
    width: 100%;
	height:250px;
}

.project-card:hover{
    transform:translateY(-6px);
}

.project-image{
    width:100%;
    height: 250px;
	overflow:hidden;
    position:relative;
    border-radius:6px;
}

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

.slideshow{
    position:relative;
    width: 100%;
    height: 100%;
}

.slideshow .project-slide{    
	position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 0.8s ease, transform 0.45s ease, filter 0.45s ease;
}

.slideshow .project-slide.active{    
	opacity:1;
}

.project-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.38);
    opacity:0;
    transition:0.35s ease;
}

.project-card:hover .project-image::after{
    opacity:1;
}

.project-card:hover img{
    transform:scale(1.05);
    filter:brightness(0.7);
}

.project-content{
    padding-top:16px;
}

.project-content h3{
    font-size:20px;
    font-weight:500;
    margin-bottom:8px;
}

.project-content p{
    font-size:14px;
    color:rgba(255,255,255,0.48);
    line-height:1.5;
}

#backToTop {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: white;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 999;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    transform: scale(1.1);
    background: rgba(255,255,255,0.25);
}

.footer {
    padding: 60px 40px 20px;
    background: black;
    z-index: 5;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.footer-section {
    padding: 0 30px;
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
}

.footer-logo { width: 19%; }
.footer-location { width: 30%; }
.footer-contact { width: 20%; }
.footer-social { width: 17%; }

.footer-logo img {
    width: 200px;
    cursor: pointer;
}

.footer-location h3,
.footer-contact h3,
.footer-social h3 {
    margin-bottom: 8px;
    font-size: 15px;
}

.footer-location p {
    line-height: 1.3;
    font-size: 13px;
}

.map-links a {
    color: #ccc;
    text-decoration: none;
}

.map-links a:hover {
    color: red;
}

.footer-contact p {
    margin: 5px 0;
    font-size: 13px;
}

.social-icons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
}

.social-icons a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: white;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    z-index: 10;
    transition: 0.3s;
}

.social-icons img {
    width: 28px;
    filter: grayscale(100%);
    transition: 0.3s;
}

.social-icons a:hover img {
    filter: grayscale(0%);
}

.social-icons a:hover {
    color: #00ffcc;
}

.footer-location,
.footer-contact {
    position: relative;
}

.footer-location::after,
.footer-contact::after {
    content: "";
    position: absolute;
    top: 15%;
    right: 0;
    width: 1px;
    height: 70%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255,255,255,0.5),
        transparent
    );
}

.footer-bottom {
    text-align: center;
    margin-top: 40px;
}

.footer-bottom hr {
    border: 0;
    border-top: 1px solid #444;
    margin-bottom: 20px;
}

.footer-bottom p {
    font-size: 13px;
    color: #aaa;
}

/* TABLET VERSION */
@media (max-width:1024px){

    body{
        background-attachment:scroll;
    }

    .logo{
        top:22px;
        left:24px;
    }

    .logo img{
        width:68px;
    }

    .navbar{
        top:22px;
        left:110px;
        right:24px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:8px 10px;
        scrollbar-width:none;
    }

    .navbar::-webkit-scrollbar{
        display:none;
    }

    .menu{
        flex-wrap:nowrap;
        white-space:nowrap;
    }

    .menu a{
        flex-shrink:0;
        font-size:13px;
        padding:9px 14px;
    }

    .menu .active{
        transform:scale(1.06);
    }

    .tint-demo-section{
        padding:130px 20px 90px;
    }

    .tint-demo-title{
        font-size:28px;
    }

    .tint-glass-card{
        width:100% !important;
        max-width:900px;
        height:620px !important;
    }

    .tint-card-top{
        font-size:22px;
    }

    .tint-percent-bar{
        width:95%;
    }

    .projects-section{
        padding:70px 40px;
    }

    .projects-grid{
        grid-template-columns:1fr;
        gap:45px;
        width:100%;
        max-width:750px;
        margin:0 auto;
    }

    .project-card{
        width:100%;
    }

    .project-image{
       width:100%;
       aspect-ratio:16 / 10;
       height:auto;
       overflow:hidden;
       position:relative;
       border-radius:6px;
   }

    .footer{
        padding:60px 30px 20px;
    }

    .footer-container{
        flex-wrap:wrap;
        justify-content:center;
        gap:40px;
    }

    .footer-section{
        width:40% !important;
        padding:0;
    }

    .footer-location::after,
    .footer-contact::after{
        display:none;
    }

    .social-icons{
        align-items:center;
    }
}

/* MOBILE VERSION */
@media (max-width:768px){

    body{
        background-attachment:scroll;
        background-position:center top;
        background-size:cover;
    }

    .logo{
        top:16px;
        left:16px;
    }

    .logo img{
        width:54px;
    }

    .navbar{
        top:14px;
        left:82px;
        right:12px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:7px 9px;
        scrollbar-width:none;
    }

    .navbar::-webkit-scrollbar{
        display:none;
    }

    .menu{
        flex-wrap:nowrap;
        white-space:nowrap;
        gap:7px;
    }

    .menu a{
        flex-shrink:0;
        font-size:11px;
        padding:8px 12px;
    }

    .menu .active{
        transform:scale(1.03);
    }

    .tint-demo-section{
        padding:110px 14px 70px;
    }

    .tint-demo-title{
        font-size:24px;
        margin-bottom:24px;
    }

    .tint-glass-card{
        width:100% !important;
        height:520px !important;
        border-radius:24px;
    }

    .tint-card-top{
        height:62px !important;
        font-size:19px;
    }

    .comparison-wrapper{
        flex:1;
    }

    .base-image,
    .after-image{
        object-fit:cover;
        object-position:center;
    }

    .slider-handle{
        width:42px;
        height:42px;
    }

    .slider-handle::before{
        left:11px;
    }

    .slider-handle::after{
        right:11px;
    }

    .tint-card-bottom{
        height:120px !important;
        padding:14px 10px;
        gap:12px;
    }

    .tint-percent-bar{
        width:100%;
        padding:5px;
        gap:4px;
    }

    .percent-btn{
        font-size:10px;
        padding:8px 2px;
    }

    .tint-info-text{
        font-size:13px;
    }

    .projects-section{
        padding:60px 22px;
    }

    .projects-title{
        font-size:25px;
        margin-bottom:35px;
    }

    .projects-grid{
        grid-template-columns:1fr;
        gap:35px;
        width:100%;
        max-width:420px;
        margin:0 auto;
    }

    .project-card{
        width:100%;
    }

    .project-image{
       width:100%;
       aspect-ratio:16 / 10;
       height:auto;
       overflow:hidden;
       position:relative;
       border-radius:6px;
   }

    .project-content{
        padding-top:14px;
    }

    .project-content h3{
        font-size:18px;
    }

    .project-content p{
        font-size:13px;
        line-height:1.6;
    }

    #backToTop{
        width:44px;
        height:44px;
        right:18px;
        bottom:20px;
        font-size:18px;
    }

    .footer{
        padding:50px 22px 20px;
    }

    .footer-container{
        flex-direction:column;
        align-items:center;
        gap:35px;
    }

    .footer-section{
        width:100% !important;
        padding:0;
    }

    .footer-logo img{
        width:140px;
    }

    .footer-location::after,
    .footer-contact::after{
        display:none;
    }

    .footer-location h3,
    .footer-contact h3,
    .footer-social h3{
        font-size:14px;
    }

    .footer-location p,
    .footer-contact p{
        font-size:12px;
        line-height:1.6;
    }

    .social-icons{
        align-items:center;
    }

    .social-icons a{
        font-size:13px;
    }

    .social-icons img{
        width:24px;
    }

    .footer-bottom{
        margin-top:30px;
    }

    .footer-bottom p{
        font-size:12px;
    }
}