body{

    margin:0;
    padding:0;

    background:#ffffff;

    overflow-x:hidden;

    font-family:sans-serif;
}

/* TOP BACKGROUND */

.top-bg{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:150px;

    background:#cdc6c6;

    z-index:9999;
}

/* LOGO */

.logo-container{

    display:flex;

    align-items:center;

    gap:0px;

    padding:30px;

    position:relative;

    z-index:10000; 
    margin-top:-35px;
}

.logo-container svg{

    width:150px;

    height:150px;
}

/* TEXT */

.logo-text h1{

    margin:0;

    font-size:68px;

    color:#243248;
}

.logo-text p{

    margin:0;

    letter-spacing:5px;

    color:#7b8454;

    font-size:22px;

    margin-top: -15px;
}

/* FEATURES */

.features{

    position:absolute;

    top:15px;

    left:500px;

    display:flex;

    gap:60px;

    z-index:10000;
}

.feature-box{

    text-align:center;
}

.feature-icon{

    font-size:60px;

    color:#243248;

    top: 10px;
}

.feature-box h3{

    margin-top:10px;

    font-size:20px;

    color:#243248;


}

/* CHANGING TEXT */

.changing-text{

    position:absolute;

    top:30px;

    left:70%;

    transform:translateX(-50%);

    text-align:center;

    z-index:10000;
}

#title{

    font-size:30px;

    color:#243248;

    margin:0;
}

#subtitle{

    margin-top:20px;

    font-size:22px;

    color:#7b8454;
}

/* CONTACT */

.contact-section{

    position:absolute;

    top:-0px;

    right:40px;

    display:flex;

    flex-direction:column;

    gap:15px;

    z-index:10000;
}

.contact-btn{

    width:65px;

    height:65px;

    background:#243248;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:white;

    font-size:32px;

    transition:0.4s;
}

.contact-btn:hover{

    transform:translateY(-5px);
}

.contact-icon{

    width:45px;
}

/* SIDEBAR */

.sidebar-left{

    position:fixed;

    top:0;

    left:0;

    width:250px;

    height:100vh;

    background:#75803a;

    z-index:1;
}

/* COUNTERS */

.counters-wrapper{

    display:flex;

    flex-direction:column;

    gap:50px;

    align-items:center;

    position:absolute;

    top:220px;

    left:50%;
    transform: translatex(-50%);
}

.progress-box{

    text-align:center;
}

.circle{

    position:relative;

    width:120px;

    height:120px;
}

.circle svg{

    width:120px;

    height:120px;

    transform:rotate(-90deg);
}

.circle svg circle{

    fill:none;

    stroke-width:8;
}

.bg{

    stroke:rgba(255,255,255,0.15);
}

.progress-circle{

    stroke:white;

    stroke-linecap:round;
}

.counter-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

    width:180px;
}

.counter{

    font-size:32px;

    color:white;

    margin:0;
}

.counter-content p{

    position:absolute;

    top:-75px;

    left:50%;

    transform:translateX(-50%);

    color:white;

    font-size:13px;

    width:220px;

    text-align:center;
}

/* MAIN SLIDER 

.main-slider{

    position:fixed;

    top:150px;

    right:0px;

    width:360px;

    height:100%;

    overflow:hidden;

    z-index:1;
}

.main-slider img{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:1s;
}

.main-slider img.active{

    opacity:1;
}

.img1{
    object-fit:cover;
    object-position:30% 40%;
}
.img2{
    object-fit:cover;
    object-position:15% 40%;
}
.img3{
    object-fit:cover;
    object-position:89% 100%;
}
.img4{
    object-fit:cover;
    object-position:88% 70% ;
}
*/








/* RENOVATION POST */

.reno-post{

    width:90%;

    max-width:900px;

    background:white;

    margin:170px 180px -160px auto;

    border-radius:28px;

    padding:22px;

    box-shadow:0 8px 30px rgba(0,0,0,0.08);

    font-family:sans-serif;
}

/* HEADER */

.reno-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;
}

/* LOGO */

.reno-logo{

    width:60px;

    height:60px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #98a61c;
}

/* INFO */

.reno-info h2{

    margin:0;

    font-size:24px;

    color:#243248;
}

.reno-info span{

    color:#777;

    font-size:14px;
}

/* IMAGE */

.reno-image-box{

    width:100%;

    height:430px;

    overflow:hidden;

    border-radius:24px;

    margin-bottom:22px;
}

.reno-image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:0.5s;

    cursor:pointer;
}

.reno-image:hover{

    transform:scale(1.03);
}

/* CONTENT */

.reno-content h1{

    font-size:34px;

    color:#243248;

    margin-bottom:15px;
}

.reno-content p{

    color:#666;

    line-height:1.8;

    font-size:16px;

    margin-bottom:25px;
}

/* DETAILS */

.reno-details{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
}

.reno-details span{

    background:#f4f4f4;

    padding:10px 15px;

    border-radius:12px;

    font-size:14px;

    color:#243248;
}













/* TOP */

.reno-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;
}

/* HEADER */

.reno-header{

    display:flex;

    align-items:center;

    gap:14px;
}

/* LOGO */

.reno-logo{

    width:58px;

    height:58px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #98a61c;
}

/* INFO */

.reno-info h2{

    margin:0;

    color:#243248;

    font-size:22px;

    font-weight:700;
}

.reno-info span{

    color:#888;

    font-size:13px;
}

/* 3 DOTS */

.fa-ellipsis{

    font-size:22px;

    color:#777;

    cursor:pointer;
}

/* SLIDER */

.reno-slider{

    position:relative;

    width:100%;

    height:460px;

    overflow:hidden;

    border-radius:26px;

    margin-bottom:22px;

    background:#f1f1f1;
}

/* IMAGES */

.reno-slide{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    background:#f1f1f1;

    opacity:0;

    transition:0.5s;
}

.reno-slide.active{

    opacity:1;
}

/* BUTTONS */

.reno-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,0.35);

    color:white;

    font-size:18px;

    cursor:pointer;

    z-index:10;

    backdrop-filter:blur(4px);

    transition:0.3s;
}

.reno-btn:hover{

    background:rgba(0,0,0,0.55);
}

.prev{

    left:15px;
}

.next{

    right:15px;
}

/* DOTS */

.reno-dots{

    position:absolute;

    bottom:16px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:8px;

    z-index:10;
}

.reno-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:rgba(255,255,255,0.5);

    transition:0.3s;
}

.reno-dot.active{

    width:22px;

    border-radius:20px;

    background:white;
}

/* CONTENT */

.reno-content h1{

    font-size:30px;

    color:#243248;

    margin-bottom:12px;
}

.reno-content p{

    color:#666;

    line-height:1.9;

    font-size:15px;

    margin-bottom:22px;
}

/* TAGS */

.reno-tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.reno-tags span{

    background:#f4f4f4;

    padding:10px 14px;

    border-radius:14px;

    font-size:13px;

    color:#243248;

    transition:0.3s;
}

.reno-tags span:hover{

    background:#e8e8e8;
}



/* FULLSCREEN */

.fullscreen{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:rgba(0,0,0,0.96);

    display:none;

    align-items:center;

    justify-content:center;

    z-index:9999900000000000000000009;
}

/* IMAGE */

#fullscreen-image{

    width:85%;

    max-height:92vh;

    object-fit:contain;

    border-radius:18px;
}

/* CLOSE */

.close-full{

    position:absolute;

    top:25px;

    right:35px;

    color:white;

    font-size:34px;

    cursor:pointer;

    z-index:1000;
}

/* BUTTONS */

.full-btn{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,0.1);

    color:white;

    font-size:20px;

    cursor:pointer;

    backdrop-filter:blur(5px);
}

.left{

    left:25px;
}

.right{

    right:25px;
}




.welcome-popup{

    position:fixed;

    bottom:25px;

    right:25px;

    background:white;

    padding:16px 22px;

    border-radius:18px;

    box-shadow:0 8px 25px rgba(0,0,0,0.15);

    z-index:999999;

    display:none;

    animation:popupShow 0.4s ease;

    max-width:280px;
}

/* TEXT */

.welcome-popup a{

    text-decoration:none;

    color:#243248;

    font-size:15px;

    line-height:1.7;

    font-weight:600;

    display:block;
}

/* CLOSE */

.close-popup{

    position:absolute;

    top:8px;

    right:12px;

    cursor:pointer;

    color:#777;

    font-size:14px;
}

/* ANIMATION */

@keyframes popupShow{

    from{

        opacity:0;

        transform:translateY(20px);
    }

    to{

        opacity:1;

        transform:translateY(0);
    }
}



.fullscreen{
    display: none;
}

.logo-container svg path:nth-child(1){

    opacity:0;

    transform-origin:center;

    animation:partOne 1s ease forwards;
}

/* ثاني قطعة */

.logo-container svg path:nth-child(2){

    opacity:0;

    transform-origin:center;

    animation:partTwo 1s ease forwards;

    animation-delay:0.7s;
}

/* المربع */

.logo-container svg rect{

    opacity:0;

    transform-origin:center;

    animation:partThree 0.8s ease forwards;

    animation-delay:1.4s;
}

/* الحركات */

@keyframes partOne{

    0%{

        opacity:0;

        transform:translateX(-120px) rotate(-180deg);
    }

    100%{

        opacity:1;

        transform:translateX(0) rotate(0deg);
    }
}

@keyframes partTwo{

    0%{

        opacity:0;

        transform:translateX(120px) rotate(180deg);
    }

    100%{

        opacity:1;

        transform:translateX(0) rotate(0deg);
    }
}

@keyframes partThree{

    0%{

        opacity:0;

        transform:scale(0) rotate(360deg);
    }

    100%{

        opacity:1;

        transform:scale(1) rotate(0deg);
    }
}




@media(max-width:454px){

    body{

        overflow-x:hidden;

        display:flex;

        flex-direction:column;

        align-items:center;
    }

    /* HIDE ELEMENTS */

    .sidebar-left{

        display:none;
    }

    .changing-text{

        display:none;
    }

    /* LOGO */

    .logo-container{

        transform:scale(0.55);

        transform-origin:left top;

        margin-top:1px;
    }

    /* CONTACT */

    .contact-icon{

        width:30px;
    }

    .contact-btn{

        width:45px;

        height:40px;
    }

    /* TOP BACKGROUND */

    .top-bg{

        height:100px;
    }

    /* POST */

    .reno-post{

        width:82%;

        background:#ffffff;

        border-radius:20px;

        overflow:hidden;

        box-shadow:
        0 4px 15px rgba(0,0,0,0.08);

        margin:10px auto;

        transform:translateY(60px);

        position:relative;

        left:0;

        right:0;
    }

    /* HEADER */

    .reno-header{

        display:flex;

        align-items:center;

        gap:10px;

        padding:12px;
    }

    /* LOGO */

    .reno-logo{

        width:42px;

        height:42px;

        border-radius:50%;

        object-fit:cover;
    }

    /* INFO */

    .reno-info h2{

        font-size:15px;

        color:#243248;

        margin-bottom:2px;
    }

    .reno-info span{

        font-size:10px;

        color:#777;
    }

    /* IMAGE BOX */

    .reno-image-box{

        width:100%;

        height:185px;

        overflow:hidden;

        line-height:0;

        margin:0;
    }

    /* IMAGE */

    .reno-image{

        width:100%;

        height:185px;

        object-fit:cover;

        object-position:center;

        display:block;

   
    }

    /* CONTENT */

    .reno-content{

        padding:10px 12px;
    }

    .reno-content h1{

        font-size:17px;

        color:#243248;

        margin-bottom:6px;
    }

    .reno-content p{

        font-size:12px;

        color:#555;

        line-height:1.5;
    }

    /* DETAILS */

    .reno-details{

        display:flex;

        flex-wrap:wrap;

        gap:6px;

        padding:0 12px 12px;
    }

    .reno-details span{

        background:#f3f4f7;

        color:#243248;

        font-size:10px;

        padding:5px 8px;

        border-radius:30px;
    }

    
      


    .image-popup{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,0.94);

    overflow:hidden;

    z-index:99999;
}

.image-popup img{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:88%;

    max-height:88%;

    object-fit:contain;

    border-radius:20px;

    overflow:hidden;
}

body.popup-open{

    overflow:hidden;
}
}




 @media(min-width:454px)
and
(max-width:768px){
    .logo-container{

    transform:scale(0.70);

    transform-origin:left top;

    margin-left:-20px;

    margin-top: -15PX;
}
.changing-text{

    display:none;
}

.features{

    justify-content:flex-start;

    gap:2px;

    left: 260px;

    margin-top: -20PX;
}


.feature-box{

    transform:scale(0.78);

    margin-top:15PX ;
}

.feature-box h3{

    font-size:20px;

    line-height:1.2;
}

.feature-icon{

    font-size:45px;
}


.contact-btn{

    width:48px;

    height:48px;
}

.contact-icon{

    width:30px;

    height:30px;
}

.top-bg{

    height:120px;
}
.sidebar-left{

    display: none;
}
}



@media(min-width:768px)
and
(max-width:1024px){

.logo-container{

    margin-left:-28px;
}
 .features{

    margin-left:-130px;
    gap: 2px;
}   

.feature-box{

    transform:scale(0.82);
}

.sidebar-left{

    display: none;
}

.reno-post{
    margin:10px auto;

    transform:translateY(135px);
}


}