/* Reset */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}

/* Body */

body {

    background:white;

    font-family: Arial, sans-serif;

    overflow-x: hidden;
}

/* Social Top Right */

.social-bar {

    position: fixed;

    top: 20px;

    right: 20px;

    display: flex;

    flex-direction: row;

    gap: 10px;

    z-index: 9999;
}

/* Icons */

.social-link {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0);

    backdrop-filter: blur(10px);

    display: flex;

    justify-content: center;

    align-items: center;

    position: relative;

    transition: 0.4s;

    box-shadow:
        0 0 10px rgba(255, 255, 255, 0);
}

/* Hover */

.social-link:hover {

    transform: translateY(-4px) scale(1.08);

    background: rgba(255,255,255,0.15);

    box-shadow:
        0 0 18px rgba(255,255,255,0.18);
}

/* صور الأيقونات */

.social-img {

    width:40px;

    height: 40px;

    object-fit: contain;
}

/* النص */

.social-text {

    position: absolute;

    top: 55px;

    right: 0;

    background: rgba(15,15,15,0.95);

    color: white;

    padding: 8px 12px;

    border-radius: 10px;

    font-size: 12px;

    opacity: 0;

    visibility: hidden;

    transition: 0.4s;

    white-space: nowrap;

    box-shadow:
        0 0 12px rgba(255,255,255,0.08);
}

/* ظهور النص */

.social-link:hover .social-text {

    opacity: 1;

    visibility: visible;
}

/* Company Profile */

.company-profile {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}
/* Top Logo */

.top-logo {

    position: fixed;

    top: -150px;

    left: -15px;

    display: flex;

    align-items: center;

    gap: 12px;

    z-index: 9999;
}

/* صورة اللوغو */

.top-logo-img {

.top-logo-img {

    width: 150px;

    height: 150px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 20px rgba(255,255,255,0.12));
}
}

/* النص */

.top-logo-text {

    color: white;

    font-size: 70px;

    font-weight: 700;

    letter-spacing: 1px;

    text-shadow:
        0 0 12px rgba(255,255,255,0.1);
}


    

/* Notification Box */

.news-box {

    position: absolute;

    top: 280px;

    left: 40px;

    width: 420px;

    background: rgba(255,255,255,0.12);

    backdrop-filter: blur(12px);

    border-radius: 22px;

    padding: 25px;

    box-shadow:
        0 0 25px rgba(0,0,0,0.15);

    animation:
        notificationMove 3s ease-in-out infinite;
}

/* Animation */

@keyframes notificationMove {

    0% {

        transform: translateY(0px);

        box-shadow:
            0 0 20px rgba(255,255,255,0.08);
    }

    50% {

        transform: translateY(-8px);

        box-shadow:
            0 0 35px rgba(255,255,255,0.18);
    }

    100% {

        transform: translateY(0px);

        box-shadow:
            0 0 20px rgba(255,255,255,0.08);
    }
}

/* Company News */

.company-news {

    position: fixed;

    top: 220px;

    left: 0;

    width: 300px;

    height: calc(100vh - 220px);

    background: #242424;

    border-radius: 0 45px 0 0;

    overflow-y: scroll;

    overflow-x: hidden;

    box-sizing: border-box;
    animation: sidebarShow 2.5s ease;
}
/* Header */

.company-news-header {

    padding: 18px 20px;

    color: #bdbdbd;

    font-size: 24px;

    font-weight: 700;

    border-bottom:
        1px solid rgba(255,255,255,0.05);

    letter-spacing: 1px;
}

/* List */

.company-news-list {

    height: calc(100vh-300px);

    overflow-y: auto;
     
    overflow-x: hidden ;
}

/* Items */

.company-news-item {

    padding: 16px 20px;

    color: #9f9f9f;

    font-size: 15px;

    border-bottom:
        1px solid rgba(255,255,255,0.04);

    transition: 0.3s;

    cursor: pointer;
}

/* Hover */

.company-news-item:hover {

    background: #343434;

    color: white;

    transform: translateX(6px);
}

/* Scrollbar */

.company-news-list::-webkit-scrollbar {

    width: 8px;
}

.company-news-list::-webkit-scrollbar-thumb {

    background: #6f6f6f;

    border-radius: 10px;
}

/* Responsive */


    .company-news-header {

        font-size: 20px;
    }

    .company-news-item {

        font-size: 14px;

        padding: 14px 16px;
    }



    .company-news-header {

        font-size: 20px;
    }

    .company-news-item {

        font-size: 14px;

        padding: 14px 16px;
    }


    /* Sidebar Animation */

@keyframes sidebarShow {

    from {

        opacity: 0;

        transform:
            translateX(-80px);
    }

    to {

        opacity: 1;

        transform:
            translateX(0);
    }
}

/* Image Gallery */

.image-gallery {

    position: absolute;

    top: 220px;

    left: 310px;

    display: flex;

    gap: 50px;

    align-items: center;

     width:fit-content;
}




/* Item */

.gallery-item {

    width: 260px;

    height: auto;

    overflow: hidden;

    border-radius: 30px;

    background: transparent;

    transition: 0.5s;

    position: relative;

    box-shadow:none;

    display: flex;

    align-items: center;

    justify-content: center;
}

/* الصور */

.gallery-item img {

    width: 100%;

    height: 420px;

    object-fit: cover;

    background: white;

    border-radius: 30px;

    transition: 0.6s;
}

/* Hover */

.gallery-item:hover {

    transform: translateY(-10px);
}

.gallery-item:hover img {

    transform: scale(1.08);
}


.construction-img {

    object-position: right;
}
.realestate-img {

    object-position: 20%;
}
.gallery-item {

    display: flex;

    flex-direction: column;

    align-items: center;
}

.gallery-item h3 {

    margin-top: 15px;

    font-size: 24px;

    color: black;

    font-weight: bold;
}
body{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}



/* Background Animation */

body.bg-active {

    animation:
        bgZoom 0.7s ease;
}

@keyframes bgZoom {

    from {

        transform: scale(1.03);

        filter: blur(4px);
    }

    to {

        transform: scale(1);

        filter: blur(0);
    }
}

/* Animation وقت فتح الصفحة */

.gallery-item {

    opacity: 0;

    transform: translateY(80px);

    animation: showGallery 3s ease forwards;
}

/* تأخير لكل صورة */

.gallery-item:nth-child(1) {

    animation-delay: 0.2s;
}

.gallery-item:nth-child(2) {

    animation-delay: 0.5s;
}

.gallery-item:nth-child(3) {

    animation-delay: 0.8s;
}

/* Animation */

@keyframes showGallery {

    from {

        opacity: 0;

        transform: translateY(80px);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }
}
a{
    text-decoration: none;
}
body{

    transition:
    background-image 0.8s ease,
    background-size 0.8s ease,
    background-position 0.8s ease;

}
body::before{

    content: "";

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    backdrop-filter: blur(3px);

    z-index: -1;

}
.stars-box{

    position: absolute;

    top: 120px;

    left: 60%;

    transform: translateX(-50%);

    display: flex;

    gap: 18px;
}

.stars-box span{

    font-size: 42px;

    color: gold;

    opacity: 0;

    transform: translateY(40px) rotate(180deg);

    animation: starShow 1s forwards;
}

.stars-box span:nth-child(1){

    animation-delay: 0.2s;
}

.stars-box span:nth-child(2){

    animation-delay: 0.4s;
}

.stars-box span:nth-child(3){

    animation-delay: 0.6s;
}

.stars-box span:nth-child(4){

    animation-delay: 0.8s;
}

.stars-box span:nth-child(5){

    animation-delay: 1s;
}

@keyframes starShow{

    to{

        opacity: 1;

        transform: translateY(0) rotate(0deg);
    }
}
body{

    background:
    linear-gradient(

        to bottom,

        #f8f8f8,

        #ececec,

        #f5f5f5

    );

    min-height: 100vh;

    margin: 0;

    padding: 0;

    overflow-x: hidden;
}

/* HIDE */

.hide-news{

    display:none;
}

/* STAR */

.news-star{

    display:inline-block;

    margin-right:10px;

    cursor:pointer;

    animation:rotateStar 4s linear infinite;
}

/* ROTATE */

@keyframes rotateStar{

    from{

        transform:rotate(0deg);
    }

    to{

        transform:rotate(360deg);
    }}

    .design-img{

    object-fit: cover;

    object-position: center;
}

/* whatsapp */
.whatsapp-img{

    width: 55px;

    height:55px;
}


/* MOBILE */

@media(max-width:768px){

    /* السوشال */

    .social-bar{

        top:2px;

        right:10px;

        gap:15px;
        z-index: 10000000000000000000000000000000000000000000000000000000;
       
    }

    .social-img{

        width:35px;

        height:35px;
        z-index: 1000000000000000000000000000000000000000000000000000;
        
    }

    .whatsapp-img{

        width:45px;

        height:45px;
        z-index: 1000000000000000000000000000000000000000000000000000000000000000000000000;
    }

   

    

    /* الأخبار */

    .company-news{
         display: none;}
    /* الصور */

    .image-gallery{


    position:relative;

    left:0;

    margin:auto;

    width:100%;

    justify-content:center;

    flex-wrap:wrap;

    }

    .gallery-item{

        width:120px;
    }

    .gallery-item img{

        height:240px;
    }

    .gallery-item h3{

        font-size:14px;
    }

    /* النجوم */

    .stars-box{

        top:120px;

        left:65%;
    }

    .stars-box span{

        font-size:24px;
    }


    .stars-box{

    position:fixed;

    top:120px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:18px;

    z-index:9999;
    
    

}

  .top-logo{

    position: fixed;

    top:-30px;

    width: 100%;

    text-align: center;

    z-index: 9999;
 
    left:50px;
}

   .top-logo-img{

    width:220px;

    height:220px;
}}



