:root {
    /* ======== Green theme ===========*/
    --color-primary: #ff7b02;
    --color-primary-variant: #e5a55d;
    --color-bg-1: #000e17;
    --color-bg-2: #001e2d;
    --color-bg-3: #012734;
    --color-bg-4: #003347;
    --color-light: #85a2b2;
    --color-white: hsl(0, 0%, 90%);
    --color-green: #5ec113;
    --color-black: hsl(0, 0%, 0%);
    
/* ======== Purple theme ===========*/
/* ---color-primary: #ff7b02;
    --color-primary-variant: #e5a55d;
    --color-bg-1: #140021;
    --color-bg-2: #1e0032;
    --color-bg-3: #25003e;
    --color-bg-4: #36005a;
    --color-light: #d0b8e0;
    --color-white: hsl(0, 0%, 90%);
    --color-green: #5ec113;*/



    --container-width-lg: 88%;
    --container-width-md: 92%;
    /*--container--width-sm: 94%;*/

    --transition: all 400ms ease;

}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}



/* Vertical scrollbar */
::-webkit-scrollbar {
    width: 0.5rem;
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary-variant);
    border-radius: 0.25rem;
}

/* Thin Horizontal scrollbar */
::-webkit-scrollbar {
    height: 0.5rem; /* Set the height to your desired thickness */
}

::-webkit-scrollbar-thumb {
    background: var(--color-primary-variant);
    border-radius: 0.25rem;
}

::-webkit-scrollbar-track {
    background: rgba(229, 165, 93, 0.2);
}



html {
    scroll-behavior: smooth;
}

body{
    font-family: 'Montserrat', sans-serif;
    background:var(--color-bg-3);
    color: var(--color-light);
    line-height: 1.7;
    cursor: none;
}


/* ============== PRELOADER ====================*/







h1, h2{
     line-height: 1.1;
     font-weight: 400;
}

h1 {
    font-size: 4rem;
    color: var(--color-white);
}

h2 {
    font-size: 3.5rem;
}

a {
    color: var(--color-light);
    transition: var(--transition);
}

a:hover {
    color: var(--color-primary);
}

.container {
    width: var(--container-width-lg);
    margin: 0 auto;
    max-width: 2160px;
}

img{
    display: block;
    object-fit: cover;
    width: 100%;
}


.cursor-dot {
    width: 15px;
    height: 15px;
    background-color: var(--color-primary-variant);
    box-shadow: 0 0 10px var(--color-primary),
                0 0 15px var(--color-primary),
                0 0 20px var(--color-primary);
    animation: colors 6s infinite;
}

@keyframes colors{
    0%{
        filter: hue-rotate(0deg);
    }

    100%{
        filter: hue-rotate(360deg);
    }
}




.cursor-outline {
    width: 7px;
    height: 7px;
    border: 2px solid var(--color-primary-variant);
    box-shadow: 0 0 10px var(--color-primary),
                0 0 15px var(--color-primary),
                0 0 20px var(--color-primary);
                animation: colors 6s infinite;
    
}

@keyframes colorsb{
    0%{
        filter: hue-rotate(0deg);
    }

    100%{
        filter: hue-rotate(360deg);
    }
}


.cursor-dot, .cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 111;
    pointer-events: none;
}


.circle {
    height: 24px;
    width: 24px;
    border-radius: 24px;
    background: var(--color-primary);
    position: absolute;
    top: 0%;
    left: 0%;
}

/* ============== NAV ====================*/

nav{
    height: 5rem;
    width: 100vw;
    display: grid;
    place-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}


/* ============== nav class on scroll using JS ====================*/

.window-scrolled {
    background: var(--color-bg-2);
    border-bottom: 0.2rem solid var (var(--color-bg-3));
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);

}



.nav__container{
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ============== only needed on tablets and phones ====================*/
.nav__toggle-btn {
    display: none;
}

.nav__logo {
    width: 7.5rem;
}

.nav__links {
    display: flex;
    gap: 4rem;
}

.nav__socials {
    display: flex;
    gap: 1rem;
}

.nav__socials a{
    background: var(--color-bg-1);
    padding: 0.5rem;
    border-radius: 50%;
    font-size: 1rem;
    transition: var(--transition);
}

.nav__socials a:hover{
    box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.4);
}






/* ============== HEADER ====================*/

header{
    max-width: 100vw;
    height: 60vw;
    position: relative;
    top: 0;
    background: linear-gradient(var(--color-bg-3), var(--color-bg-1));
    overflow: hidden;
    
}

.header__container {
    display: grid;
    grid-template-columns: 43% 53%;
    gap: 4%;
    margin-top: 15rem;
    position: relative;
}

.header__image-bg {
    background: var(--color-bg-4);
    height: 20rem;
    width: 16rem;
    position: absolute;
}

.header__image-lg {
    width: 29rem;
    position: relative;
    top: 1rem;
    left: 1rem;
    filter: saturate(0) brightness(0.3);
    transition: var(--transition);
}

.header__image-sm {
    width: 28rem;
    height: 28rem;
    overflow: hidden;
    position: absolute;
    left: 6rem;
    top: 6rem;
    transition: var(--transition);
}

.header__left:hover .header__image-sm{
    opacity: 0;
}

.header__left:hover .header__image-lg{
    filter:saturate(1) brightness(1);
    border: 1rem solid var(--color-bg-4);
    top: 0;
    left: 0;
}


.header__head {
    margin-top: 80px;
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}



/* ============== General empty styles========
.empty {
    height: 3.5rem;
    width: 26rem;
    background: var(--color-bg-2);
    border-radius: calc(3.5rem /2);
    margin-bottom: 3.5rem;
    box-shadow: inset 0 1rem 1rem rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-bg-4);
}
==========*/
.header__tag {
    color: var(--color-primary-variant);
}

.header__right p{
    margin-top: 2rem;
    width: 85%;
}


/*only shows on tablets and phones*/

.header__btn-md {
    display: none;
    border-radius: 5px;
}

/*to fix animated frames mid*/

.header__frames {
    position: absolute;
    top: 88vh;
    right: 55rem;
    transition: var(--transition);
}


.header__frame {
    width: 14rem;
    border: 0.4rem solid var(--color-bg-3);
    box-shadow: 0 0 4rem rgba(0, 0, 0, 0.5);
    position: absolute;
    transform: rotate(-10deg);
    
    transform-origin: bottom left;
    transition: var(--transition);

}

.header__frame:nth-child(1) {
    transform: rotate(20deg);
    top: -2rem;
    left: 2rem;
}

.header__frames:hover .header__frame {
        transform: rotate(0);
}

.header__frames:hover .header__frame:nth-child(1) {
    top: 0;
    left: 15rem;
}


/* general style for contact buttons*/
.contact__btn {
    color: var(--color-bg-1);
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: var(--transition);
}


    .header__btn {
        background: linear-gradient(-30deg, var(--color-primary-variant), var(--color-primary), var(--color-primary-variant));
        position: absolute;
        right: 6%;
        bottom: -3rem;
    }
    
    
    .header__btn:hover {
        box-shadow: 0 2rem 2rem rgba(0, 0,0, 0.3);
        transform: translateY(-1rem);
        color: var(--color-bg-1);
    }

    .contact__btn i {
        font-size: 3rem;
        position: absolute;
    }

    .contact__btn p {
        font-size: 1rem;
        font-weight: 600;
        width: 10rem;
        height: 10rem;
        display: flex;
        justify-content: center;
        animation: spinText 30s linear infinite;

    }

    .contact__btn p span {
        position: absolute;
        transform-origin: 0.3rem 5rem;

    }

    @keyframes spinText {
        to{
            transform: rotate(360deg);
        }
    }


    /* ===================== about =========================*/

    #about {
        margin-top: 10rem;
        padding-top: 20px;
    }

    .about__container {
        display: grid;
        grid-template-columns: 10rem 26rem auto;
        gap: 3rem;
        position: relative;
    }
    
    .about__title {
        position: absolute;
        top: -10rem;
        z-index: 1;

    }

    .about__btn{
        color: var(--color-primary-variant);
        align-self: end;
    }

    .about__btn:hover {
        transform: translateY(-1rem);
        color:var(--color-primary);
    }

    .about__image{
        position: relative;
    }

    .about__image-bg {
        width: 16rem;
        height: 24rem;
        position: absolute;
        bottom: 0;
        background: var(--color-bg-4);
    }

    .about__image-lg {
        position: relative;
        left: 1rem;
        bottom: 1rem;
        filter: saturate(0) brightness(0.3);
        transition: 500ms ease;
    }

    .about__image-sm{
        position: absolute;
        top: 3rem;
        left: 8rem;
        height: 22rem;
        width: 22rem;
        overflow: hidden;
        box-shadow: 2rem 2rem 2rem rgba(0, 0, 0, 0.2);
        transition: 500ms ease;
    }

    .about__image:hover .about__image-sm{
        opacity: 0;
    }

    .about__image:hover .about__image-lg {
        filter: saturate(1) brightness(1);
        box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.2);
        border: 1rem solid var(--color-bg-4);
        left: 0;
        bottom: 0;
    }

    .about__right {
        margin-left: 5rem;
   }

   .about__right p {
         margin: 0 4rem 1.5rem 0;
   }

   .about__empty {
    width: 26rem;
    position: absolute;
    right: 14rem;
    transform: translateY(-300%);
    
}

   /* ===================== end of about =========================*/
  
   
    /* ===================== GALLERY =========================*/
 
   #gallery {
        margin-top: 12rem;
   }

   .gallery__head {
        display: flex;
        justify-content: space-between;
   }

   .gallery__container p {
       margin-top: 1rem;
        width: 55rem;
   }

   .swiper-wrapper {
        margin-top: 5rem;
        height: 37rem;
        padding-bottom: 5rem;
        margin-bottom: -25rem;
   }
   
   .swiper-slide {
        border: 0.5rem solid var(--color-bg-4);
        height: fit-content;
        max-height: 36rem;
        overflow: hidden;
        transition: var(--transition);
        box-sizing: content-box;
   }

   .swiper-slide:hover{
    box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0.4);
  }
    .swiper-slide img{
        width: 100%;
        height: 100%;
        object-fit: cover; 
        filter: saturate(0);
        transition: var(--transition);
  }

    .swiper-slide:hover img{
    filter: saturate(1);
  }

  
  .swiper-container {
    width: 100%;
    height: 100%; /* or a specific height in percentage or another relative unit */
}


   /* ==  .swiper-pagination-bullet {
    background: var(--color-primary);
  }=======*/
    
   

    .swiper-pagination {
        transform: translateY(-350px) !important; 
    }

    .swiper-pagination-bullet {
        background: var(--color-primary)!important;
    }


/* ===================== END of GALLERY ==================*/

/*<!-- ============TOP Zkills===============--> */

.zkill__empty {
    width: 26rem;
    position: absolute;
    right: 14rem;
    transform: translateY(-60%);
}

#zkill {
    margin-top: 1rem;
}

.zkill__head {
    display: flex;
    justify-content: space-between;
}

.zkill__container p {
    width: 45rem;
    text-align: left;
    margin-top: 1rem; 
  }



.skilll__empty {
    width: 26rem;
    position: absolute;
    right: 14rem;
    transform: translateY(-60%);
}

#skilll {
    margin-top: -20rem;
}

.skilll__head {
    display: flex;
    justify-content: space-between;
}

.skilll__container p {
    width: 55rem;
    text-align: left;
    margin-top: 1rem; 
  }



.skill {
    margin-top: -20rem;
    

}



.skill__container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 100px;
    justify-content: center;
    align-items: center;
    text-align: center; /* Center the content inside each grid item horizontally */
    margin: 0 auto; /* Center the grid container horizontally */
    width: 50rem;
    z-index: 1;
}

.skill__item {
    width: 100%; /* Ensure the content inside grid items takes full width */
}

.skill {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: relative;
}

.circle-wrap {
    width: 150px;
    height: 150px;
    background-color: var(--color-bg-2);
    border-radius: 50%;
    position: relative;
}





    .circle-wrap .circleb .mask,
    .circle-wrap .circleb .fill-1,
    .circle-wrap .circleb .fill-2,
    .circle-wrap .circleb .fill-3,
    .circle-wrap .circleb .fill-4,
    .circle-wrap .circleb .fill-5,
    .circle-wrap .circleb .fill-6{
        width: 150px;
        height: 150px;
        position: absolute;
        border-radius: 50%;

    }


    .circle-wrap .circleb .mask{
        clip: rect(0px, 150px, 150px, 75px);
    }

    /* Coloranimation for 1st progress bar */

    .mask .fill-1{
        clip: rect(0px, 75px, 150px, 0px);
        background-color: #f77500;
    }

    .mask.full-1,
    .circleb .fill-1{
        animation: fill-1 ease-in-out 7s infinite;   
        transform: rotate(170deg);
    }

    @keyframes fill-1 {
        0%{transform: rotate(0deg);}
        25%, 50%, 100%{transform: rotate(170deg);}
    }




    /* Coloranimation for 2nd progress bar */

    .mask .fill-2{
        clip: rect(0px, 75px, 150px, 0px);
        background-color: #26c9ff;
    }

    .mask.full-2,
    .circleb .fill-2{
        animation: fill-2 ease-in-out 7s infinite;  
        transform: rotate(168deg);
    }

    @keyframes fill-2 {
        0%{transform: rotate(0deg);}
        25%, 50%, 100%{transform: rotate(168deg);}
    }




     /* Coloranimation for 3rd progress bar */

     .mask .fill-3{
        clip: rect(0px, 75px, 150px, 0px);
        background-color: #ff4494;
    }

    .mask.full-3,
    .circleb .fill-3{
        animation: fill-3 ease-in-out 7s infinite;  
        transform: rotate(157deg);
    }

    @keyframes fill-3 {
        0%{transform: rotate(0deg);}
        25%, 50%, 100%{transform: rotate(157deg);}
    }


     /* Coloranimation for 4th progress bar */

     .mask .fill-4{
        clip: rect(0px, 75px, 150px, 0px);
        background-color: #c98cff;
    }

    .mask.full-4,
    .circleb .fill-4{
        animation: fill-4 ease-in-out 7s infinite;  
        transform: rotate(141deg);
    }

    @keyframes fill-4 {
        0%{transform: rotate(0deg);}
        25%, 50%, 100%{transform: rotate(141deg);}
    }


      /* Coloranimation for 5th progress bar */

      .mask .fill-5{
        clip: rect(0px, 75px, 150px, 0px);
        background-color: #44cc86;
    }

    .mask.full-5,
    .circleb .fill-5{
        animation: fill-5 ease-in-out 7s infinite;  
        transform: rotate(135deg);
    }

    @keyframes fill-5 {
        0%{transform: rotate(0deg);}
        25%, 50%, 100%{transform: rotate(135deg);}
    }



      /* Coloranimation for 6th progress bar */

      .mask .fill-6{
        clip: rect(0px, 75px, 150px, 0px);
        background-color: #e62433;
    }

    .mask.full-6,
    .circleb .fill-6{
        animation: fill-6 ease-in-out 7s infinite;  
        transform: rotate(170deg);
    }

    @keyframes fill-6 {
        0%{transform: rotate(0deg);}
        25%, 50%, 100%{transform: rotate(170deg);}
    }


     



    /* Inside the circle */

    .inside-circle{
        width: 142px; /* Change the width to make the circle bigger */
        height: 142px; /* Change the height to make the circle bigger */
        border-radius: 50%;
        background-color: var(--color-bg-3);
        line-height: 142px; /* Set line-height equal to height for vertical centering */
        position: absolute;
        top: 50%; /* Position the element 50% from the top of the parent element */
        left: 50%; /* Position the element 50% from the left of the parent element */
        transform: translate(-50%, -50%);
        z-index: 1;
        font-size: 18px;
        font-weight: 400;
        color: var(--color-light);
        text-align: center;
        font-family: 'Montserrat', sans-serif;
    }

    

   
/* ===================== Exhibition (services) =========================*/

.exhibitions__empty {
    width: 26rem;
    position: absolute;
    right: 14rem;
    transform: translateY(-100%);
    
}




#exhibitions {
    margin-top: 0rem;
}

.exhibitions__container{
    position: relative;
}


.exhibitions__head {
    display: grid;
    grid-template-columns: auto 10rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.exhibitions__head > p {
    width: 55rem;
}

.exhibitions__btn {
    color: var(--color-primary-variant);
}

.exhibitions__btn:hover {
    transform: translateY(-1rem);
}

.exhibitions__gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 5rem;
    gap: 3rem;
}

.exhibitions__gallery article {
    border: 0.5rem solid var(--color-bg-4);
    transition: var(--transition);

}

.exhibitions__gallery article:nth-child(1) {
    grid-row: 1/3;
}

.exhibitions__gallery article:nth-child(4) {
    grid-column: 2/4;
    grid-row: 2/3;
}

.exhibitions__gallery article img{
    height: 100%;
    filter: saturate(0);
    transition: var(--transition);
}

.exhibitions__gallery article:hover img {
    filter: saturate(1);
}

.exhibitions__gallery article:hover {
    box-shadow: 0 4rem 4rem rgba(0, 0, 0, 0.5);
}


/*<!-- ============TOP Zervices images===============--> */


.dervice__empty {
    width: 26rem;
    position: absolute;
    right: 14rem;
    transform: translateY(-60%);
}

#dervice {
    margin-top: 8rem;
}

.dervice__head {
    display: flex;
    justify-content: space-between;
}

.dervice__container p {
    width: 55rem;
    text-align: left;
    margin-top: 1rem; 
}





#services {
    margin-top: 0rem;
}



.services {
    margin-top: 4rem;

}


.service__container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;

}

.service__head {
    display: grid;
    grid-template-columns: auto 10rem;
    justify-content: space-between;
    align-items: center;
}

.service__head > p {
    width: 45rem;
}




.service {
    background: var(--color-bg-1);
    text-align: center;
    border: 1px solid transparent;
    transition: var(--transition);
}

.service:hover {
    background: transparent;
    border-color: var(--color-primary);

}


.service__info {
    padding: 2rem;

}

.service__info p {
    margin: 1.2rem 0 2rem;
    font-size: 0.9rem;

}





/*<!-- ============Footer==============--> */

footer {
    background: var(--color-bg-1);
    padding-top: 5rem;
    font-size: 0.9rem;

}
.footer__container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5rem;

}.footer__container > div h4 {
    margin-bottom: 1.2rem;
}

.footer__1 p {
    margin: 0 0 2rem;
}

footer ul li{
    margin-bottom: 0.7 rem;
}

footer ul li a:hover{
    text-align: underline;
}

.footer__socials {
    display: flex;
    gap: 1rem;
    font-size: 1.2rem;
    margin-top: 2rem;

}

.footer__copyright {
    text-align: center;
    margin-top: 4rem;
    padding: 1.2rem 0;
    border-top: 1px solid var(--color-primary);
}






/* ================= Media Queries (Bigger) ======================*/

@media screen and (max-width: 1400px){
    .container {
     width: var(--container-width-md);
         position: relative;

    }

    h1 {
         font-size: 2.5rem;
         line-height: 1.3;
    }


      h2 {
         font-size: 2.5rem;
    }





    /* ============================ NAV =========================*/

     .nav__socials {
         display: none;
     }

     .nav__links {
         position: absolute;
         top: 100%;
         right: 0;
         flex-direction: column;
         gap: 0;
         display: none;
     }

     .nav__links li {
         width: 100%;
         height: 5.8rem;
         animation: animateNavItems 400ms linear forwards;
         transform-origin: top right;
         opacity: 0;
     }
     
     .nav__links li:nth-child(2) {
         animation-delay: 200ms;
     }
     
     .nav__links li:nth-child(3) {
         animation-delay: 400ms;
     }
     
     .nav__links li:nth-child(4) {
         animation-delay: 600ms;
     }
     
     .nav__links li:nth-child(5) {
         animation-delay: 800ms;
     }

     .nav__links li:nth-child(6) {
         animation-delay: 1000ms;
     }
     
     .nav__links li:nth-child(7) {
         animation-delay: 1200ms;
     }
     
     
     @keyframes animateNavItems{
         0% {
             transform: rotateZ(-90deg) rotateX(90deg) scale(0.1);
         }
     
         100% {
             transform: rotateZ(0) rotateX(0) scale(1);
             opacity: 1;
         }
     
     }


     .nav__links li a {
         background: var(--color-bg-4);
         height: 100%;
         width: 100%;
         display: flex;
         align-items: center;
         padding: 1rem 5rem 1rem 3rem;
         border-top: 1px solid var(--color-bg-2);

}


   .nav__links li a:hover {
     background: var(--color-primary);
     color: var(--color-bg-1);
}


     .nav__toggle-btn {
         display: inline-block;
         font-size: 2rem;
         background: transparent;
         cursor: pointer;
         color: var(--color-white);
     }


     #nav__toggle-close {
         display: none;
     }

 

    


/* ============================ HEADER =========================*/


 header {
     height: fit-content;
     padding: 12rem 0 10rem;
     display: grid;
     place-items: center;
     
 }

 .header__image-bg, .header__image-sm {
     display: none;
 }
 
 .header__container {
     grid-template-columns: 40% 54%;
     gap: 6%;
     margin: 0;

 }

 .header__image-lg {
     filter: saturate(1) brightness(1);
     border: 1rem solid var(--color-bg-2);
     overflow: hidden;
     width: 100%;
     top: 0;
     left: 0;
     /* ====border-radius: 15rem 15rem 0 0;========*/

 }


 .empty {
     display: none;
 }

 .header__tag {
     margin-bottom: 1rem;
 }

 .header__right p {
     width: 100%;
     margin-top: 1.5rem;
 }

 .header__frames, .contact__btn {
     display: none;
 }

 .header__btn-md {
     background: linear-gradient(135deg, var(--color-primary-variant), var(--color-primary));
     color: var(--color-bg-1);
     margin-top: 2rem;
     display: inline-block;
     padding: 0.6rem 1.6rem;
     font-weight: 600;
     border-radius: 0.3rem;
 }

 .header__btn-md:hover {
     color:var(--color-bg-1);
 }




/* ============================ About =========================*/

 .about__container{
     grid-template-columns: 40% 54%;
     gap: 6%;
  }

  .about__image-bg, .about__image-sm {
     display: none;
  }

  .about__image-lg {
     left: 0;
     top: 0;
     filter: saturate(1) brightness(1);
  }

  .about__image:hover .about__image-lg {
     border: none;
  }


  .about__right {
     margin: 0;
  }

  .about__right p {
     margin-bottom: 1rem;
  }

 

/* ============================ Gallery =========================*/


  .gallery {
     margin-top: 8rem;
  }

  .gallery__container p {
     width: 100%;
     margin-top: 2rem;
  }

  .swiper-wrapper {
     margin-top: 4rem;
     height: fit-content;
  }


















 /* ============================ Exhibitions =========================*/

 .exhibitions__head {
    margin-top: 0.5rem;
}


 .exhibitions__head > p {
     width: 100%;
     margin-top: 2rem;
 }

 .exhibitions__gallery {
     margin-top: 3rem;
     gap: 1rem;
 }

 .exhibitions__gallery article {
     border: none;
 }

 
 /* ============= Services Tablets ========================= */


 .services {
     margin-top: 0;

 }

 .service__container{
     grid-template-columns: 1fr 1fr;
 }


 
 

 .swiper-wrapper {
    margin-top: 5rem;
    height: 37rem;
    padding-bottom: 5rem;
    margin-bottom: -15rem;
}

.swiper-pagination {
    transform: translateY(-150px) !important; 
}

.swiper-pagination-bullet {
    background: var(--color-primary)!important;
}


 /* ============= Footer Tablets ========================= */

 .footer__container{
     grid-template-columns: 1fr 1fr;

 }
}

 /* =======================================*/
  /* =======================================*/


  /* ================= Media Queries (Tablets) ======================*/

  @media screen and (max-width: 1024px){
       .container {
        width: var(--container-width-md);
            position: relative;

       }

       h1 {
            font-size: 2.5rem;
            line-height: 1.3;
       }


         h2 {
            font-size: 2.5rem;
       }

       /* ============================ NAV =========================*/

        .nav__socials {
            display: none;
        }

        .nav__links {
            position: absolute;
            top: 100%;
            right: 0;
            flex-direction: column;
            gap: 0;
            display: none;
        }

        .nav__links li {
            width: 100%;
            height: 5.8rem;
            animation: animateNavItems 400ms linear forwards;
            transform-origin: top right;
            opacity: 0;
        }
        
        .nav__links li:nth-child(2) {
            animation-delay: 200ms;
        }
        
        .nav__links li:nth-child(3) {
            animation-delay: 400ms;
        }
        
        .nav__links li:nth-child(4) {
            animation-delay: 600ms;
        }
        
        .nav__links li:nth-child(5) {
            animation-delay: 800ms;
        }

        .nav__links li:nth-child(6) {
            animation-delay: 1000ms;
        }
        
        .nav__links li:nth-child(7) {
            animation-delay: 1200ms;
        }
        
        
        @keyframes animateNavItems{
            0% {
                transform: rotateZ(-90deg) rotateX(90deg) scale(0.1);
            }
        
            100% {
                transform: rotateZ(0) rotateX(0) scale(1);
                opacity: 1;
            }
        
        }


        .nav__links li a {
            background: var(--color-bg-4);
            height: 100%;
            width: 100%;
            display: flex;
            align-items: center;
            padding: 1rem 5rem 1rem 3rem;
            border-top: 1px solid var(--color-bg-2);

  }


      .nav__links li a:hover {
        background: var(--color-primary);
        color: var(--color-bg-1);
   }


        .nav__toggle-btn {
            display: inline-block;
            font-size: 2rem;
            background: transparent;
            cursor: pointer;
            color: var(--color-white);
        }


        #nav__toggle-close {
            display: none;
        }

    




  /* ============================ HEADER =========================*/


    header {
        height: fit-content;
        padding: 12rem 0 10rem;
        display: grid;
        place-items: center;
        
    }

    .header__image-bg, .header__image-sm {
        display: none;
    }
    
    .header__container {
        grid-template-columns: 40% 54%;
        gap: 6%;
        margin: 0;

    }

    .header__image-lg {
        filter: saturate(1) brightness(1);
        border: 1rem solid var(--color-bg-2);
        overflow: hidden;
        width: 100%;
        top: 0;
        left: 0;
        /* ====border-radius: 15rem 15rem 0 0;========*/

    }


    .empty {
        display: none;
    }

    .header__tag {
        margin-bottom: 1rem;
    }

    .header__right p {
        width: 100%;
        margin-top: 1.5rem;
    }

    .header__frames, .contact__btn {
        display: none;
    }

    .header__btn-md {
        background: linear-gradient(135deg, var(--color-primary-variant), var(--color-primary));
        color: var(--color-bg-1);
        margin-top: 2rem;
        display: inline-block;
        padding: 0.6rem 1.6rem;
        font-weight: 600;
        border-radius: 0.3rem;
    }

    .header__btn-md:hover {
        color:var(--color-bg-1);
    }




  /* ============================ About =========================*/

    .about__container{
        grid-template-columns: 40% 54%;
        gap: 6%;
     }

     .about__image-bg, .about__image-sm {
        display: none;
     }

     .about__image-lg {
        left: 0;
        top: 0;
        filter: saturate(1) brightness(1);
     }

     .about__image:hover .about__image-lg {
        border: none;
     }


     .about__right {
        margin: 0;
     }

     .about__right p {
        margin-bottom: 1rem;
     }

    

  /* ============================ Gallery =========================*/


     .gallery {
        margin-top: 8rem;
     }

     .gallery__container p {
        width: 100%;
        margin-top: 2rem;
     }

     .swiper-wrapper {
        margin-top: 4rem;
        height: fit-content;
     }


    /* ============================ Exhibitions =========================*/

    .exhibitions__head > p {
        width: 100%;
        margin-top: 2rem;
    }

    .exhibitions__gallery {
        margin-top: 3rem;
        gap: 1rem;
    }

    .exhibitions__gallery article {
        border: none;
    }

    
    /* ============= Services Tablets ========================= */

    .services {
        margin-top: 0;

    }

    .service__container{
        grid-template-columns: 1fr 1fr;
    }


    .dervice__container p {
        width: 35rem;
        text-align: left;
        margin-top: 2rem; 
        margin-bottom: 2rem;
    }
    


/* ============= Skill Tablets ========================= */

    .skill {
        margin-top: -5rem;

    }
   

    .skill__container {
        margin-top: -2rem;
        gap: 5rem;
        row-gap: 2rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: center; /* Center content horizontally within the grid */
        align-items: center; /* Center content vertically within the grid */
        width: 25rem;
    }
    

    

    .zkill__container p{
        width: 100%;
        margin-top: 2rem;
    }
    
    
    #skilll {
        margin-top: -5rem;
    }

    .skilll__container p{
        width: 100%;
        margin-top: 2rem;
    }

    /* ============= Footer Tablets ========================= */

    .footer__container{
        grid-template-columns: 1fr 1fr;

    }
}


 /* ======================cv=================*/
 

  /* =======================================*/

/* ================= Media Queries (Mobiles) ======================*/

@media screen and (max-width: 600px){
    h1, h2 {
        font-size: 2rem;
        line-height: 1.3;
        color: var(--color-white);

    }

    header {
        padding: 0;
        padding-bottom: 6rem;
    }

    .header__container {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }

    .header__image-lg {
        width: 80%;
        height: 26rem;
        margin: 0 auto;
        margin-top: 7rem;
        overflow: hidden;
        

    }
   
    .header__head {
        justify-content: center;
    }

    .header__right p {
        margin-top: 1rem;
    }

    .header__title {
        margin-top: 1rem;
    }

/* ================= About (Mobiles) ======================*/

#about {
    margin-top: 8rem;
    
}
    .about__container{
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 8rem;
    }

    .about__right p{
        width: 100%;
    }

    .swiper-slide{
        border: 0;
    }



/* ================= Gallery (Mobiles) ======================*/

#gallery {
    margin-top: 9rem;
}

.gallery__container p{
    margin-top: 1rem;
}

.swiper-wrapper{
    margin-top: 3rem;
}



/* ================= Exhibitions (Mobiles) ======================*/

#exhibitions {
    margin-top: -2rem;
}

.exhibitions__head {
    grid-template-columns: 1fr;
}

.exhibitions__head > p {
    margin-top: 1rem;
}

.exhibitions__gallery {
    display: block;
}

.exhibitions__gallery article {
    width: 100%;
    height: fit-content;
    margin-bottom: 1rem;
}


/* ============= Service Mobiles ========================= */

.service__container{
    grid-template-columns: 1fr;
}

.dervice__container p {
    width: 26rem;
    text-align: left;
    margin-top: 2rem; 
    margin-bottom: 2rem;
}

/* ============= cv ========================= */



/* ============= Footer Mobiles ========================= */

.footer__container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
}

.footer__1 p {
    margin: 1rem auto;
}

.footer__socials {
    justify-content: center;
}



}