/* Basic Reset */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: Arial, sans-serif;

    line-height: 1.6;

    background-color: #f4f4f4;

    color: #333;

}



/* Header & Slideshow Styling */

header {

    position: relative;

    height: 90vh;

    overflow: hidden;

    top: 0;

    left: 0;

    right: 0;

}



.slideshow-container {

    position: relative;

    max-width: 100%;

    height: 100%;

}



.mySlides {

    display: none;

    position: absolute;

    top: 50%;

    left: 50%;

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

    width: 100%;

    height: 100%;

}



.mySlides img {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    margin: auto;

    position: absolute;

    top: 50%;

    left: 50%;

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

}



/* Text Box Styling */

.text-box {

    position: absolute;

    top: 10%; /* Adjust this value for more vertical margin */

    left: 50%; /* Center horizontally */

    transform: translate(-50%, 0); /* Center the text box */

    width: 80%; /* Set the width to 80% of the screen */

    max-width: 80%; /* Ensure no overflow on small screens */

    color: #fff;

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

    padding: 20px;

    border-radius: 8px;

    animation: fadeInDown 1.5s;

    direction: rtl;

    text-align: center;

}





.text-box h1 {

    font-size: 1.3rem;

    margin-bottom: 10px;

}



.text-box p {

    font-size: 1.2rem;

}



/* Slideshow Navigation */

.prev, .next {

    cursor: pointer;

    position: absolute;

    top: 50%;

    padding: 16px;

    color: white;

    font-weight: bold;

    font-size: 18px;

    transition: 0.6s ease;

    user-select: none;

}



.next {

    right: 0;

    border-radius: 3px 0 0 3px;

}



.prev {

    left: 0;

    border-radius: 0 3px 3px 0;

}



/* Animation for Slides */

.fade {

    animation: fade 1.5s;

}



@keyframes fade {

    from {opacity: 0.4;}

    to {opacity: 1;}

}



/* Fade-In Animation from Top Center */

@keyframes fadeInDown {

    0% {

        transform: translate(-50%, -100%); /* Start from off-screen at the top */

        opacity: 0;

    }

    100% {

        transform: translate(-50%, 0); /* End at the center */

        opacity: 1;

    }

}



/* Custom Font Sizes for Each Slide */

.mySlides:nth-child(1) .text-box h1 {

    font-size: 2rem; /* Adjust this size as needed */

}



.mySlides:nth-child(2) .text-box h1 {

    font-size: 1.7rem; /* Adjust this size as needed */

}



.mySlides:nth-child(3) .text-box h1 {

    font-size: 1.8rem; /* Adjust this size as needed */

}



.mySlides:nth-child(4) .text-box h1 {

    font-size: 1.6rem; /* Adjust this size as needed */

}



.mySlides:nth-child(5) .text-box h1 {

    font-size: 1.6rem; /* Adjust this size as needed */

}



.mySlides:nth-child(6) .text-box h1 {

    font-size: 1.7rem; /* Adjust this size as needed */

}



/* Specific Styling for Slide 7 */

.mySlides:nth-child(7) .slide7-text-box p {

    font-size: 2.5rem; /* Adjust this size for paragraphs */

}



.mySlides:nth-child(7) .slide7-text-box a {

    font-size: 3rem; /* Adjust this size for the phone number link */

}



/* Project Description */

.description {

    display: none;

    padding: 50px 0;

    background: #fff;

    text-align: center;

}



.description p {

    font-size: 1.1rem;

    max-width: 800px;

    margin: 0 auto;

}



/* Contact Section */

.contact {

    padding: 50px 0;

    background-color: #333;

    color: #fff;

    text-align: center;

    direction: rtl;

}



.contact ul {

    list-style: none;

    margin: 20px 0;

    padding: 0;

}



.contact ul li {

    margin: 10px 0;

}



.contact-info li:first-child {

    font-size: 1.5rem;

    font-weight: bold;

}



/* Footer */

footer {

    background: #222;

    color: #fff;

    text-align: center;

    padding: 20px 0;

}



footer p {

    margin: 0;

}



/* Responsive Styles */

@media only screen and (max-width: 768px) {

    header {

        height: 90vh;

    }



    .mySlides img {

        object-fit: cover;

        height: 90vh;

    }



    .text-box {

        top: 5%;

        padding: 10px;

        max-width: 90%;

    }



    .prev, .next {

        font-size: 14px;

        padding: 10px;

    }

}



/* To specifically target links inside .socials */

.socials a {

    color: #fff;

    margin: 0 10px;

    text-decoration: underline;

}



.socials a:hover {

    text-decoration: underline;

    color: #ccc;

}



/* For contact info links */

.contact-info a {

    color: inherit;

    text-decoration: underline;

}



.contact-info a:hover {

    text-decoration: underline;

}



/* Remove animation for slide 7 specifically */

.no-animation {

    animation: none;

}



/* Adjust slide 7 text box styling */

.slide7-text-box {

    position: absolute;

    top: 40%; /* Adjust this value for more vertical margin */

    left: 50%; /* Center horizontally */

    transform: translate(-50%, 0); /* Center the text box */

    width: 80%; /* Set the width to 80% of the screen */

    max-width: 80%; /* Ensure no overflow on small screens */

    color: #fff;

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

    padding: 20px;

    border-radius: 8px;

    animation: fadeInDown 1.5s;

    direction: rtl;

    text-align: center;

}



.phone-number a {

    font-size: 1.5em;  /* Adjust as needed */

    color: #fff;

    text-decoration: underline;  /* Remove underline */

}



.slide7-text-box p {

    margin: 10px 0; /* Add spacing between lines */

    font-size: 1.8rem; /* Adjust font size */

}



.slide7-text-box a {

    font-size: 2rem;

    font-weight: bold;

    color: inherit;

    text-decoration: underline;

}



@media only screen and (max-width: 768px) {

    .slide7-text-box {

        padding: 10px;

        max-width: 80%; /* Keep flexible on smaller screens */

    }

}