@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Courgette&family=Dancing+Script:wght@400;500;600&family=Josefin+Sans:ital@1&family=Permanent+Marker&family=Raleway:ital,wght@0,300;1,600&family=Roboto+Condensed:ital,wght@1,300&family=Tilt+Prism&display=swap');

     /*******************************variables********************************/
:root{
    /*******************************colors********************************/
    --MAIN-BG-COLOR: #0D4251;
    --MAIN-LOGO-COLOR: #2896A6;
    --DESCTOP-TEXT-FONT: 1.5rem;
}

    /*******************************reset********************************/
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
html {

    scroll-behavior: smooth;
}

body {
    font-family: 'Raleway', sans-serif;
    text-transform: capitalize;
    font-size: var(--DESCTOP-TEXT-FONT);
}

/*******************************header********************************/
/*******************************header********************************/
.header {
    display: flex; 
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--MAIN-BG-COLOR);
    height: 10vh;
    padding: 4.5rem 0;
}

.header__view-more {                    
    display: none;
}

/* .header__more {
    display: flex;
    flex-direction: column;
    margin: 0 20px;
}

.header__more button {
    width: 50px;
    margin: 5px;
} */

.header__logo {
    width: 350px;
}


.header__links a{
    color: white;
    text-decoration: none;
    padding: 0 1rem;
}

/*******************************main background swpier********************************/
.swiper{
    width: 100%;
    height: 100vh;
    background-color: #000;
}

.swiper-slide img{
    width: 100%;
    height: 100vh;   
    object-fit: cover;
}

.swiper .swiper-button-prev, .swiper .swiper-button-next {
    color: #fff;
}

.swiper .swiper-pagination{
    margin-bottom: 20px;
}

.swiper .swiper-pagination-bullet{
    padding: 8px;
}

.swiper .swiper-pagination-bullet-active{
    background-color: #fff;
}

.swiper-slide {
    position: relative;
}

.swiper-btn {
    position: absolute;
    left: 50%;
    bottom: 150px;
    transform: translateX(-50%);
    color: rgb(255, 255, 255);
    text-decoration: none;
    width: 300px;
    height: 70px;
    background-color: rgba(255, 255, 255, 0);
    border: 2px solid white;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0px;
}

.swiper-btn:hover {
    background-color: #fff;
    border-color: rgb(255, 255, 255);
    color: black;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .swiper-button {
        padding: 12px 25px;
        font-size: 1.1rem;
        bottom: 100px;
    }
}

/*******************************about us********************************/
.about-us {
    background: var(--MAIN-BG-COLOR);
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 30px;
    margin-bottom: 8rem;
}

.about-us__p {
    padding: 20px;
}

.border {
    border-bottom: 2px solid white;
    width: 10%;
    margin: 0 auto;
}


/*******************************scroll bar********************************/
 
::-webkit-scrollbar {
  width: 10px; 
  background-color: #000; 
}

::-webkit-scrollbar-thumb {
  background-color: var(--MAIN-LOGO-COLOR); 
  border-radius: 5px; 
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--MAIN-BG-COLOR); 
}

/*******************************main********************************/

/*******************************our projects********************************/
.main__projects {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin-top: 0rem;
}

.container {
    width: 60%;
    padding: 20px;
}

.row {
    display: flex;
    justify-content: space-between;
    height: 35vh;
    margin-bottom: 30px;
    gap: 30px;
}

.row1 .project1 {
    width: 35%;
}

.row1 .project2 {
    width: 65%;
}

.row2 .project2 {
    width: 35%;
}

.row2 .project1 {
    width: 65%;
}

.row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.5s ease-in-out;
}

.project_title {
      position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 25px;
    font-weight: bold;
    opacity: 0;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
}

.image-container:hover img {
    filter: brightness(30%);
}

.image-container:hover .project_title {
    opacity: 1;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    .main__projects {
        min-height: 70vh;
        margin-top: 3rem;
        margin-bottom: 5rem;
    }

    .container {
        width: 90%;
    }

    .row {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }

    .row1 .project1,
    .row1 .project2,
    .row2 .project1,
    .row2 .project2 {
        width: 100%;
    }

    .row img {
        height: 300px;
        filter: brightness(40%) !important; /* Force dark overlay by default */
    }

    .project_title {
        opacity: 1 !important; /* Force text to show by default */
        font-size: 2rem !important; /* Increased from 1.2rem to 1.8rem */
        font-weight: bold; /* Added bold to match desktop */
    }

    /* Disable hover effects by keeping the same state */
    .image-container:hover img {
        filter: brightness(30%) !important;
    }

    .image-container:hover .project_title {
        opacity: 1 !important;
    }
}

/***************************************** OUR PROJECT  /*****************************************/
        .original_desiner {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 70vh;
            margin-top: 3rem;
            margin-bottom: 5rem;
            transition: ease-in-out 3s;
        }


         .original_desines_container {
            width: 50%;
            padding: 20px;
        }
        .ODrow {
            display: flex;
            justify-content: space-between;
            height: 50vh;
            margin-bottom: 30px;
            gap: 30px;
        }

   
        .od_row1 .od_image-container {
            width: 50%;
        }
        .od_row1 .od2 {
            width: 50%;
        }
        .row2 .od2 {
            width: 25%;
        }
        .od_row2 .od2 {
            width: 75%;
        }
        .od_image-container {
            position: relative;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        .od_row1 .project1 img {
            height: 100%;
            width: 100%;
            display: block;
            object-fit: cover; /* Ensures images do not stretch */
        }
        .od_row1 .od1 img {
            height: 100%;
            width: 100%;
            display: block;
            object-fit: cover; /* Ensures images do not stretch */
        }

        .ODrow img {
            height: 100%;
            width: 100%;
            display: block;
            object-fit: cover;
            transition: ease-in-out 0.5s;
        }
        .od_title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 25px;
            font-weight: bold;
            opacity: 0;
            text-align: center;
            transition: opacity 0.3s ease-in-out;
        }
        .od_image-container:hover img {
            filter: brightness(0.5);
            transform: scale(1.05);
        }
        .od_image-container:hover .od_title {
            opacity: 1;
           
        }







        .footer {
            background-color: var(--MAIN-BG-COLOR);
            color: #fff;
            height: 15rem;
            margin-top: 8rem;
        }
        
        .footer_social-media__link:any-link {
            color: #fff;
            text-decoration: none;
        }
        
        .footer_social-media i {
            margin: 5px;
        }
        
        .footer__contact {
            text-align: center;
        }
        
        .footer__contact p {
            margin-bottom: 40px;
        }
        
        .footer__contact__link:any-link {
            color: #fff;
            text-decoration: none;
            border-bottom: 1px #fff solid;
            margin: 20px;
        }



        @media screen and (max-width: 768px) {
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1rem;
                position: relative;
                background-color: var(--MAIN-BG-COLOR);
                z-index: 10; /* Ensure header is above swiper */
            }
        
            .header__logo img {
                width: 150px; /* Smaller logo */
            }
        
            .header__view-more {
                display: block;
                background: none;
                color: white;
                font-size: 2.5rem;
                padding: 5px 10px;
                border: none;
            }
        
            .header__links {
                display: none; /* Initially hidden */
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--MAIN-BG-COLOR);
                text-align: center;
                padding: 1rem 0;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease, visibility 0.3s ease;
                z-index: 20; /* Ensure menu is above slider */
            }
        
            .header__links a {
                display: block;
                padding: 1rem;
            }
        
            .header__links.show {
                display: block;
                opacity: 1;
                visibility: visible;
            }


            .about-us {
                font-size: 1rem;
                padding: 1rem;
            }

            .original_desines_container {
                width: 90%;
                padding: 10px;
            }
        
            /* Stack the rows vertically */
            .ODrow {
                flex-direction: column;
                height: auto;
                gap: 20px;
            }
        
            /* Make each image container take full width */
            .od_row1 .od_image-container,
            .od_row2 .od_image-container {
                width: 100%;
            }
        
            /* Adjust the height of images to fit smaller screens */
            .ODrow img {
                height: 300px;
                filter: brightness(0.5) !important; /* Force dark overlay by default */
            }
        
            /* Adjust the font size of titles for smaller screens */
            .od_title {
                opacity: 1 !important; /* Force text to show by default */
                font-size: 1.8rem !important; /* Match the size we used in Our Projects */
                font-weight: bold;
            }

              /* Disable hover effects by keeping the same state */
            .od_image-container:hover img {
                filter: brightness(0.5) !important;
                transform: none !important; /* Prevent zoom effect on mobile */
            }

            .od_image-container:hover .od_title {
                opacity: 1 !important;
            }
        }
        
        
                
    
    
.main_projects_title {
    text-align: center;
    font-size: 35px;
    margin: 3rem auto;
    width: 100%;
    color: var(--MAIN-BG-COLOR);
    font-weight: bold;
    text-transform: uppercase;
}
    
    

   /* Update the image container styles */
   .image-container {
    position: relative;
    overflow: hidden;
}

/* Update the image styles to include zoom transition */
.row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-in-out; /* Changed to all for both filter and transform */
}

/* Update hover effects for images */
.image-container:hover img {
    filter: brightness(30%);
    transform: scale(1.1); /* Add zoom effect */
}

/* Keep the title styles but update transition */
.project_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 1.5rem;
    text-align: center;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    z-index: 2; /* Ensure text stays above image */
    width: 100%;
    padding: 0 10px;
}

/* Keep the title hover effect */
.image-container:hover .project_title {
    opacity: 1;
}

/* Update mobile styles */
@media screen and (max-width: 768px) {
    .main__projects {
        min-height: 70vh;
        margin-top: 3rem;
        margin-bottom: 5rem;
    }

    .container {
        width: 90%;
    }

    .row {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }

    .row1 .project1,
    .row1 .project2,
    .row2 .project1,
    .row2 .project2 {
        width: 100%;
    }

    .row img {
        height: 300px;
    }

    .project_title {
        font-size: 1.2rem;
    }
}

.swiper-slide {
    position: relative;
}



/* Mobile responsive */
@media screen and (max-width: 768px) {
    .swiper-button {
        padding: 12px 25px;
        font-size: 1.1rem;
        bottom: 100px;
    }
}