:root {
    --white: rgba(255, 255, 255, 1);
    --gray-10: rgba(230, 230, 230, 1);
    --gray-20: rgba(203, 203, 203, 1);
    --gray-30: rgba(161, 161, 161, 1);
    --x-23-1f-20: rgba(35, 31, 32, 1);
    --bfd-730: rgba(191, 215, 48, 1);
    --x-7-8cdd-1: rgba(120, 205, 209, 1);
    --d-9d-9d-9: rgba(15, 85, 123, 1);
    --variable-collection-text-reg: rgba(55, 55, 55, 1);
    --variable-collection-color: rgba(255, 255, 255, 1);
}

.mainbg{
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
}

body {
    margin: 0;
    line-height: normal;
    font-family: Jost;
    
    }

    .bgcolor{
        background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 18px;
        font-weight: 900;
        }

    .logosize{
        width: 196px;
        height: 65px;
    }
     /* Custom Styles */
     .navbar-custom {
        backdrop-filter: blur(11px);
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 1000px;
        padding: 7px 10px;
        margin-top: 13px;
    }

    
    .maintitle{
        font-size: 20px !important;
        font-weight: 500;
        line-height: 19.36px;
        text-align: left;
        color: #000000 !important;
    }

    .maintitle-center{
        font-size: 20px !important;
        font-weight: 500;
        line-height: 19.36px;
        text-align: center;
        color: #000000 !important;
    }

    .banner {
        position: relative;
        height: 80vh;
        background-color: #fff;
    }

    .banner .img,
    .banner video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    .banner-content {
        position: absolute;
        top: 20%;
        left: 10%;
        z-index: 1;
        color: #fff;
        font-size: 3vw;
        font-weight: 500;
    }

    /* Video animation */
    @keyframes zoomIn {
        0% {
            transform: scale(0.5);
        }

        100% {
            transform: scale(4.7);
        }
    }

    .video-container video {
        animation: zoomIn 3s ease-in-out forwards;
        animation-delay: 1s;
    }

    .video-container video {
        width: 100%;
        position: relative;
        height: 160px;
    }


    /* Responsive adjustments */
    @media (max-width: 768px) {
        .banner {
            height: 60vh;
        }

        .banner-content {
            font-size: 5vw;
            top: 15%;
        }
    }

    .photo-2024-04-16-17-47-30-4 {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 650px;
}
.banner-child {
  position: absolute;
  top: calc(50% - 87px);
  left: calc(50% - 119px);
  width: 238px;
  height: 175px;
}
.when-values-lead {
  position: absolute;
  top: 142px;
  left: 69px;
  font-weight: 500;
}
.banner {
  width: 100%;
  position: relative;
  background-color: #fff;
  height: 703px;
  flex-shrink: 0;
overflow: hidden;
}
.component-2 {
  width: 100%;
  position: relative;
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  font-size: 97px;
  color: #0f557b;
}

.fixed-top {
position: absolute;
top: 15px;
right: 30px;
left: 30px;
z-index: 1030;
}

.cleartx{
    padding: 62px 0px 62px 0px;
    gap: 10px;
}

.slant-line1 {
    width: 1px;
    height: 105px;
    background-color: #BFD730;
    transform: skewX(-20deg);
    margin: 0 auto;
    z-index:9
}

.slant-line-index {
    width: 1px;
    height: 105px;
    background-color: #BFD730;
    transform: skewX(-20deg);
    margin: 0 13px 0 0;
    z-index: 9;
}




@media (max-width: 767.98px) {
    .slant-line1 {
        display: none;
    }
}


.home-second-section-title{
    font-weight: 500;
    color: var(--d-9d-9d-9);
    font-size: 36px;
}

.media-coverage title {
    font-weight: 500;
    font-size: 16px;
    line-height: 19.36px;
    margin-bottom: 20px;
}

.value-Create-title{
    font-size: 64px;
    font-weight: 500;
    line-height: 77.45px;
    text-align: left;
    color: #0F557B;
}

.value-Create-title-prev{
    font-size: 64px;
    font-weight: 500;
    line-height: 77.45px;
    text-align: left;
}

.media-second-column{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: #231F20;
}

.media-thrid-column{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: justify;
    height:0%;
}
.bussinessHeight{
    height: 502px;
    object-fit: fill;
}

/* .green-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
    border-radius: 50%;
    margin-left: 10px;
} */

.breadcrumbs {
    display: flex;
    align-items: center; /* Vertically centers the items */
}

.green-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
    border-radius: 50%;
    margin-left: 10px;
}


.roundrrrow {
    height: 50px;
    width: 52px;
    /* background-color: #dbdbdb; */
    border-radius: 50%;
    /* display: inline-block; */
    /* border: 1px solid black; */
    /* transition: background 0.3s ease-in-out, border 0.1s ease-in-out; */
}


.arrow-icon {
    width: 65px;
    position: relative;
    height: 65px;
    object-fit: contain;
}

.icon {
    display: inline-block;
    width: 65px;
    height: 65px;
    background-size: cover;
    border: 1.63px 0px 0px 0px;
    opacity: 0px;
}
.icon2 {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-size: cover;
    border: 1.63px 0px 0px 0px;
    opacity: 0px;
}

.icon3 {
    display: inline-block;
    width: 45px;
    height: 45px;
    background-size: cover;
    border: 1.63px 0px 0px 0px;
    opacity: 0px;
}

/* .icon-arrow {
    background-image: url(./img/Home/Arrow.png);
    animation-timing-function: ease-out;
    animation-duration: 300ms;
  transition: all 300ms ease-out;
} */

.icon-arrow1 {
    background-image: url('/assets/img/Home/Arrow.png');
}

/* .icon-arrow:hover,
.icon-arrow:focus {
    background-image: url(./icon/arrowbg1.png);
    border: 0px;
    border: 0px;
     transition: 1s, background-position 1s;
    transform: translatey(1px);
    transition: opacity 1.2s cubic-bezier(0.42, 0, 0.58, 1), border 1.2s cubic-bezier(0.42, 0, 0.58, 1); Smoother transition

} */

.icon-arrow {
    background-image: url(/assets/img/Home/Arrow.png);
    transition: all 300ms ease-out; /* General transition for smoother effect */
    animation-timing-function: ease-out;
}

.icon-arrow:hover,
.icon-arrow:focus {
    background-image: url(/assets/icon/arrowbg1.png);
    transform: translateY(1px); /* Small, smooth movement */
    opacity: 0.8; /* Optional: for smoother fade effect */
    /* Apply the transition timing to all necessary properties */
    transition: background-image 300ms ease-out, 
                transform 300ms ease-out, 
                opacity 300ms ease-out;
}



.icon-arrow1:hover,
.icon-arrow1:focus {
    background-image: url(/assets/img/Home/icontran.png);
    /* border: 0px;
    border: 0px;
    transition: opacity 1.2s cubic-bezier(0.42, 0, 0.58, 1), border 1.2s cubic-bezier(0.42, 0, 0.58, 1); Smoother transition */
    /* // While hovering */
    /* // Change to: "Default"; */
    /* // Animate: Smart animate; */
    animation-timing-function: ease-out;
    animation-duration: 300ms;
    
}



/* nav-pills */
.nav-link.active {
    
  }
  
  .nav-link {
    text-decoration: none; /* Ensure other tabs are not underlined */
  }

.nav-pills .nav-link.active {
    /* color: #231f20; */
    /* background-color: unset; */
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
}

.nav-pills .nav-link {
position: relative;
width: fit-content;
height: 45px;
display: flex;
flex-direction: row;
align-items: center;
/* justify-content: center; */
padding: 15px 10px;
box-sizing: border-box;
text-align: left;
font-size: 20px;
color: #231f20;
background-color: unset;
font-weight: 500;
}
.businessBg{
    background: #78CDD1;
    height: auto;
    background-image: url('/assets/icon/bussinessLine3.png');
    background-size: cover;   
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: top;

}
.card89{
    height: 247px;
    background: #BFD730;
}
.newscovg{
    height: 247px;
    background: #78CDD1;
}
.a-1-icon {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    top: 0px;
    left: 0;
    height: 100%;
    object-fit: cover;
  }
  .card89title{
    font-size: 36px;
    font-weight: 500;
    line-height: 43.57px;
    letter-spacing: -0.02em;
    text-align: left;
    margin-top: 31%;
  }

  .newscovgtitle{
    font-size: 29px;
    font-weight: 500;
    line-height: 43.57px;
    letter-spacing: -0.02em;
    text-align: left;
    margin-top: 31%;
  }

  .a-1-icon1 {
    width: 100%;
    position: absolute;
    margin: 0 !important;
    top: 1px;
    left: -3px;
    height: 82%;
  }
  .a-1-icon2 {
    width: 100%;
    position: relative;
    margin: 0 !important;
    top: -0px;
    left: 9px;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}

/* slider */
.media-coverage p {
    font-weight: bold;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.green-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
    border-radius: 50%;
    margin-left: 10px;
    /* Gap between text and dot */
}

.customer-logos .slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.customer-logos img {
    height: 36px;
    /* Maintain aspect ratio */
    vertical-align: middle;
    /* Align images vertically */
}

.customer-partner .slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.customer-partner img {
    /* height: 33px; */
    /* Maintain aspect ratio */
    vertical-align: middle;
    /* Align images vertically */
}


.customer-partner-csr .slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.customer-partner-csr img {
    /* height: 33px; */
    /* Maintain aspect ratio */
    vertical-align: middle;
    /* Align images vertically */
}


.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
}

.slick-list {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-track {
    display: flex;
    align-items: center;
}

.slick-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    /* Space between slides */
}

.slick-slide img {
    display: block;
}
/* ending slider */

ul.dropdown-menu.show{
    background: linear-gradient(45deg, rgb(255, 255, 255), rgb(255, 255, 255));
}

.dropdown-item.active, .dropdown-item:active {
    color: #ffffff;
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
    border-radius: 12px;
}
 
/* Hover effect for the SVG */
.values-card-img-top {
    height: 100px;
    width: 100px;
    padding-top: 40px;
    transition: transform 0.3s ease-in-out;
    -webkit-animation: tada 5s infinite linear;
    -moz-animation: tada 5s infinite linear;
    -o-animation: tada 5s infinite linear;
    animation: tada 5s infinite linear;
}
 


/* values section */
.value-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    /* Adjust the margin as needed */
    /* padding: 20px; */
    margin-bottom: 36px;
}
 
.left-content {
    max-width: 50%;
}
 
.breadcrumbs {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 10px;
}
 
.dot {
    color: #3ED220;
}
 
.title-section {
    display: flex;
    align-items: baseline;
}
 
.main-title {
    font-size: 64px;
    font-weight: 500;
    /* line-height: 87.68px; */
    text-align: left;
    color: #0F557B;
}
 
.subtitle {
    font-size: 32px;
    font-weight: 400;
    line-height: 43.84px;
    text-align: center;
}
 
.right-content {
    display: flex;
    align-items: center;
    max-width: 38%;
}
 
.slant-line-home {
    width: 1px;
    height: 100px;
    background-color: #70cace;
    transform: skewX(-20deg);
    margin-right: 20px;
    margin-top: -5%;
}

.slant-line {
    width: 1px;
    height: 100px;
    transform: skewX(-20deg);
    margin-right: 10%;
    margin-top: -7%;
    border: 0.5px solid #BFD730
}

.slant-line-investment{
    width: 1px;
    height: 130px;
    transform: skewX(-20deg);
    margin-right: 10%;
    margin-top: -7%;
    border: 0.5px solid #BFD730
}
 
 
.description {
    font-size: 1.125rem;
    color: #343a40;
    line-height: 1.6;
}
.vluesTitle{
    font-size: 21px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
}
.valueDescr{
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: left;
}


/* -----------------partner------------------------ */
.unique-partner-slider {
    display: flex; /* Align the slides in a row */
    overflow: hidden; /* Hide overflow if needed */
    padding: 10px 0; /* Add padding around the slider */
}
 
.unique-slide {
    flex: 0 0 auto; /* Prevent the slides from shrinking */
    margin: 5px 30px; 
}


 
.unique-card {
    border: 2px solid white; /* White border color */
    border-radius: 15px; /* Curved borders */
    overflow: hidden; /* Ensures the image fits within the card */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition on hover */
    background-color: white;
}
 
.unique-card:hover {
    transform: scale(1.05); /* Slightly enlarge on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Increase shadow on hover */
}
 
.unique-card img {
    width: 100%; /* Ensure the image takes full width of the card */
    height: auto; /* Maintain the aspect ratio */
    display: block; /* Removes extra space below images */
    border-bottom-left-radius: 15px; /* Rounded corners on bottom */
    border-bottom-right-radius: 15px; /* Rounded corners on bottom */
}

.slick-list.draggable{
    padding: 9px;
}

/* ---------------------end partner------------------ */

@media (max-width: 768px) {
    .value-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .left-content,
    .right-content {
        max-width: 100%;
    }

    .title-section {
        flex-direction: column;
    }

    .main-title {
        font-size: 2.5rem;
    }

    .subtitle {
        font-size: 1.25rem;
        margin-left: 0;
        margin-top: 5px;
        color: #000;
    }

    .slant-line {
        height: 40px;
        margin-right: 10px;
    }
}


/* Container for the ellipse with the border */
.ellipse-arrow {
    width: 65px;
    height: 65px;
    border-radius: 50%; /* Makes it an ellipse */
    border: 1.63px solid #000000; /* Ellipse border */
    background: #FFFFFF; /* Background color */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For positioning the arrow */
}
 

.ellipse-arrow12 {
    width: 55px;
    height: 55px;
    border-radius: 50%; /* Makes it an ellipse */
    border: 1.63px solid #000000; /* Ellipse border */
    background: #FFFFFF; /* Background color */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* For positioning the arrow */
}
 
/* Arrow style similar to icono-arrow1 */
.arrow-outward12 {
    width: 19.1px;
    height: 19.1px;
    border-width: 2px 2px 0 0; /* Border width to create arrow shape */
    border-style: solid;
    border-color: #1C1B1F; /* Arrow color */
    transform: rotate(-1deg); /* Rotate the arrow 45 degrees clockwise */
    position: relative;
    margin: 9px;
}
.arrow-outward12:before {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    height: 1.6px;
    width: 30.1px;
    background-color: #1C1B1F; /* Same color as the arrow */
    box-shadow: inset 0 0 0 32px; /* This ensures the arrow stays filled */
    transform: rotate(-45deg); /* Rotates the before element */
    transform-origin: right top; /* Origin for rotation */
}
 
/* Arrow style similar to icono-arrow1 */
.arrow-outward {
    width: 19.1px;
    height: 19.1px;
    border-width: 2px 2px 0 0; /* Border width to create arrow shape */
    border-style: solid;
    border-color: #1C1B1F; /* Arrow color */
    transform: rotate(-1deg); /* Rotate the arrow 45 degrees clockwise */
    position: relative;
    margin: 9px;
}
 
/* Optional arrow style if you want to use before pseudo-element */
 
.arrow-outward:before {
    content: '';
    position: absolute;
    right: 0;
    top: -1px;
    height: 1.6px;
    width: 30.1px;
    background-color: #1C1B1F; /* Same color as the arrow */
    box-shadow: inset 0 0 0 32px; /* This ensures the arrow stays filled */
    transform: rotate(-45deg); /* Rotates the before element */
    transform-origin: right top; /* Origin for rotation */
}


/* Hover effect: when hovering over ellipse-arrow, fade out the arrow */
.ellipse-arrow12:hover .arrow-outward12 {
    transform: translate(-15px, 15px) rotate(-1deg); /* Move the arrow downward by 20px */
    opacity: 0; /* Fade out the arrow */
    /* transition: transform 10.5s ease, opacity 0.5s ease; */
    /* transition-timing-function: cubic-bezier(1, 1, 2, 2); */
    /* transition: all 1s; */
 
}
.ellipse-arrow12:hover {
    /* transition: all 1s; */
    background:linear-gradient(230.34deg, #78CDD0 14.66%, #BFD42F 89%); /* Gradient background */
    background-size: cover; /* Make the image cover the whole element */
    background-position: center; /* Center the background image */
    border: 1.63px solid #ffffff; /* Border color change */
    border-image-slice: 1; /* Ensures the gradient covers the entire border */
    /* background-image: url('/assets/icon/123.png'),linear-gradient(230.34deg, #78CDD0 14.66%, #BFD42F 89%); */
    background-image: url('/assets/icon/123.png'),linear-gradient(230.34deg, #78CDD0 14.66%, #BFD42F 89%);

}
 
/* Hover effect: when hovering over ellipse-arrow, fade out the arrow */
.ellipse-arrow:hover .arrow-outward {
    transform: translate(-15px, 15px) rotate(-1deg); /* Move the arrow downward by 20px */
    opacity: 0; /* Fade out the arrow */
    /* transition: transform 10.5s ease, opacity 0.5s ease; */
    /* transition-timing-function: cubic-bezier(1, 1, 2, 2); */
    /* transition: all 1s; */
 
}
.ellipse-arrow:hover {
    /* transition: all 1s; */
    background:linear-gradient(230.34deg, #78CDD0 14.66%, #BFD42F 89%); /* Gradient background */
    background-size: cover; /* Make the image cover the whole element */
    background-position: center; /* Center the background image */
    border: 1.63px solid #ffffff; /* Border color change */
    border-image-slice: 1; /* Ensures the gradient covers the entire border */
    /* background-image: url('/assets/icon/123.png'),linear-gradient(230.34deg, #78CDD0 14.66%, #BFD42F 89%); */
    background-image: url('/assets/icon/123.png'),linear-gradient(230.34deg, #78CDD0 14.66%, #BFD42F 89%);

}
 
.hidden {
    display: none; /* Completely hide the element */
}


/* case study */

.case-studies {
    width: Hug (1, 439.21px)px;
    height: Hug (632.09px)px;
    padding: 80px 0px 0px 0px;
    gap: 89px;
    opacity: 0px;
}

svg {
    display: block;
  }

.container-1 {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
}

.left-content-1 {
    flex: 1;
    width: Fixed (294px)px;
    height: Hug (223px)px;
    gap: 25px;
    opacity: 0px;

}

.right-content-1 {
    flex: 1;
    position: relative;
}

.case {
    /* color: #0066a1;
    font-size: 48px;
    margin-bottom: 20px; */
    font-size: 64px;
    font-weight: 500;
    line-height: 77.45px;
    /* text-align: center; */
    color: #0F557B;
    /* margin-top: 48%; */
}

.view-all-1 {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid #000000;
    color: #000000;
    text-decoration: none;
    border-radius: 25px;
}

.view-all-1:hover {
    border: 1px solid #000000;
    color: #000000;
}


#maskedVideo {
    width: 100%;
    height: auto;
    object-fit: cover;
    clip-path: url(#text-mask);
    -webkit-clip-path: url(#text-mask); /* For Safari */
}
 
.letter-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    fill: none;
}
 
.letter-mask text {
    fill: black; /* This ensures the text shape is used to clip the video */
 
}

.bottomline{
    width: 39%;
    height: 5px !important;
    gap: 45px;
    opacity: 0px;
    background: linear-gradient(230.34deg, #78CDD0 14.66%, #BFD42F 89%);

}
.case1{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    margin-top:0;
}

/* footer */
 
.footer {
    background-color: #1a1a1a;
    color: #fff;
    padding: 0;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-left,
.footer-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 5%;
    /* Spacing between elements */
}

.footer-logo img {
    max-width: 150px;
    /* Adjust logo size */
    margin-bottom: 20px;
}

.footer-description {
    margin-bottom: 20px;
    font-size: 1rem;
    line-height: 1.6;
    color: #cccccc;
    max-width: 300px;
    /* Adjust width for better spacing */
}

.footer-social {
    display: flex;
    gap: 15px;
    /* Spacing between social icons */
    margin-bottom: 20px;
}


.svg-container {
    position: relative;
    width: 380px;
    height: 425px;
    overflow: hidden;
    left: 0;
}

.headlineTitle{
    font-size: 36px;
    font-weight: 600;
    line-height: 54px;
    text-align: left;
    margin-top: 13%;
}

/* #background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: url('#svgClip');
    -webkit-clip-path: url('#svgClip'); 
} */

#background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask: url(#svgMask);
    -webkit-mask: url(#svgMask);  /* Safari-specific */
}

@supports (mask-image: url(#svgMask)) {
    #background-video {
        mask: url(#svgMask);
        -webkit-mask: url(#svgMask);
    }
}

#background-video {
    -webkit-mask: url(#svgMask);
    mask: url(#svgMask);
    clip-path: none; /* Remove clip-path for browsers that struggle */
}



svg {
    /* position: absolute; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




.social-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
    text-decoration: none;
}

.social-icon i {
    font-size: 18px;
    color: #fff;
}

.social-icon:hover {
    background-color: #ffffff;
    color: #1a1a1a;
}

.footer-download {
    margin-bottom: 20px;
}

/* .download-btn {
    display: inline-block;
    padding: 10px 46px;
    border-radius: 30px !important;
    border: 2px solid transparent; 
    border-image: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1)) 1;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
} */

.download-btn {
    display: inline-block;
    padding: 10px 46px;
    border-radius: 30px !important;
    background-image: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
    background-origin: border-box;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s, color 0.3s;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.download-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    padding: 2px; /* Adjust this to control border thickness */
    background: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}



.download-btn:hover {
    /* background-color: #8cd419; */
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
    color: #ffff;
}

.footer-right {
    max-width: 60%;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    /* Spacing between menus */
}

.footer-links {
    display: flex;
    gap: 17%;
    /* Spacing between column groups */
}

.footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.footer-menu li {
    margin-bottom: 10px;
}

.footer-menu a {
    color: #cccccc;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.footer-menu a:hover {
    /* color: #fff; */
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer-bottom {
    /* display: flex;
    justify-content: space-between;
    align-items: center;
    /* max-width: 1200px; 
    margin: 20px auto 0;
    padding: 20px;
    border-top: 1px solid #333;
    font-size: 0.9rem;
    color: #cccccc; */
    display: flex;
    align-items: center;
    /* max-width: 1200px; */
    margin: 20px auto 0;
    /* padding: 20px; */
    border-top: 1px solid #333;
    font-size: 0.9rem;
    color: #cccccc;
    justify-content: space-around;
    flex-wrap: wrap;
}

.footer-bottom a {

    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    text-align: left;

}


/* General responsive styles for mobile */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .footer-left,
    .footer-right {
        align-items: center;
        text-align: center;
        max-width: 100%;
    }

    .footer-logo img {
        margin-bottom: 10px;
    }

    .footer-description {
        margin-bottom: 15px;
        max-width: 100%;
        font-size: 0.9rem;
    }

    .footer-social {
        justify-content: center;
        margin-bottom: 22px;
        gap: 35px;
        /* Reduced spacing for mobile */
    }

    .social-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    .footer-download {
        margin-bottom: 20px;
    }

    .footer-right {
        flex-direction: column;
        gap: 20px;
        /* Reduced gap for menus on mobile */
    }

    .footer-links {
        flex-direction: row;
        gap: 20px;
        /* Stack menu columns */
    }

    .footer-menu {
        margin-bottom: 10px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        font-size: 0.8rem;
        /* Smaller font for mobile */
    }
}

/* Adjustments for very small screens */
@media (max-width: 480px) {
    .social-icon {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .download-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .footer-menu a {
        font-size: 0.85rem;
    }

    .footer-description {
        font-size: 0.85rem;
    }
}

.navbar-nav{
    gap: 10px;
}
.contact-us-wrapper {
    width: 100%;
    height: 101%;
    padding: 11px 28px 10px 25px;
    gap: 10px;
    border-radius: 1000px;
    opacity: 0px;
    background: black;
}

/* --------------------------------------------- CSR -------------------------------- */

#background-video-csr{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: url(#svgClip);
}
.svgCSR{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.a-1-icon3 {
    width: 100%;
    margin: 0 !important;
    top: -0px;
    left: 9px;
    height: 100%;
    object-fit: contain;
    z-index: 2;
}

/* ------------------------------------CSR----------------------------------- */
.csrtitle{
    font-size: 64px;
    font-weight: 500;
    line-height: 77.45px;
    text-align: justify;
    color: #0F557B;
 }

 .csrdescription{

    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: justify;
    /* color: black; */
    
 }
.csrbannertitle{
    position: relative;

    font-size: 67px;
    font-weight: 500;
    line-height: 78.39px;
    text-align: center;
    color: #FFFFFF;
}

.csrbanner{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    opacity: 2.1;
    /* background: rgba(114, 124, 56, 0.37); */
    font-size: 100px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 4px 10px rgb(0 0 0);
    /* box-shadow: 0 10px 30px rgb(0 0 0 / 20%), inset 0 0 20px rgba(0, 0, 0, 0.2); */
    border-radius: 63%;
    text-align: center;
}

.csrbgcolor{
    background: #BFD730;

}

.bganimationcsr{
    background-image: url('../assets/img/csr/csr_line.png');
    background-size: cover;   /* Makes the image cover the entire element */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center bottom;
}
.bganimationcsrHome{
    background-image: url('../assets/img/csr/csr_line1.png');
    /* background-size: cover;    */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: top;
}
a {
    color: unset;
    text-decoration: none;
}

.aboutbgline{
    background-image: url('../img/About/arete_group_real_estate_company_vapi_guajrat_india.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: right;
}

.csrtitle-second{
    font-size: 42px;
    font-weight: 600;
    line-height: 50.83px;
    text-align: left;
    color: rgba(15, 85, 123, 1);
}


/* --------------------------------------aboutus----------------------------- */

.custom-badge-load-about{
    display: inline-block;
    padding: 5px 20px;
    font-size: 16px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 30px;
    text-align: center;
    white-space: nowrap; /* Prevents the text from wrapping */
    transition: background 0.3s ease; /* Smooth transition effect */
}

.custom-badge-load-about:hover {
    background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
    color: white; /* Optional: change text color on hover */
    border: 1px solid white; /* Hide the border on hover */
    cursor: pointer;
    }

.abouttitle-second{
    font-size: 64px;
    font-weight: 500;
    line-height: 87.68px;
    text-align: center;
    color: rgb(255, 255, 255);
}

.aboutdescription-looking{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: center;
    color: rgba(255, 255, 255, 1);
}

.aboutbgimg{
    background-image: url('../assets/img/About/line2.png');
    background-size: cover;   /* Makes the image cover the entire element */
    background-position: center;  /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    /* background-position: center bottom; */
}
.aboutbannertitle{
    z-index: 9999;
    position: absolute;
    font-size: 97px;
    font-weight: 500;
    line-height: 117.39px;
    text-align: center;
    color: #FFFFFF;
    margin-top: -28%;
    margin-left: 21%;
}

.aboutbannertitles{
    z-index: 9999;
    position: absolute;
    font-size: 97px;
    font-weight: 500;
    line-height: 117.39px;
    text-align: center;
    color: #FFFFFF;
    margin-top: -28%;
    margin-left: 21%;
}

.Hospitalitybannertitle{
    z-index: 9999;
    position: absolute;

    font-size: 97px;
    font-weight: 500;
    line-height: 117.39px;
    text-align: center;
    color: #FFFFFF;
    margin-top: -28%;
    margin-left: 18%;
}

.investmentBannertitle{
    position: relative;
    font-size: 97px;
    font-weight: 500;
    line-height: 117.39px;
    text-align: center;
    color: #FFFFFF;
}

.aboutlookingsection {
    position: relative;
    width: 100%;
    height: 33rem; /* Adjust as needed */
    background: url('/assets/img/About/lookingahead.png') no-repeat center center/cover, 
                url('/assets/img/About/homesectionbg2.png') no-repeat center center/cover;
    background-blend-mode: multiply; /* To blend the two images nicely */
}

.aboutlookingsection1 {
    padding: 20px;
    border-radius: 10px;
}

.industrialHeading title {
    font-weight: 500;
    font-size: 16px;
    line-height: 19.36px;
    margin-bottom: 20px;
    text-align: left;
}

.aboutTitle{
   font-size: 48px;
   font-weight: 500;
   line-height: 58.09px;
   color: rgba(15, 85, 123, 1);
}
.aboutdescription{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
}

.industrialTitle{
    font-size: 48px;
    font-weight: 500;
    line-height: 58.09px;
    text-align: left;
    color: rgba(15, 85, 123, 1);
}
.industrialdescription{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: rgba(55, 59, 89, 1);
}

.connectBgvector{
    /* background-image: url('../assets/img/IndustrialPark/lines2.png'); */
    background-image: url('../img/IndustrialPark/lines2.png');
    background-size: cover;   
    background-position: center; 
    background-repeat: no-repeat; 
}


.aboutlastsect{
    background-image: url('../assets/img/About/homesectionbg2.png');
    background-size: cover;   
    background-position: center; 
    background-repeat: no-repeat; 
}

/* -------------------------------------real state------------------------ */

.realstatetitle{
    font-size: 48px;
    font-weight: 500;
    line-height: 58.09px;
    text-align: left;
    color: rgba(15, 85, 123, 1);
}
.realstatedescription{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: rgba(0, 0, 0, 1);
}

.realstatetitle-Commercial{
    font-size: 64px;
    font-weight: 500;
    line-height: 87.68px;
    text-align: left;
    color: rgba(15, 85, 123, 1);
}

.realstatedescription{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
}

.commercialbg{
    background: rgba(191, 215, 48, 1);
    color: #FFFFFF;
    background-image: url('../img/realstate/line.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: right;


}

.commercialbg2{
    background: #78CDD1;
    color: #FFFFFF;
    background-image: url('../img/realstate/line.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-position: right;
}

/* /-----------------------------media page-------------------------------- */
.custom-badge {
    display: inline-block;
    padding: 5px 20px;
    font-size: 16px;
    border: 1px solid black;
    border-radius: 30px;
    text-align: center;
    white-space: nowrap; /* Prevents the text from wrapping */
}

.custom-badge-load {
display: inline-block;
padding: 5px 20px;
font-size: 16px;
border: 1px solid black;
border-radius: 30px;
text-align: center;
white-space: nowrap; /* Prevents the text from wrapping */
transition: background 0.3s ease; /* Smooth transition effect */
}

.values-badge-load {
    display: inline-block;
    padding: 5px 20px;
    font-size: 18px;
    border: 1px solid #0F557B;
    border-radius: 30px;
    text-align: center;
    white-space: nowrap; /* Prevents the text from wrapping */
    transition: background 0.3s ease; /* Smooth transition effect */
    }

    .values-badge-load:hover {
        background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
        color: white; /* Optional: change text color on hover */
        border: none; /* Hide the border on hover */
        cursor: pointer;
        border: 1px solid #ffffff;
        }  

.custom-badge-load:hover {
background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
color: white; /* Optional: change text color on hover */
border: 1px solid white; /* Hide the border on hover */
cursor: pointer;
}

.custom-line {
border-top: 3px solid rgba(203, 203, 203, 1); /* Line thickness and color */
width: 100%; /* Line width */
}

.mediastandline{
background-image:url('../assets/img/Media/standline.png');
}    

.mediaTitle{
font-size: 64px;
font-weight: 500;
line-height: 77.45px;
text-align: left;
color: rgba(15, 85, 123, 1);

}

.form-check-input:checked {
background-color: rgba(35, 31, 32, 1);
border-color:rgba(35, 31, 32, 1);
}

.inputbord{
border-bottom: 0.85px solid rgba(35, 31, 32, 1) !important;
}

/* -------------------------------retails------------------ */
    /* Styling for the View Website Button */
    .view-website-btn {
        width: 200px; /* Hug width */
        height: 57px; /* Fixed height */
        padding: 16px 40px; /* Padding */
        gap: 10px; /* Gap between text and border */
        border-radius: 51px; /* Rounded top-left corner */
        border: 1px solid black; /* Transparent border */
        background-color: transparent; /* No background */
        color: #333; /* Button text color */
        font-size: 16px;
        text-align: center;
        transition: all 0.3s ease; /* Smooth transition */
    }
     
    /* Hover effect for the button */
    .view-website-btn:hover {
        background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1)); /* Linear gradient on hover */
        color: white; /* Change text color to white on hover */
        border: 1px solid white; /* Border color on hover */
        cursor: pointer; /* Show pointer cursor */
    }
     


    .counter-count, span {
        display: inline; /* Or inline-block if necessary */
        margin: 0; /* Adjust as needed */
        padding: 0;
    }
    
    .media-second-column-title{
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        text-align: justify;
    }
    
    .homesectionbg{
        background-image: url('/assets/img/Home/line.png');
        background-size: cover;   /* Makes the image cover the entire element */
        background-position: center;  /* Centers the image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        background-position: revert-layer;
    }
    
    .typed-cursor {
      display: none;
    }
    
    .casestudiesBg{
        background-image: url('/assets/img/Home/line2.png');
        background-position: center;
        background-repeat: no-repeat;
        background-position: 13%;
    }
    
    .Businesstitle{
        font-size: 32px;
        font-weight: 500;
        line-height: 47.73px;
        text-align: left;
        color: #0F557B;
    }
    
    .tab-pane {
        transition: opacity 0.5s ease-in-out; /* Smooth transition for fade effect */
    }
    
    .transition-fade {
      transition: 0.4s;
      opacity: 1;
    }
    
    html.is-animating .transition-fade {
      opacity: 0;
    }
    
    .typing-container {
          border-right: 2px solid #007bff;
          white-space: nowrap;
          overflow: hidden;
          animation: typing 4s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
          position: absolute;
          top: 0;
          left: 0;
        }
     
        /* Typing effect */
        @keyframes typing {
          from {
            width: 0;
          }
          to {
            width: 100%;
          }
        }
     
        /* Blinking caret */
        @keyframes blink-caret {
          from, to {
            border-color: transparent;
          }
          100% {
            border-color: #007bff;
          }
        }
       
     
        
     
        .preview-text {
          color: lightgray;
        }
     
        .text-container {
          position: relative;
          display: inline-block;
        }
    
        .animate-dance3 {
         animation: dance3 2s alternate infinite;
        }
    
        .animationvideo1{
            -webkit-animation: pulsed  5s linear;
            -moz-animation: pulsed  5s linear;
            -o-animation: pulsed  5s linear;
            animation: pulsed  5s;
        }

        .animationvideo{
            -webkit-animation: pulsed  5s infinite linear;
            -moz-animation: pulsed  5s infinite linear;
            -o-animation: pulsed  5s infinite linear;
            animation: pulsed  5s infinite;
        }
    
    
        @keyframes pulsed {
      0% { transform: scale(0.9); }
      50% { transform: scale(1); }
      100% { transform: scale(1); }
    }
    
    
    .sidebar {
            position: fixed;
            top: 0;
            right: -50%; /* hide sidebar initially */
            height: 100%;
            width: 50%;
            transition: left 0.3s ease;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
            z-index: 999999;
            transition: transform 0.3s ease-in-out;
        }
    
        .sidebar.active {
            right: 0; /* show sidebar when active */
            transition: all ease 0.8s;
        }
    
        
        .sidebar h2 {
            margin-top: 0;
        }
    
        .sidebar ul {
            list-style: none;
            padding: 0;
        }
    
        .sidebar ul li {
            margin: 15px 0;
        }
    
        .sidebar ul li a {
            text-decoration: none;
            color: #000;
        }
    
        .navbar-custom {
            background-color: #f8f9fa; /* Change as needed */
        }
    
        .sidebar.active > .menu-backdrop{
        border: none;
        font-size: 22px;
        position: absolute;
        left: -16.5px;
        top: 25px;
        padding: 0;
        line-height: 1;
        width: 33px;
        height: 33px;
        line-height: 35px;
        font-size: 18px;
        z-index: 1;
        color: white;
        background-color: #0F557B;
        border-radius: 50%;
    }

    .aboutTitle{
        font-size: 48px;
        font-weight: 500;
        line-height: 58.09px;
        color: rgba(15, 85, 123, 1);
    }   

    /* -----------------------hospitality--------------------- */

    .hospitalitybg{
        background-image: url('../img/Hospitality/line1.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-position: top;
    }

    .hospitality-title-second{
        font-size: 48px;
        font-weight: 500;
        line-height: 58.09px;
        text-align: left;
        color: #0F557B;
    }

    .hospitalityTitle{
        font-size: 64px;
        font-weight: 500;
        line-height: 87.68px;
        text-align: left;
        color: #0F557B;

    }
    .restobg{
        background: #0F557B;
    }

    .Distinguishedbg{
        background: #0F557B;
        color: #FFFFFF;
        background-image: url('../img/Hospitality/line2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-position: right;
    }

    .Distinguishedbg1{
        background: #BFD730;
        color: #000000;
        background-image: url('../img/Hospitality/line2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-position: right;
    }

    .hospitalitydescription{
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        text-align: left;
        color: #FFFFFF;
    }

    .hospitalitydescription1{
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        text-align: left;
        color: #000000;
    }

    .hospitality-last-section{
        background: #0F557B;
        /* background-image: url('../assets/img/Hospitality/line2.png'); */
        background-image: url('../img/Hospitality/line2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-position: right;
        color: white;
    }
    .hospitality-title-last{
        font-size: 48px;
        font-weight: 500;
        line-height: 77.45px;
        text-align: left;
    }
    .hospitalitydescri{
        font-size: 26px;
        font-weight: 400;
        line-height: 48px;
        text-align: left;
    }
    

    /* ------------------------industrial parks----------------------------------------- */
    .industrialparks{
        z-index: 9999;
        position: absolute;
        font-size: 97px;
        font-weight: 500;
        line-height: 117.39px;
        text-align: center;
        color: #FFFFFF;
        margin-top: -19%;
        margin-left: 11%;
    }

    /* .industrialTitle{
        font-size: 48px;
        font-weight: 500;
        line-height: 58.09px;
        text-align: justify;
        color: rgba(15, 85, 123, 1);
    } */

    .industrialDescrption{
        font-size: 20px;
        font-weight: 400;
        line-height: 30px;
        text-align: justify;
        margin-top: 4%;
    }
    .carddescription{
        font-size: 16px;
        font-weight: 400;
        line-height: 21.6px;
        text-align: left;
    }

    .carouselTitle{
        font-size: 24px;
        font-weight: 500;
        line-height: 36px;
        text-align: left;
    }

    .carouselbgcolor{
        background: rgba(15, 85, 123, 1);
        
    }

    /* //---- */
     
    .card-with-bg {
        background-image: url('../assets/img/IndustrialPark/Lines.png'); /* Replace with your image path */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: background-color 0.3s, opacity 0.3s;
    }
        .card-upcoming-sub-text{
             font-size: 36px;
             font-weight: 500;
             line-height: 43.57px;
             text-align: left;
             color: rgba(15, 85, 123, 1);
                                           
        }
        .card-upcoming-maintext{
           font-size: 20px;
           font-weight: 400;
           line-height: 30px;
           text-align: left;
                                   
        }
        .card {
        border: 1px solid;
        border-image-source: linear-gradient(230.34deg, #78CDD0 14.66%, #BFD42F 89%);
        border-image-slice: 1;
        transition: background-color 0.3s;
        /* height: 250px; */
    }
 
    .Upcomingcard:hover {
        background: rgba(120, 205, 209, 1);
        /* Background color on hover */
        background-image: url(../assets/img/IndustrialPark/Lines.png);
        background-size: cover;
        rotate: 90 deg;

    }
 
    /* -------------------------------------------------------------------------- */

    .holder::-webkit-scrollbar {
  display: none;
}

/* Hide the images by default */
.slides {
  display: none;
  /* max-width: 1000px; */
  /* width: 100%;
  flex-shrink: 0;
  height: 100%; */
}

.slides img {
  width: 100%;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (max-width: 600px) {
  .prevContainer,
  .nextContainer {
    display: none;
    visibility: hidden;
  }
}

.prevContainer,
.nextContainer {
  top: 50%;
  transform: translate(0, calc(-50% - 54px));
  height: 54px;
  width: 60px;
  cursor: pointer;
}

.prevContainer {
  margin-left: 26px;
  left: 0;
  border-radius: 30px 0 0 30px;
}

.prev {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  height: 34px;
  width: 32px;
  float: left;
  margin-left: 12px
}

.prev svg,
.next svg {
  fill: white;
}

.nextContainer {
  margin-right: 26px;
  right: 0;
  border-radius: 0 30px 30px 0;
}

.next {
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
  height: 34px;
  width: 32px;
  float: right;
  margin-right: 12px;
}

/* Container for image text */
.caption-container {
  text-align: left;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumbnail images */
.slide-thumbnail {
  width: 100%;
  opacity: 0.6;
  cursor: pointer;
}

.active.slide-thumbnail{
    background: #0F557B;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    height: 112px;
}

.slide-thumbnail{
    background: #78CDD1;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    height: 112px;
}

  /* Thumbnail styling */
  .thumbnails {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      gap: 10px;
    }
 
    .thumbnails img {
      width: 150px;
      height: auto;
      border: 2px solid transparent;
      cursor: pointer;
      transition: border-color 0.3s;
    }
 
    .thumbnails img.active {
      border-color: #007bff;
    }

    .bannerDiverse{
        position: relative;
        height: 55vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        transition: background-image 1s ease-in-out;
    }
    

    .column {
    width: 100%; /* Width of each box */
    height: 5rem; /* Height of each box */
    background: #78CDD1;
    border: 1px solid #ddd; /* Border style */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px; /* Margin around each box */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.bannerDiverseTitle{
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
}

.industrial-card-img-top{
    -webkit-animation: tada 5s infinite linear;
    -moz-animation: tada 5s infinite linear;
    -o-animation: tada 5s infinite linear;
    animation: tada 5s infinite linear;
}

.IndustrialPark-custom-card:hover,.IndustrialPark-custom-card-1:hover,.IndustrialPark-custom-card-2:hover,.IndustrialPark-custom-card-3:hover,.IndustrialPark-custom-card-4:hover {
    background-color: #BFD730;
}



/* ----------------------text transition */
.IndustrialPark-custom-card:hover .industrial-card-text-top {
    transform: scale(1.1);
}

.IndustrialPark-custom-card-1:hover .industrial-card-text-top {
    transform: scale(1.1);
}

.IndustrialPark-custom-card-2:hover .industrial-card-text-top {
    transform: scale(1.1);
}

.IndustrialPark-custom-card-3:hover .industrial-card-text-top {
    transform: scale(1.1);
}

.IndustrialPark-custom-card-4:hover .industrial-card-text-top {
    transform: scale(1.1);
}

.industrialTitle-connect{
    font-size: 48px;
    font-weight: 500;
    line-height: 58.09px;
    text-align: left;
    color: #BFD730;
}

.text-whiteGet{
    color: white !important;
}
.connectBgvector3{
    background: #0F557B;
    /* background-image: url(../assets/img/IndustrialPark/lines2.png); */
    background-image: url('../img/IndustrialPark/arete_real_estate_company_gujarat_india.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.industrialTitle-Initiatives{
    font-size: 64px;
    font-weight: 500;
    line-height: 87.68px;
    text-align: left;
    color: #0F557B;
}

/* -----------------------------------investment------------------------------------ */
.investmentTitle{
    font-size: 48px;
    font-weight: 500;
    line-height: 58.09px;
    text-align: left;
    color: #0F557B;
   }

   .investmentDescription{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
   }

   .investmentbgimg{
    background-image: url('/assets/img/Investments/linebg.png');
    /* background-size: cover;    */
    background-position: left; 
    background-repeat: no-repeat; 
   }
   
 
   .investmentDescriptionTitle{
    font-size: 24px;
    font-weight: 500;
    line-height: 36px;
    text-align: left;
   }

   .inverstmentTitle{
    font-size: 48px;
    font-weight: 500; 
    line-height: 58.09px;
    text-align: left;
    color: rgba(15, 85, 123, 1);
   }

   .inverhoziantSec{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
   }

   .inverhoziantSec .active{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
   }

   .QualityofBusinessBG{
    background: #78CDD1;
    background-image: url('../assets/img/Investments/linesce.png');
    background-size: cover;   
    background-position: left; 
    background-repeat: no-repeat; 
   }

   .investmentDescr{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    background: #78cdd1;
   }
   .w-100rem {
  width: 100rem;
}

.ourinvestmentTitle{
    font-size: 64px;
    font-weight: 500;
    line-height: 87.68px;
    text-align: left;
    color: #0F557B;
}


.number {
    font-size: 48px;
    font-weight: 500;
    line-height: 72px;
    text-align: left;
    color: #0F557B;
}

.icon {
    width: 80px;
    height: 80px;
}

.description {
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
}

.nav-item {
    display: flex;
    align-items: center;
}

.ml-3 {
    margin-left: 1rem; /* Adds some space between elements */
}

.main-title-investment{
    font-size: 48px;
    font-weight: 500;
    line-height: 58.09px;
    text-align: left;
    color: #0F557B;
}

.slant-line-home-investment{
    width: 1px;
    height: 100px;
    background-color: #70cace;
    transform: skewX(-20deg);
    margin-right: 20px;
    margin-top: -5%;
}

/* -----------------------------------------retail------------------------- */
.retailbannertitle{
    z-index: 9999;
    position: absolute;
    font-family: Jost;
    font-size: 97px;
    font-weight: 500;
    line-height: 117.39px;
    text-align: center;
    color: #FFFFFF;
    margin-top: -13%;
    margin-left: 21%;
}

.retailTitle{
    font-size: 48px;
                font-weight: 500;
                line-height: 58.09px;
                text-align: left;
                color: rgba(15, 85, 123, 1);
}

.retailhomeBg{
    background-image: url('/assets/img/retail/line.png');
    background-size: cover;   
    background-position: center; 
    background-repeat: no-repeat; 
}

.retaildescription{
    font-size: 20px;
              font-weight: 400;
              line-height: 30px;
              text-align: left;
}

/* ------------------------- */



.custom-dot {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: white;
margin: 0 5px;
border: 2px solid #7ecbdc; /* Border color to match your background */
transition: background-color 0.3s ease;
}

.custom-dot.active {
background-color: #7ecbdc; /* Active dot color (blue) */
}

.brandtitle{
font-size: 36px;
font-weight: 500;
line-height: 54px;
text-align: left;
}

.brandDescription{
font-size: 20px;
font-weight: 400;
line-height: 30px;
text-align: left;
}

.ouresteemedtitle{
font-size: 64px;
font-weight: 500;
line-height: 87.68px;
text-align: left;
color: #0F557B;
}

.fill-available {
    width: -webkit-fill-available;
    width: fill-available;
  }

  .values-section-Title{
    font-size: 64px;
    font-weight: 500;
    line-height: 77.45px;
    text-align: left;
    color: #0F557B;
}

.values-section-description{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: #0f557b;
}

.valuetitle{
font-size: 24px;
font-weight: 500;
line-height: 36px;
text-align: left;
}

.csrPrioritising{
    background: #78CDD1;
}

.csrdescriptionBold{
    font-size: 20px;
    font-weight: 600;
    line-height: 30px;
    text-align: left;
    color: #0F557B;
}
.csrdescriptiondet{
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    text-align: left;
    color: #373B59;
    }
.csrtitle-third{
        font-size: 48px;
        font-weight: 500;
        line-height: 58.09px;
        text-align: left;
        color: #0F557B;
    }

    .view-website-btn1{
        width: 200px;
        height: 57px;
        padding: 9px 34px;
        gap: 10px;
        border-radius: 51px;
        border: 1px solid black;
        background-color: transparent;
        color: #333;
        font-size: 16px;
        text-align: center;
        transition: all 0.3s ease;
    }
    .view-website-btn1:hover {
            background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1)); /* Linear gradient on hover */
            color: white; /* Change text color to white on hover */
            border: 1px solid white; /* Border color on hover */
            cursor: pointer; /* Show pointer cursor */
        }
    
    .lifeAreteDescription{
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            text-align: left;
        }
        .lifeAretetitleSec{
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
            text-align: left;
        }
    
        .lifeDescription{
            font-size: 18px;
            font-weight: 400;
            line-height: 24px;
            text-align: left;
        }
    
        .emp-engagement-title{
            font-size: 40px;
            font-weight: 500;
            line-height: 48.41px;
            text-align: left;
            color: #0F557B;
        }
    
        .emp-engagement-description{
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            text-align: left;
        }
        
       
    
        .lifeAreteDescriptionbg{
            background: #BFD730;
        }
    
        .lifeAreteLearning{
            font-size: 48px;
            font-weight: 500;
            line-height: 65.76px;
            text-align: left;
            color: #0F557B;
        }
    
        .learning-developement-title{
            font-size: 48px;
            font-weight: 500;
            line-height: 65.76px;
            text-align: left;
            color: #0F557B;
        }

        .go-up {
            position: fixed;
            bottom: 1.5rem;
            right: 1rem;
            font-size: 2.1rem;
            background: #92bf25;
            padding: 0.4rem;
            color: #fff;
            border-radius: 5px;
            z-index: 99999;
            line-height: 0;
            display: none;
            -webkit-transition: 0.5s;
            transition: 0.5s;
        }
         
        .life-at-arete-Embracing{
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            text-align: left;
        }
        
        .life-arete-culture{
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            text-align: left;
        }
        
        .custom-border-radius{
            border-radius: 6px 0px 0px 0px;
        }


        .main-title-sub{
            font-size: 42px;
            font-weight: 500;
            line-height: 50.68px;
            text-align: left;
            color: #0F557B;
        }


        .custom-badge-load1 {
            display: inline-block;
            padding: 5px 20px;
            font-size: 16px;
            border: 1px solid rgb(255, 255, 255);
            border-radius: 30px;
            text-align: center;
            white-space: nowrap; /* Prevents the text from wrapping */
            transition: background 0.3s ease; /* Smooth transition effect */
            color: white;
            }

            .custom-badge-load1:hover {
                background: linear-gradient(45deg, rgba(120, 205, 208, 1), rgba(191, 212, 47, 1));
                color: white; /* Optional: change text color on hover */
                border: 1px solid white; /* Hide the border on hover */
                cursor: pointer;
                }

    /* ---------------------------------------resposinve media-------------------------  */
    /* home page */
   
    @media (max-width: 768px) {
        .card-group {
            display: flex; /* Use flexbox to arrange cards in a row */
            flex-wrap: wrap; /* Allow cards to wrap onto the next line if needed */
            justify-content: space-between; /* Space cards evenly */
            align-items: stretch; /* Ensure all cards have the same height */
        }
     
        .card {
            flex: 0 1 calc(50% - 10px); /* Each card takes 50% of the width, minus space for margins */
        }
     
        .slant-line-index {
            display: none; /* Hide slant lines in mobile view */
        }
     
        /* Show straight line in mobile view */
        .straight-line-index {
            display: block; /* Show straight line */
            width: 100%; /* Full width horizontal line */
            height: 2px; /* Thin horizontal line */
            background-color: #BFD730; /* Green color */
            margin: 10px 0; /* Space above and below the line */
        }
    }
     
    /* Hide straight line for larger views (tablet and desktop) */
    @media (min-width: 769px) {
        .straight-line-index {
            display: none; /* Hide straight line in larger views */
        }

    }

    @media (max-width: 575.98px) { /* Bootstrap's sm breakpoint */
        .flex-reverse-mobile {
            display: flex;
            flex-direction: row-reverse;
        }
    }

       /* Media Queries */
        
        /* Extra Small Devices (Phones, 600px and down) */
        @media (max-width: 600px) {
            .typing-container {
                animation: none;
                white-space: unset;
            }
            .aboutbannertitle{
                margin-left: 0;
                margin-top: -43%;
                font-size: 66px;
            }

            .aboutbannertitles{
                margin-left: 0;
                margin-top: 0%;
                font-size: 66px;
            }

            .Hospitalitybannertitle{
                margin-left: 0;
                margin-top: 0%;
                font-size: 66px;
            }
            .aboutTitle{
                font-size: 44px;
            }
            .csrtitle 
            {
                font-size: 33px;
                line-height: 42.45px;
            }
            .csrtitle-second{
                font-size: 33px;
                line-height: 42.45px;
            }
            .hospitalityTitle
            {
                font-size: 37px;
                line-height: 49.68px;
            }
            .hospitality-title-last{
                font-size: 37px;
                line-height:51.45px;
            }
            .hospitalitydescri{
                font-size: 16px;
                line-height: 43px;            
            }
            .hospitality-title-second{
                font-size: 37px;
                line-height: 52.09px;
            }
            .industrialparks{
                font-size: 46px;
                line-height: 58.39px;
                margin-left: 0;
                margin-top: -26%;
            }
            .slant-line{
                display: none;
            }
            .card{
                height: 100%;
            }
            .industrialTitle{
                font-size: 35px;
                line-height: 51.09px;
            }
            .bussinessHeight{
                height: 310px;
            }

            .investmentBannertitle{
                font-size: 64px;
                font-weight: 500;
            }
            .main-title-investment{
                font-size: 37px;
                line-height: 50.09px;
            }

            .slant-line-home-investment{
                display: none;
            }

            .investmentTitle{
                font-size: 37px;
            }
            .ourinvestmentTitle {
                font-size: 37px;
                line-height: 48.68px;
            }
            .cleartx {
                padding: 10px 0px 10px 0px;
            }

            .retailTitle{
                font-size: 37px;
                line-height: 47.09px;
            }
            .ouresteemedtitle {
                font-size: 37px;
                line-height: 48.68px;
            }

            .csrbannertitle{
                font-size: 48px;
            }

            .media-second-column-title{
                font-size: 16px  !important;
            }

            .value-Create-title-prev{
                font-size: 41px;
                line-height: 55.45px;
            }

            .value-Create-title{
                font-size: 41px;
                line-height: 55.45px;
            }

            .flex-column-reverse-mobile {
                flex-direction: column-reverse;
              }

            .values-section-Title{
                font-size: 42px;
            }

            .values-section-description{
                font-size: 16px;
            }
            .csrdescription{
                font-size: 16px;
            }

            .csrtitle-third{
                font-size: 42px;
            }

            .csrdescriptiondet{
                font-size: 16px;
            }
            .csrdescriptionBold{
                font-size: 16px;
            }

            .lifeAreteDescription{
                font-size: 16px;
            }
            .lifeAreteDescription{
                font-size: 16px;
            }

            .learning-developement-title{
                font-size: 42px;
                line-height: 56.76px;
            }
            .life-arete-culture{
                font-size: 16px;
            }

            .lifeAreteLearning{
                font-size: 42px;
                line-height: 58.76px;
            }

            .life-at-arete-Embracing{
                font-size: 16px;
            }

            .realstatetitle{
                font-size: 36px;
                line-height: 53.09px;
            }

            .realstatedescription{
                font-size: 16px;
            }

            .realstatetitle-Commercial{
                font-size: 33px;
                line-height: 48.68px;
            }

            .border {
                border: none !important;
            }
            .border-custome{
                border:1px solid #dee2e6 !important;
            }

            .hospitalitydescription{
                font-size: 16px;
            }
        
            .hospitalitydescription1{
                font-size: 16px;
            }

            .retaildescription{
                font-size: 16px;
            }

            .description {
                font-size: 16px;
            }
            .investmentDescription{
                font-size: 16px;
            }

            ul.dropdown-menu.show{
                background: linear-gradient(45deg, rgb(255, 255, 255), rgb(255, 255, 255));
            }

            .newscovgtitle{
                font-size: 20px;
            }

            .mobilediv{
                height: 310px;
            }
            .banner{
                height: 505px;
            }
            .video-container video{
                height: 222px;
            }
            #preloader-image{
                width: 100% !important;
            }
            .video-container video{
                animation: unset;
                animation-delay: 1s;
            }

            .card-mobile{
                display: flex;
                flex-wrap: nowrap;
            }
            .logosize {
                width: 145px;
                height: 55px;
            }

            .mediaTitle {
                font-size: 40px;
                line-height: 38.45px;
            }

            .main-title-sub{
                font-size: 37px;
                font-weight: 500;
                line-height: 57.68px;
                text-align: left;
                color: #0F557B;
            }
            
        }
        
        /* Small Devices (Tablets, 600px to 768px) */
        @media (min-width: 600px) and (max-width: 768px) {
            .typing-container {
                animation: none;
                white-space: unset;
            }
            .aboutbannertitle{
                margin-left: 0;
            }
            .aboutTitle{
                font-size: 44px;
            }
            .csrtitle 
            {
                font-size: 42px;
            }
            .hospitalityTitle
            {
                font-size: 49px;
                line-height: 58.68px;
            }
            .hospitality-title-last{
                font-size: 43px;
                line-height: 55.45px;
            }
            .hospitalitydescri{
                font-size: 25px;
                line-height: 43px;            
            }
            .hospitality-title-second{
                font-size: 39px;
                line-height: 52.09px;
            }
            .industrialparks{
                font-size: 46px;
                line-height: 58.39px;
                margin-left: 0;
                margin-top: -26%;
            }
            .slant-line{
                display: none;
            }
            .card{
                height: 100%;
            }
            .industrialTitle{
                font-size: 35px;
                line-height: 51.09px;
            }
            .bussinessHeight{
                height: 344px;
            }

            .tabletmod{
                display: none;
            }

            .card-mobile-home{
                display: unset;
            }
            .home-industrial-tablet{
                height: 173px;
            }
            .home-description-tablet{
                height: 618px;
            }

            
            /* .mySwiper .swiper-slide {
                width: auto !important; /* Ensures Swiper adjusts */
           /* // } */ 

        }
        
        /* Medium Devices (Desktops, 769px to 1024px) */
        @media (min-width: 769px) and (max-width: 1024px) {
            .typing-container {
                animation: none;
                white-space: unset;
            }
            .aboutbannertitle{
                margin-left: 0;
            }
            .aboutTitle{
                font-size: 44px;
            }
            .csrtitle 
            {
                font-size: 42px;
            }
            .hospitalityTitle
            {
                font-size: 49px;
                line-height: 58.68px;
            }
            .hospitality-title-last{
                font-size: 43px;
                line-height: 55.45px;
            }
            .hospitalitydescri{
                font-size: 25px;
                line-height: 43px;            
            }
            .hospitality-title-second{
                font-size: 39px;
                line-height: 52.09px;
            }
            .industrialparks{
                font-size: 46px;
                line-height: 58.39px;
                margin-left: 0;
                margin-top: -26%;
            }
            .slant-line{
                display: none;
            }
            .card{
                height: 100%;
            }
            .industrialTitle{
                font-size: 35px;
                line-height: 51.09px;
            }
            .bussinessHeight{
                height: 516px;
            }

            .home-industrial-tablet{
                height: 260px;
            }
            .home-description-tablet{
                height: 618px;
            }

            .footer-links {
                display: flex;
                gap: 5%;
                text-align: center;
            }
            
            
        }
        
        /* Large Devices (Large Desktops, 1025px and up) */
   
        


        /* iPhone 12/13/14 (Mini, Pro, Pro Max) Portrait */
@media only screen and (min-device-width: 375px) and (max-device-width: 428px) and (orientation: portrait) {
    .video-container {
        position: relative;
        width: 100%;
        height: auto; /* Adjusts height based on content */
        overflow: hidden; /* Ensures no overflow */
    }

    #introVideo {
        width: 100%; /* Make the video take full width */
        height: auto; /* Auto height to maintain aspect ratio */
        object-fit: cover; /* Ensures the video covers the container without distortion */
    }
}

/* Full HD Monitors (1920px x 1080px and up) */
@media only screen and (min-width: 1921px) and (max-width: 2560px) {
    /* Styles for full HD and larger monitors */
    .video-container video{
        animation: unset;
        animation-delay: 1s;
    }
}
 
/* 4K Ultra HD Monitors (3840px x 2160px and up) */
@media only screen and (min-width: 2561px) and (max-width: 3840px) {
    /* Styles for 4K monitors */
    .video-container video{
        animation: unset;
        animation-delay: 1s;
    }
}

@media (max-width: 600px) {
    .card {
        height: 150px;
    }
}