body {
    text-align: right;
    direction: rtl;
    background-color: #09001e;
    color: #fff;
    padding-top: 5%;
    font-family: "Rubik", sans-serif;
}
#loader {
  border: 16px solid #f3f3f3; /* צבע רקע */
  border-top: 16px solid #09001e;/* צבע של החלק המסתובב */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* אנימציה של סיבוב */
  position: fixed;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
}
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* צבע חצי שקוף כדי לחסום אינטראקציות */
    z-index: 10000; /* כדי להבטיח שזה יהיה מעל כל התוכן */
    display: none; /* מוסתר בהתחלה */
}


@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.loading #loader {
  display: block;
}

body:not(.loading) #loader {
  display: none;
}


.lora {
    font-family: "Lora", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.rubik{
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-weight:400;
    font-style: normal;
}
section {
    padding: 20px;
    margin: 20px;
    border-radius: 5px;
}

/* Navbar */
.navbar {
    background-color: rgba(9, 0, 30, 0.9);
    padding: 0.5rem 1rem;
    width: 100%;
}

.navbar-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand {
    display: flex;
    align-items: center;
    margin-right: 0;
}

#nav-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-left: 10px;
}

#nav-logo {
    height: 50px;
}

.navbar-nav {
    margin-left: auto;
}

.nav-link {
    font-size: 1em;
    color: #fff;
    padding: 0.5rem 1rem;
}

/* Hero Section */
.hero {
    color: #fff;
    padding-top:100px;
    padding-bottom:2px;
    background-size: cover;
}

/* Buttons */
.btn-custom {
    background-color: #09001e;
    border: solid;
    border-block-color: #fff;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1em;
    transition: background-color 0.3s;
}

    .btn-custom:hover {
        background-color: #0056b3;
    }

.floating-btn, .btn-custom {
    position: relative;
    z-index: 1;
}

/* Floating Buttons */
#floating-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;

}

.floating-btn-container {
    padding:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 150px;
}

.floating-btn {
    background-color: transparent;
    border: solid 2px #fff;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

    .floating-btn img {
        width: 200%;
        height: 150%;
        object-fit: cover;
        transition: all 0.3s ease;
    }

    .floating-btn:hover {
        transform: scale(2.0);
        z-index: 2;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    }

        .floating-btn:hover img {
            transform: scale(1.1);
        }

.floating-btn-text {
    margin-top: 10px;
    text-align: center;
    font-size: 0.9rem;
    color: #fff;
}
/* Popups */
.popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999; 
}

.popup-content {
    background-color: #09001e;
    color: #fff;
    width: 90%;
    max-width: 1000px;
    height: 90vh;
    margin: 5vh auto;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.popup-header {
    display: flex;
    justify-content: flex-start; 
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    direction: rtl;
}

.popup-title {
    font-size: 1.5rem;
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0; 
}
.popup-body {
    display: flex;
    height: calc(100% - 60px); 
}

.popup-video {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #09001e;
}

    .popup-video video {
        object-fit: cover;
        background-color: #09001e;
    }

video.video-1 {
  transform: scale(0.8); /* לדסקטופ */
}

video.video-2 {
  transform: scale(0.6); /* לדסקטופ */
}

video.video-3 {
  transform: scale(0.4); /* לדסקטופ */
}

video.video-4 {
  transform: scale(0.3); /* לדסקטופ */
}
video.video-5 {
  transform: scale(0.7); /* לדסקטופ */
}
video.video-6 {
  transform: scale(0.5); /* לדסקטופ */
}
video.video-7 {
  transform: scale(0.6); /* לדסקטופ */
}
video.video-8 {
  transform: scale(0.4); /* לדסקטופ */
}



.popup-text {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.popup-item {
    display: flex;
    align-items: center; 
    margin-bottom: 5px;
    direction: rtl;
}

    .popup-item img {
        width: 50px;
        height: 50px;
        margin-left: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .popup-item p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.5;
        text-align: right;
    }
#popup-programs .popup-content {
    overflow-x: hidden;
}

#popup-programs .popup-text {
    overflow-x: hidden;
}
#popup-programs .floating-btn {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    border: none;
    position: relative;
}

    #popup-programs .floating-btn img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        transition: transform 0.3s ease;
    }

    #popup-programs .floating-btn:hover img {
        transform: scale(1.1);
    }
/* Styles for the studio logos container */
.studio-logos-container {
  
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
    margin-top: 20px;
    overflow-x: auto;
    padding: 10px 0;
}

/* Styles for each studio logo item */
.studio-logo-item {
    width: 80px;
    height: 80px;
    min-width:80px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #09001e, 0 0 0 4px #fff;
    position: relative; /* Added for absolute positioning of the image */
}

    /* Styles for the studio logo images */
    .studio-logo-item img {
        position: absolute; /* Position absolutely within .studio-logo-item */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* Center the image */
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* Testimonials Section */
.testimonials {
    margin-top: 100px;
    background-color: rgba(9, 0, 30, 0.8);
    padding: 50px 0;
    color: #fff;
    position: relative;
}

.testimonials-title {
    font-size: 2.5em;
    margin-bottom: 40px;
    font-weight: bold;
    text-align: center;
}

.testimonial {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px; /* Increased max-width for more text space */
    margin: 0 auto;
    padding: 20px;
}

.testimonial-image-container {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    overflow: hidden; /* Added to contain the scaled image */
  
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.profile-image {
   
    object-fit: cover;
}
.carousel-item img.or {
    object-fit: cover;
    object-position: center -100px;
}


.testimonial-content {
    text-align: center;
}

.client-name {
    font-size: 1.8em;
    margin-bottom: 5px;
    font-weight: bold;
}

.client-title {
    font-size: 1.2em;
    opacity: 0.8;
    margin-bottom: 10px;
}

.testimonial-text {
    font-size: 1.1em;
    line-height: 1.6;
    max-height: 300px; /* Set a max height */
    overflow-y: auto; /* Enable vertical scrolling if needed */
    padding-right: 10px; /* Add some padding for the scrollbar */
}

/* עיצוב לחצים במחשבים */
.carousel-control-prev,
.carousel-control-next {
    width: 10%;
    height: 10%;
    border-radius: 50%;
    opacity: 1;
    z-index: 10;
    background-color: rgba(9, 0, 30, 0.8); /* צבע הרקע */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: transparent;
    width: 100%;
    height: 100%;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}


.carousel-item {
    z-index: 1;
}

/* Custom scrollbar for webkit browsers */
.testimonial-text::-webkit-scrollbar {
    width: 5px;
}

.testimonial-text::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.testimonial-text::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
}

/*studio section*/
#studios {
    background-color: #09001ee6;
    color: #fff;
 
    height: 400px;
}

    #studios .row {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        margin: 0 -15px; /* Negative margin to counteract container padding */
    }

    #studio .studio{
        flex: 0 0 25%;
        max-width: 25%;
        padding:100px;
        margin-bottom: 30px;
    }

    #studio .logo-wrapper {
        background-color: #fff;
        color: #09001e;
        padding: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }



 #studios img {
    border-radius: 50%; 
    border: 2px solid #fff; 
    padding: 5px; 
    width: 200px; 
    height: 200px; 
    object-fit: cover;
    }

    #studios p {
        margin-top: 15px;
        font-size: 1rem;
        color: #fff;
        text-align: center;
    }

/* Social icons container */
.social-icons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

/* Individual social icon styling */
.social-icon {
    background-color: #25D366; /* Default background color */
    border-radius: 50%; /* Round shape */
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    text-decoration: none;
    transition: transform 0.3s ease; /* Smooth scaling on hover */
}

/* SVG styling for icons, ensuring they fill their container equally */
.social-icon svg {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* Instagram specific styling */
.social-icon.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* TikTok specific styling */
.social-icon.tiktok {
    background-color: #000000;
     transform: scale(1.08);
}

.social-icon.tiktok svg path {
    fill: #ffffff;
}

.social-icon.tiktok:hover {
    background: linear-gradient(to right, #00f2ea, #ff0050);
}

.social-icon.tiktok:hover svg path {
    fill: #000000;
}

/* WhatsApp button hover effect */
.social-icon:hover {
    transform: scale(1.1); /* Icon enlarges on hover */
}

.whatsapp-button {
    background-color: #25D366;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
}

.whatsapp-button svg {
    width: 30px;
    height: 30px;
}

.whatsapp-button:hover {
    background-color: #128C7E;
}


/* Contact Form */
#contactForm {
    width: 60%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

#contact {
    padding-top: 50px;
    margin-top: 50px;
}

input::placeholder,
textarea::placeholder {
    text-align: right;
}

.form-control {
    direction: rtl;
    text-align: right;
}

/* Modal and Carousel */
.modal-dialog {
    width: 80%;
    max-width: 850px;
    margin: 0 auto;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 1rem);
}

.modal-content {
    width: 100%;
    height: auto;
    background-color: #09001e;
}

.carousel {
    width: 100%;
   /* height: 400px;*/
}

.carousel-inner {
    height: 100%;
}



    .carousel-item img {
        width: 100%;
        height: 270px;
        object-fit: cover;
    }



/* Video Background */
.video-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 0;
    padding-bottom: 33.75%;
    overflow: hidden;
    z-index: -2;
}
video::-webkit-media-controls {
    display: none !important; 
}


@media (max-width: 768px) {
    video {
        pointer-events: none; 
    }
}

#video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

.content-wrapper {
    position: relative;
    z-index: -1;
    background-color: rgba(9, 0, 30, 0.7);
}

/* Footer */
footer {
    background-color: #09001e;
    padding: 10px 0;
}

    footer p {
        margin: 0;
    }
    
/* Media Queries */
@media (min-width: 992px) {
    .navbar-expand-lg {
        justify-content: space-between;
    }

    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }
 
    .popup-title {
    font-size: 1.5rem;
    margin: 0;
    margin-right: 47%; 
}
    

}

@media (max-width: 768px) {
     #loader {
  border: 16px solid #f3f3f3; /* צבע רקע */
  border-top: 16px solid #09001e; /* צבע של החלק המסתובב */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* אנימציה של סיבוב */
  position: fixed;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
}
#loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* צבע חצי שקוף כדי לחסום אינטראקציות */
    z-index: 10000; /* כדי להבטיח שזה יהיה מעל כל התוכן */
    display: none; /* מוסתר בהתחלה */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

body.loading #loader {
  display: block;
}

body:not(.loading) #loader {
  display: none;
}
    .popup-content {
        width: 95%;
        height: auto; /* במקום גובה קבוע, הפופ אפ יגדל בהתאם לתוכן */
        max-height: 95vh; /* עדיין נוודא שהוא לא יעלה על 95% מגובה המסך */
        margin: 2.5vh auto;
        position: relative;
        overflow-y: auto; /* מאפשר גלילה אם התוכן גדול יותר */
    }
    
    .popup-body {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .popup-video {
        width: 100%;
        height: auto;
        max-height: 60vh; /* הגדלנו ל-60vh כדי שהסרטון ייראה גדול יותר */
        object-fit: cover; /* הסרטון יתפרס על פני המסך וישמור על הפרופורציות */
        margin-bottom: 20px;
    }
video.video-1 {
  transform: scale(0.35); 
}

video.video-2 {
  transform: scale(0.3); 
}

video.video-3 {
  transform: scale(0.2); 
}

video.video-4 {
  transform: scale(0.17); 
}
video.video-5 {
  transform: scale(0.30); 
}
video.video-6 {
  transform: scale(0.25); 
}
video.video-7 {
  transform: scale(0.30); 
}
video.video-8 {
  transform: scale(0.25); 
}
    .popup-text {
        overflow-y: auto;
        z-index: 200;
    }

    .popup-item {
     margin-bottom: 15px;
     padding: 10px;

    }

    .popup-item img {
        width: 40px;
        height: 40px;
    }

    .popup-item p {
        font-size: 0.9rem;
    }

    #popup-programs .floating-btn-container {
        padding: 10px;
    }

    #popup-programs .floating-btn {
        width: 100px;
        height: 100px;
    }

    #popup-programs .floating-btn-text {
        font-size: 0.8rem;
    }

    #popup-programs .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        z-index: 1;
        margin-top: 20px;
        gap: 10px;
    }

    #popup-programs .col-12 {
        flex: 0 0 48%;
        max-width: 48%;
        margin-bottom: 15px;
    }

    body {
        font-size: 16px;
    }

    h2 {
        font-size: 1.8rem;
    }

    .popup-title {
        font-size: 1.3rem;
    }
    h2.popup-title{
     margin-right:5%;

    }

    section {
        padding: 15px;
        margin: 15px 0;
    }

    #contact {
        padding-top: 50px;
    }

    #contactForm {
        width: 90%;
    }

    .form-control {
        font-size: 16px;
        padding: 10px;
    }

    .social-icons {
        bottom: 10px;
        right: 10px;
    }

    .social-icon {
        width: 50px;
        height: 50px;
    }

  .social-icon svg {
    width: 100%;
    height: 100%;
    max-width: 25px;
    max-height: 25px;
}

    #studios {
        height: auto;
        padding: 30px 0;
    }

    #studios .logo-wrapper {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #studios img {
    border-radius: 50%; 
    border: 2px solid #fff; 
    padding: 5px; 
    width: 120px; 
    height: 120px; 
    object-fit: cover;
    }

    #studios .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    #studios .studio {
        flex: 0 0 48%;
        max-width: 48%;
        margin-bottom: 15px;
    }

    #studios .logo-wrapper {
        height: auto;
    }

    .popup .close-btn {
        position: absolute;
       
        right: 0;
        z-index: 300;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 10px;
        border-radius: 50%;
        color: white;
        font-size: 20px;
    }
 
}

@media (max-width: 576px) {
    #studios .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    
    #studios .studio {
        flex: 0 0 48%;
        max-width: 48%;
        margin-bottom: 15px;
    }
    
    #studios .logo-wrapper {
        height: 120px;
    }

    #studio img {
        padding: 2px;
    }

    #popup-programs .popup-body {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #popup-programs .popup-video {
        width: 100%;
        height: auto;
        max-height: 60vh; /* העלינו את הגובה ל-60vh כדי שהסרטון יוצג טוב יותר */
        object-fit: cover; /* שמירה על פרופורציות הסרטון */
        margin-bottom: 20px;
    }

    #popup-programs .row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        z-index: 1;
        margin-top: 20px;
        gap: 10px;
    }

    #popup-programs .col-12 {
        flex: 0 0 48%;
        max-width: 48%;
        margin-bottom: 15px;
    }

    .popup-content {
        position: relative;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    button.carousel-control-next,
    button.carousel-control-prev {
        display: none !important; /* מבטיח שהחצים יוסתרו לחלוטין */
        visibility: hidden !important; /* מוודא שהחצים מוסתרים */
    }
}