/* General Styles */
:root {
    --font-primary: 'Avenir', 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: 'Poppins', sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-primary);
}


.headContainer {
    display: flex;
    background-color: #022539;
    font-size: large;
    height: 40px;
    color: white;
    justify-content: center;
    align-items: center;
    width: 100%; /* Take full width of the page */
    padding: 10px 20px;
    font-family: 'Azonix', Arial, sans-serif;
    
}
.contactInfo {
    display: flex;
    gap: 20px; /* 20px space between telephone and email */
    align-items: center;
}

.teleicon {
    gap: 10px;
    display: flex;
    margin-left: 10px;
    font-family: var(--font-secondary);
}

.mailfont {
    padding-left: 10px;
    font-family: var(--font-secondary);
    color: white;
}
.mailicon{
    padding-bottom: 10px;
}
.headContainer a {
    text-decoration: none;
    color: white;
    font-family: var(--font-secondary);
}

.socialbar {
    list-style: none;
    display: flex;
    gap: 10px;
    padding: 0; /* Remove padding */
    margin: 0;
    padding-bottom: 12px; 
}

.socialbarContainer {
    display: flex;
    justify-content: flex-end; /* Align "Follow Us" section to the right */
    align-items: center;
    gap: 10px;
    padding-right: 70px;
}

.icon {
    height: 15px;
    padding-top: 18px;
}

.socialbarContainer span {
    font-family: var(--font-secondary);
    color: black;
}

.hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: black;
    position: absolute;
    right: 80px;
}

/* Mobile view */

.navbar {
    background: white; /* Navbar background */
    padding: 10px 20px;
    display: flex;
    justify-content: flex-end; /* Align items to the left */
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.nav-links li {
    position: relative;
}

.nav-links a {
    text-decoration: none;
    color: black; /* Default text color */
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #2e8199; /* Change text color to blue */
}

.nav-links a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background: #fba538; /* Underline color */
    bottom: 0; /* Position the underline closer to the text */
    left: 0;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%; /* Expand underline */
}

.logo{
    height: 70px;
    padding: 10px 0px 0px 0px;
    margin-left: 50px;
}
.menubar{
    display: flex; /* Use flexbox layout */
    justify-content: space-between; /* Space between the logo and the nav links */
    align-items: center; /* Vertically center the content */
    padding: 10px 20px;
}

.button{
    background: linear-gradient(to right, #0A73A0, #28B9B2);
    border:none;
    color: white;
    height: 30px;
    width: 90px;
    border-radius: 25px;
    font-family: var(--font-secondary);
}
.backimg{
    background-image: url("assets/website\ front\ page-02-01-01.jpg"); /* Specify the image file */
    background-size: cover; /* Cover the entire div */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    width: 100%; /* Set width of the div */
    height: 600px; /* Set height of the div */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.coverText{
    width: 500px;
}
.yellowText{
    color:#fb991c;
    letter-spacing: 5px;
}

.blueText{
    color: #0A73A0;
    font-weight: bold;
    font-family: var(--font-secondary);
    font-size: 32px;
    align-content: flex-start;
}

.blackFont{
    color: black;
    font-family: var(--font-secondary);
    letter-spacing: 2px;
    font-size: 16px;
}

.blackFnt{
    color: black;
    font-family: var(--font-secondary);
    letter-spacing: 2px;
    font-size: 12px;
}
.playicon{
    height: 35px;
}
.btnAndPlaybtn{
    display: flex;
    gap: 20px;
    align-items: center;
}
.watchVideo{
    color: #0A73A0;
    height: 30px;
    align-items: center;
    align-content: center;
    padding-bottom: 10px;
    display: flex;
}

.backimg,.aboutUsContainer{
    position: relative;
}

.coverText{
    position: relative;
}

.image,.aboutUs{
    position: relative;
}

.logo3 {
    height: 55px;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 15px;
}

.logo2 {
    height: 55px;
    padding-left: 0px;
    padding-top: 10px;
    padding-bottom: 15px;
}

.number {
    font-weight: bold;
    font-size: 25px;
    margin: 0;

}

.persons {
    font-size: 13px;
    margin: 0;
}

.thirdDiv {
    position: absolute; /* Positioned relative to container2 */
    top: 65%;
    left: 50%;
    transform: translate(-50%, -210%); /* Center it at the intersection */
    z-index: 3; /* Ensure it appears above div1 and div2 */
    height: 200px;
    box-shadow: 0 4px 8px 6px rgba(0, 0, 0, 0.1);
    border: none;
    width: 800px;
    border-radius: 20px;
    padding: 20px 0px 0px 70px;
    margin-bottom: 20px;
    font-family: var(--font-secondary);
    background-color: white;
}

.thirdDiv li div {
    display: flex;
    flex-direction: column; /* Align content inside the div */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text within the div */
}

.thirdDiv ul {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-content: center;
}

.thirdDiv li {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 5px; /* Reducing the gap to decrease spacing between 'persons' and 'number' */
}

.thirdDiv li .number {
    font-weight: bold;
    font-size: 25px;
}

.thirdDiv li .persons {
    font-size: 16px;
    font-weight: bold;
}

.aboutUsContainer{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 250px;
    padding: 20px; 
    z-index: 0;
    margin-left: 10px;
    padding-top: 10px;
    margin-top: 60px;
}
.container {
    position: relative; /* Ensure children are positioned relative to this */
    width: 300px; /* Set width of the container */
    height: 250px; /* Set height of the container */
    margin: 50px auto; /* Center the container for demonstration */
}

/* Background Div */
.backgroundDiv {
    background-color: #FBF3F1; /* Light background color */
    width: 350px; /* Match the width of the container */
    height: 290px; /* Match the height of the container */
    position: absolute; /* Position within the container */
    top: 0;
    left: 0;
    z-index: 1; /* Place below the foreground image */
    border-radius: 0px; /* Optional rounded corners */
}

/* Foreground Div with Image */
.foregroundimg {
    background-image: url("assets/christin-hume-hBuwVLcYTnA-unsplash.jpg"); /* Add your image path */
    background-size: cover; /* Ensure the image covers the div */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent repeating */
    width: 360px; /* Adjust size of the image div */
    height: 290px; /* Adjust size of the image div */
    position: absolute; /* Position within the container */
    top: -30px; /* Move upwards */
    right: -90px; /* Move rightwards */
    z-index: 2; /* Place above the background div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for a floating effect */
    border-radius: 0px; /* Optional rounded corners for the image */
}
.image{
    margin-top: 90px;
    margin-left: 30px;
}
.fontStyle1{
    color: #003560;
    font-weight: bold;
    font-family: var(--font-secondary);
    font-size: 35px;
    letter-spacing: 2px;
}
.fontStyle2{
    color: #474747;
    font-size: 25px;
    letter-spacing: 4px;
    font-weight: bold;
    font-family: var(--font-secondary);
}
.fontStyle3{
    color:#7a7979;
    font-family: var(--font-secondary);
    line-height: 25px;
    
}

.aboutUs{
    height: auto;
    width: 650px;
    z-index: 0;
}

.servicesContainer {
    margin-top: 25px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.services ul {
    list-style: none;
    gap: 45px;
    display: flex;
    flex-direction:row; /* Stack items in a column */
    align-items: center;
    justify-content: center;
    text-align: left;
    margin-top: 35px;

}


.services li {
    border: 1px solid rgb(223, 223, 223);
    height: auto;
    width: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    align-content: flex-start;
    padding-left: 10px;
    padding-top: 20px;
}

.serviceFont1 {
    font-family: var(--font-secondary);
    color: black;
    font-weight: bold;
    text-align: left;
    font-size: 18px;
}

.services li .custom-bullet {
    display: block;
    list-style-type: disc;
    padding-left: 20px;
    margin-top: 5px;
    font-family: var(--font-secondary);
}

.services .custom-bullet li {
    border: none;
    box-shadow: none;
    width: auto;
    padding-left: 10px;
    font-size: 14px;
    color: #7a7979;
    line-height: 1.6;
    list-style-type: disc;
}

.showPopupButton {
    cursor: pointer;
}

.serviceIcon {
    height: 50px;
    margin-bottom: 20px;
}

.serviceButton {
    width: calc(100% + 10px);
    margin: 0 -10px;
    height: 40px;
    font-family: var(--font-secondary);
    background: linear-gradient(to right, #0A73A0, #28B9B2);
    border: none;
    border-radius: 0 0 10px 10px;
    color: white;
    font-size: small;
    margin-top: 20px;
}

.digitalExperienceContainer{
    position: relative; 
    width: 100%; 
    height: 600px;
    background-image: url("assets/digitalExp2.jpg");
    background-repeat: no-repeat;
    overflow: hidden;
    background-size: cover;
    margin-top: 60px;
    
}
.digitalExp{
    position: absolute; /* Position relative to the outer div */
    right: 0; /* Align to the right of the outer div */
    top: 50%; /* Center vertically */
    transform: translateY(-70%); 
    height: 200px;
    width: 540px;
    font-family: var(--font-secondary);
    padding-right: 200px;
}
.fontStyle4{
    font-size: 35px;
    font-weight: bold;
}
.fontStyle5{
    font-size: 15px;
}
.whyEyalContainer{
    display:flex;
    width: 100%;
    height:auto;
    padding: 20px;
    font-family: var(--font-secondary);
    gap: 50px;
    margin-top: 50px;
}
.percentIcon{
    height: 20px;
}
.leftHalf,.rightHalf{
    flex:1;
    padding:20px;
}
.rightHalf{
    display: grid;
    row-gap: 50px;
    column-gap:50px;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
    margin-right: 40px;
}
.gridItem{
    display: flex;
    flex-direction: column;
    border: none;
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1);
    padding: 10px;
    border-radius: 25px 0 25px 0;
    height: auto;
    padding-top: 25px;
    padding-left: 20px;
    font-size: 15px;
    
}

.definition{
    font-size: 14px;
    color:#474747;
    text-align: justify;
    padding: 10px;
}

.serviceTitle{
    font-size: 20px;
}

.item{
    display:flex;
    align-items: center;
    gap: 10px;
    
}

.fontStyle6{
    color: #003560;
    font-size: 40px;
    letter-spacing: 1px;
    margin: 0;
    padding: 0;
}

.eyalMedia{
    color:black;
    letter-spacing: 2px;
    
    font-family: 'Azonix', sans-serif;
}

.fontStyle7{
    color: #474747;
    font-size: 20px;
    letter-spacing: 5px;
}

.fontStyle8{
    font-family: var(--font-secondary);
    text-align: justify;
    line-height: 22px;
    color: #7a7979;
   
};

.button1{
    background: linear-gradient(to right, #0A73A0, #28B9B2);
    border: none;
    color: white;
    height: 35px;
    border-radius: 18px;
    width: 120px;
    font-family: var(--font-secondary);
}



.button2 {
    width: 120px;
    height: 35px;
    border: 2px solid transparent; /* Define the border width */
    border-image: linear-gradient(to right, #0A73A0, #28B9B2); /* Gradient colors */
    border-image-slice: 1;
    background-color: white;
    background: linear-gradient(to right, #0A73A0, #28B9B2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--font-secondary);
    
}
.buttons{
    display: flex;
    gap: 20px;
}

.adjustment{
    padding-top: 30px;
}

.clients{
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.clientLogoContainer {
    display: flex;
    justify-content: center;
    align-items: center;
   
    padding: 20px 0;
}

.clients p{
    padding: 0;
    margin: 0;
}
.clients hr{
    height: 2px;
    background-color: #022539;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    padding-top: 10px;
}

.clients .line{
    height:2px;
    padding-top: 5px;
}


.logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 3 columns for the 3x3 layout */
    grid-template-rows: repeat(2, auto); /* 3 rows */
    gap: 50px; /* Space between the grid items */
    width: 90%;
    max-width: 1000px; /* Constrain the container width */
}

/* Style each logo item */
.clientLogo {
    width: 100%;
    height: auto;
    max-height: 150px; /* Scale logos uniformly */
    object-fit: contain;
    display: block;
}

#lixoLogo{
    height: 35px;
    padding-top: 55px;
}

#royalLogo{
    height: 75px;
    padding-top: 20px;
}

#jemiLogo{
    height: 65px;
    padding-bottom: 10px;
    padding-top: 35px;
}



/* Define the animation */

.management {
    display: flex;
    justify-content: center;
    gap: 10px; /* Reduce spacing between boxes */
    margin: 0; /* Remove extra space */
    padding: 0; /* Remove extra space */
    padding-left: 50px;
    padding-right: 50px;
    height: auto;
    margin-bottom: 100px;
}

.box1,.box3 {
    display: grid;
    grid-template-rows: auto auto; /* Separate headers and description */
    align-items: center;
    gap: 10px; /* Reduce spacing within the grid */
    padding: 0px; /* Tighten box padding */
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1);
    border-radius: 25px 0 25px 0;
    font-size: 15px;
    width: 400px;
    height: auto;
    background-color: white;
    margin: 0 auto; /* Center box horizontally and remove extra margins */
    transform: translateY(20px);
    padding-bottom: 20px;
}

.headers {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px; /* Reduce spacing between image and text */
    margin: 0;
    padding: 0;
}

.image {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0; /* Prevent the image from shrinking */
    margin: 0; /* Remove extra margins */
    padding: 20px;
    padding-top: 25px;
}

.roundedImage {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    object-fit: cover;
}

.nameAndRoles {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: 0; /* Remove extra margins */
}

.name, .role {
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove extra padding */
}

.description {
    font-size: 20px;
    color: #333;
    line-height: 1.4; /* Adjust spacing between lines */
    margin: 0; /* Remove default margins */
    padding: 5px 20px 0 10px; /* Tighten padding and align text */
    padding-left: 25px;
    text-align: justify;
    
}

.name p {
    font-family: var(--font-secondary);
    font-size: 24px; /* Adjust for better sizing */
    letter-spacing: 2px; /* Reduce letter-spacing */
    margin: 0;
    padding: 0;
}

.role p {
    font-family: var(--font-secondary);
    font-size: 14px;
    color: #474747;
    letter-spacing: 5px;
    margin: 0;
    padding: 0;
}

.description p {
    font-family: var(--font-secondary);
    font-size: 12px;
    padding-left: 10px;
    margin: 0;
    padding: 0;
}

.box2{
    display: grid;
    grid-template-rows: auto auto; /* Separate headers and description */
    align-items: center;
    gap: 10px; /* Reduce spacing within the grid */
    padding: 0px; /* Tighten box padding */
    box-shadow: 0 4px 8px 4px rgba(0, 0, 0, 0.1);
    border-radius: 25px 0 25px 0;
    font-size: 15px;
    width: 400px;
    height: auto;
    background-color: white;
    margin: 0 auto; /* Center box horizontally and remove extra margins */
    transform: translateY(-20px);
    padding-bottom: 20px;
}

.socialbarContainer2 {
    display: flex;
    justify-content: flex-end; /* Align "Follow Us" section to the right */
    align-items: center;
    gap: 10px;
    padding-right: 20px;
    
}
.bottomContainer {
    display: flex;
    flex-direction: column; /* Ensures the sections stack vertically */
    gap: 10px;
    padding: 20px 0 20px 40px;
    font-family: var(--font-secondary);
    font-size: 14px;
    background-color: #022539;
}

.bottomContact {
    display: flex;
    flex-direction:column;
    align-items: center;
    gap: 10px;
    padding: 0px 20px 0px 20px;
    color: white;
}

.btmNav p{
    transform: translate(5px,-15px);
}

.btmNav {
    display: flex;
    gap: 20px;
    width: 350px;
}

.btnMenuBar .btmNav p{
    margin-top: 30px;
}

.btnMenuBar {
    display: flex;
    flex-direction: row; /* Stack items vertically */
    gap: 130px; /* Spacing between sections */
    padding: 20px;
    background-color:#022539;
    color: white;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Add border to separate from .bottomContact */
}

.btnMenuBar p {
    margin: 0;
    padding: 0;
}

.list ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.list li{
    display: flex;
    flex-direction: row;
}


.btnMenuBar ul li {
    margin: 5px 0;
}
.icon1{
    height:25px;
    padding-top: 16px;
}

.eyalCont{
    width: 500px;
}

.eyalLogoAndText{
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    gap: 15px;
}

.logo1{
    height:120px;
}

.eyalText{
    font-size: 30px;
    letter-spacing: 4px;
    font-family: 'Azonix', sans-serif;
}

.eyalText2{
    color:#ffb85c;
    font-weight: bold;
    letter-spacing: 2px;
    font-family: 'Azonix', sans-serif;
}
.eyalContainer{
    text-align: justify;
    line-height: 25px;
}

.titles{
    font-size: 18px;
    font-weight: bold;
    color: #28B9B2;
}

.list a{
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
}

.list li {
    position: relative;
}
.list a:hover {
    color: #28B9B2; /* Change text color to blue */
}

.list a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background: #fba538; /* Underline color */
    bottom: 0; /* Position the underline closer to the text */
    left: 0;
    transition: width 0.3s ease;
}

hr {
    border: none; /* Remove default border */
    height: 1px; /* Set desired height */
    background-color: rgba(255, 255, 255, 0.1); /* Adjust color as needed */
    margin: 0; /* Remove extra spacing */
    padding: 0; /* Remove padding if present */
}

.address{
    font-size: 13px;
}

.foot{
    background-color: #1c7690;
    font-family: var(--font-secondary);
    padding-left: 30px;
    margin: 0;
    padding-top: 25px;
    align-items: center;
}

.footText{
    margin: 0;
    padding: 0;
    height: 50px;
    font-family: var(--font-secondary);
    color: white;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Pop-up form styles */
.popup-form {
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    width: 400px;
    position: relative; /* To position the close button */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
}

/* Close button styles */




/* Form field styles */
.popup-form input[type="text"],
.popup-form input[type="email"],
.popup-form input[type="tel"],
.popup-form select {
    width: 100%;
    border: none;
    border-bottom: 2px solid  #0A73A0;
    outline: none;
    margin: 10px 0;
    padding: 5px 0;
    font-size: 14px;
    font-family: var(--font-secondary);
}

.popup-form textarea {
    width: 80%;
    height: 100px;
    margin: 10px 0;
    border: 1px solid #0B7FAE;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    outline: none;
    resize: none;
}

.popup-form button {
    width: 100%;
    padding: 10px;
    background:#2e8199;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    margin-top: 15px;
}

.popup-form button:hover {
    background: #0B7FAE;
}

#showPopupButton{
    cursor: pointer;
}

#closePopupButton{
    width: 40px;
    height: 30px;
    padding-bottom: 30px;
    margin-left: 360px;
    background: none;
    color: #333;
    font-size: 20px;

}

#closePopupButton:hover {
    color: white;
    background-color: rgb(241, 42, 42);
}

@media only screen and (max-width: 768px) {
    .hamburger{
        display: block;
        top: 85px;
        right: 20px;
    }

    .menubar .logo{
        margin-left: 0px;
    }
    .navbar{
        gap: 20px;
    }

    .navbar .nav-links{
        gap: 20px;
        flex-direction: column;
        display: none;
        position: relative;
        right: 20px;
        top: 12px;
    }

    .navbar .nav-links.show-menu {
        display: block;
     }
     .navbar .nav-links.show-menu li{
        padding: 6px;
     }

    .headContainer {
        flex-direction: row;
        align-items: flex-start;
        font-size: 10px;
    }

    .headContainer .icon{
        height: 10px;
        padding-top: 10px;
    }

    .headContainer .contactInfo{
        gap: 0;
    }
    
    .headContainer .contactInfo p{
        padding-bottom: 0;
        margin-bottom: 0;
    }

   
    .headContainer .socialbar{
        flex-direction: row;
    }

    .contactInfo {
        flex-direction: column;
        align-items: flex-start;
    }

    .socialbarContainer {
        justify-content: flex-start;
    }
    .coverText{
        padding: 20px;
        position: relative;
        font-size: px;
        padding-right: 20px;
    }
    .backimg{
        height: 200px !important;
        width: 100% !important;
        border-radius: 4px;
    }

    .aboutUsContainer .thirdDiv {
        width: 90%;
        padding: 10px;
        height: 17%;
        transform:translate(-220px,-550px);
    }
    
    .aboutUsContainer .thirdDiv ul {
        flex-direction: row; /* Stack items vertically on smaller screens */
        gap: 20px;
        transform:translate(-20px,-15px);
    }
    
    .aboutUsContainer .thirdDiv li {
        flex-direction: column;
        text-align: center;
    }
    .aboutUsContainer .thirdDiv img{
        height: 35px;
    }

    .aboutUsContainer .thirdDiv li .number {
        font-size: 16px;
    }

    .aboutUsContainer .thirdDiv li .persons {
        font-size: 12px;
    }

    .aboutUsContainer .image{
        margin-top: 60px;
        transform: translateX(-50px);
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .aboutUsContainer {
        flex-direction: column; /* Stack items vertically */
        gap: 20px;
        margin-left: 10px;
        padding: 10px;
        padding-bottom: 0 ;
        margin-bottom: 0 ;
    }

    .aboutUsContainer .aboutUs{
        height: 100%;
        width: 100%;
        transform: translateY(10px);
        text-align: justify;
    }

    .servicesContainer .fontStyle1{
        font-size: 28px;
    }

    .servicesContainer .fontStyle3{
        font-size: 17px;
    }

    .servicesContainer {
        width: 100vw; /* Ensure it takes full viewport width */
        max-width: 100%; /* Prevent overflow */
        box-sizing: border-box; /* Include padding in width calculations */
        padding: 0; /* Remove any extra padding */
        margin: 0; /* Remove margin */
        margin-top: 60px;
    }

    .servicesContainer .services {
        width: 100%; /* Ensure full width */
        display: flex;
        flex-direction: column;
        align-items: center; /* Keep left alignment */
        padding: 0;
        margin: 0;
    }
   

    .servicesContainer .services ul {
        display: flex;
        flex-direction: column;
        width: 90%; /* Ensure the list takes full width */
        padding: 0;
        margin: 0;
        list-style-type: none; /* Remove default bullet points */
    }

    .servicesContainer .services li {
        width: 100%; /* Ensure list items stretch across full width */
        display: block; /* Ensure full-width behavior */
      
    }

    .servicesContainer .services .custom-bullet {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Keep text left-aligned */
        justify-content: flex-start;
        padding: 0;
        margin: 0;
    }

    .servicesContainer .services .custom-bullet li {
        width: 100%; /* Ensure list items take full width */
        margin: 0;
        padding: 3px 0; /* Reduce gap between list items */
        line-height: 1.1; /* Reduce line spacing */
        text-align: left; /* Ensure text alignment is left */
    }

    .servicesContainer .services .serviceIcon {
        max-width: 100%; /* Ensure images do not overflow */
        height:80px;
    }

    .servicesContainer .services .serviceFont1 {
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: 30px;
    }

    .servicesContainer .services .serviceButton {
        display: block;
        width: calc(100% + 10px);
        margin-top: 10px;
    }
  
    .whyEyalContainer{
        display: flex;
        flex-direction: column;
    }

    .whyEyalContainer .rightHalf{
        display: flex;
        flex-direction: column;
    }

    .management{
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }

    .management .box1{
      order: 1;
    }
    .management .box2{
      margin-top: 90px;
    }
    .management .box3{
      order: 2;
      margin-top: 40px;
    }

    .digitalExperienceContainer{
        background-image: none !important;
        background: linear-gradient(to bottom, rgb(202, 240, 253), white) !important;
        height: 350px !important;
        
    }  

    .digitalExp {
            right: auto; /* Reset right positioning */
            left: 10%; /* Move it to center horizontally */
            top: 40% !important;
            padding-right: 0; /* Remove excessive right padding */
            width: 90% !important; /* Adjust the width for smaller screens */
            
    }

    .digitalExp .fontStyle5{
        font-size: 14px !important;
        margin-right: 5% !important;
    }
    

    .digitalExp .fontStyle4{
        font-size: 30px;
        margin-right: 5% !important;
        font-weight: bold;
        
    }

    .clients .logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 3 columns for the 3x3 layout */
        grid-template-rows: repeat(3, auto); /* 3 rows */
        gap: 10px; 
        width: 90%;
        max-width: 400px; 
    }

    .bottomContainer {
        width: 100vw; /* Make it exactly the width of the viewport */
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align content to the left */
        text-align: left;
        padding-left: 16px; /* Add some padding for spacing */
        box-sizing: border-box; /* Ensure padding doesn't affect width */
    }

    .bottomContainer .bottomContact {
        margin-left: 0; /* Remove any previous left margin */
        align-items: flex-start; /* Align text and icons to the left */
        text-align: left;
    }

    .bottomContainer .btnMenuBar {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align buttons to the left */
        gap: 20px;
    }

    .bottomContainer .eyalCont {
        width: 100%;
        text-align: left;
    }

    .eyalContainer {
        font-size: 14px;
        text-align: left;
    }

    .bottomContainer .btnMenuBar .socialbarContainer2 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start !important; /* Keep icons aligned to the left */
    }

    .bottomContact {
        transform: translateX(-18px)
    }

    .bottomContact img{
        height: 18px;
    }

    .foot{
        width: 94vw;
    }

  

}