html, body {padding: 0; margin: 0;font-family: Arial; font-size: 16px; direction: rtl;} a{text-decoration: none;}
body{background-color: #083e5f;} .b{font-weight: bold;}
.dvtop{height: 155px;}
.dvsldr{display: flex; justify-content: center; align-items: center; height: 630px; margin: 0;background-color: #000;}



.bx1 {display: flex; justify-content: space-between; align-items: center; padding: 20px;}
.dvlc1 {flex: 1;}
.logo {max-width: 100%; height: auto;}
.dvc1 {flex: 2;text-align: center;}
.fnt01 {font-size: 24px;font-weight: bold;margin-bottom: 10px;}
.menu1 {margin-top: 10px;}
.menu1 a {margin: 0 15px; text-decoration: none;color: #fff;}
.menu1 a:hover {text-decoration: underline;}
.dvrc1 {flex: 1; text-align: right;}
.dvrc1 svg{fill: #f0910c;}
.social-icon {width: 30px; height: auto; margin-left: 10px;}




.image-grid-t {
    max-width: 1200px;
    padding: 5px; border-radius: 20px 20px 0px 0px;
    margin: 0 auto; text-align: center; margin-top: 45px;
    background-color: #f0910c; color: #fff;
}

.image-grid-t2 {
    max-width: 1200px;
    padding: 5px; font-size: 22px;
    margin: 0 auto; text-align: center;
    background-color: #fff; color: #000;
}

.image-grid-t2 div {padding: 25px;}

.image-grid {
    max-width: 1200px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Three columns */
    gap: 10px; /* Space between images */
    margin: 0 auto;
}

.image-container {
    position: relative;
    background-color: #fff; border-radius: 0px 0px 10px 10px;
    overflow: hidden; /* Hide overflow for the hover effect */
    cursor: pointer; /* Change cursor to pointer on hover */
}

.dv-grid {
    max-width: 1200px; padding: 10px; display: grid;
    grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin: 0 auto;
}

.dv2-grid {
    max-width: 1200px; padding: 10px; display: grid;
    grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin: 0 auto;
}

.dv-container{
    position: relative; padding: 35px; text-align: center; color:#fff;
    background-color: #f0910c; border-radius: 0px 0px 10px 10px; font-weight: bold;
    overflow: hidden;
}

.image-container img {
    width: 100%; /* Make images responsive */
    height: auto;
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

.image-container:hover img {
    transform: scale(1.1); /* Scale image on hover */
}

.overlay {
    text-align: center;
    background-color: transparent; /* Start with a transparent background */
    color: white; /* Text color */
    font-size: 24px; /* Font size */
    padding: 10px; /* Padding around the text */
    border-radius: 5px; /* Optional: rounded corners */
    transition: background-color 0.3s ease; /* Smooth transition for background color */
}

.overlay a{color: white;}

.image-container:hover .overlay {
    background-color: rgba(0, 0, 0, 0.5); /* Show semi-transparent background on hover */
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
    }
}

@media (max-width: 768px) {
    .image-grid {
        grid-template-columns: 1fr; /* One column for small screens */
    }

    .overlay {
        font-size: 20px; /* Slightly smaller text on smaller screens */
    }
}

.footer {
    background-color: #083e5f; /* Dark background for the footer */
    color: white; /* White text color */
    padding: 20px; /* Padding around the footer */
    text-align: center; /* Center text */
}

.footer-content {
    max-width: 800px; /* Max width for the footer content */
    margin: 0 auto; /* Center the footer content */
}

.line-1 {
    font-size: 24px; /* Larger font size for the name */
    margin-bottom: 10px; /* Space below the name */
}

.line-2 {
    padding-top: 15px; margin-bottom: 10px; /* Space below the WhatsApp line */
}


.line-3 {
    margin-bottom: 10px; /* Space below the social icons */
}

.line-3{padding: 34px 0px 10px 0px;}
.line-3 a svg{background-color: #fff;}
.social-icon {
    width: 24px; /* Set a fixed width for social icons */
    height: auto; /* Maintain aspect ratio */
    margin: 0 10px; /* Space between icons */
}

.line-4 {
    font-size: 14px; /* Smaller font size for copyright */
}

.slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
    background: #222;
  }
  .slides {
    display: flex;
    width: 100%; /* 4 slides width */
    animation: slideMove 16s linear infinite;
  }
  .slides img {
    width: 100%; object-fit: cover;
  }
  @keyframes slideMove {
    0% { transform: translateX(0); }
    29% { transform: translateX(0); }
    30% { transform: translateX(100%); }
    74% { transform: translateX(100%); }
    75% { transform: translateX(200%); }
    99% { transform: translateX(200%); }
    100% { transform: translateX(0); }
  }