/* 

I - Home Page Designs

1. Color list
2. Browser default reset style
3. Font style config
4. Common styles
5. Header styles
6. Banner styles
7. Why choose styles
8. Visualize Our Process styles
9. Golden Dealer styles
10. Counter styles
11. Schedule demo styles
12. Footer styles
13.Scroll Behaviour
14.Other Company Image rotaion

II - About Page Designs

13. About Section styles
14. What We Do styles
15. Quote styles

III - Project Page Designs

16. Project section styles

IV - Project Description Page Designs

17. Projects Description styles

V - Brands Page styles

18. Brands styles

VI. Solutions Page styles

19. Solutions styles

VII Contact Page designs

1.contact icons animation



*/
:root {
    --web-black-color: #333333;
    --light-white: #FFFFFF82;
    --counter-font-color: #717171;
    --footer-color: #EFEFEF;
    --footer-font-color: #848484;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* -------- Config css --------- */

/* web font */
@font-face {
    font-family: "saira";
    src: url(../fonts/saira/Saira-VariableFont_wdth\,wght.ttf);
}

/* banner content font */

@font-face {
    font-family: "OpenSans-CondBold";
    src: url(../fonts/open-sans-condensed/OpenSans-CondBold.ttf);
}

@font-face {
    font-family: "OpenSans";
    src: url(../fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf);
}

/* Visualize Our Process content font */

@font-face {
    font-family: "Sacramento";
    src: url(../fonts/Sacramento/Sacramento-Regular.ttf);
}

/* About, solutions page font */

@font-face {
    font-family: "Montserrat";
    src: url(../fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
}

@font-face {
    font-family: "Sofia-Pro-Az";
    src: url(../fonts/sofia-pro/Sofia-Pro-Regular-Az.otf);
}

@font-face {
    font-family: "Inter";
    src: url(../fonts/Inter/Inter-Regular.otf);
}

body {
    font-family: "saira";
}

/* --------- 4. Common styles ----------- */

section {
    padding-bottom: 70px;
}

.pb-30 {
    padding-bottom: 30px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-70 {
    padding-bottom: 70px;
}

a {
    color: #fff !important;
    text-decoration: none !important;
}

.page-banner-widget {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 35%, #000000 100%), var(--page-banner-img);
    background-repeat: no-repeat;
    width: 100%;
    height: 450px;
    position: relative;
    margin-bottom: 70px;
}

.page-banner-widget.white-shade {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%), var(--page-banner-img);
    background-repeat: no-repeat;
    height: 300px;
}

.page-banner-widget.no-shade {
    background: var(--page-banner-img);
}

.page-banner-widget h2 {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: "Sofia-Pro-Az";
    font-weight: 800;
    color: #fff;
    font-size: 50px;
}

.page-banner-widget h6 {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -65%);
    font-family: "Sofia-Pro-Az";
    font-weight: 400;
    color: #fff;
    font-size: 30px;
}

.page-banner-widget.white-shade h2,
.page-banner-widget.no-shade h2,
.page-banner-widget.no-shade h6 {
    color: #686868;
}

/* ---------- 5. Header styles ------------ */

.header-top {
    position: fixed;
    width: 100%;
    padding: 20px 0;
    z-index: 99;
    transition: transform 0.3s;

}

.header-top.header-add-class {
    transform: translateY(-110%);
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.header-top.header-visible {
    transform: translateY(0);
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.header-top .black-logo {
    display: none;
}

.header-top.header-add-class .black-logo,
.header-top.dark-header .black-logo {
    display: block;
}

.header-top.header-add-class .white-logo,
.header-top.dark-header .white-logo {
    display: none;
}

.header-add-class .navbar-nav a {
    color: var(--web-black-color) !important;
}

.header-top.dark-header .navbar-nav a {
    color: #686868 !important;
}

.navbar-nav .nav-link {
    margin-left: 15px;
}

/* ------ 6. Banner styles ------- */

.banner-section {
    padding: 0 !important;
}

.banner-section .banner-content-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
}

.banner-section .banner-content-box .badge {
    border-radius: 10px;
    background: #F08B23;
}

.banner-section .banner-content-box .banner-title {
    font-family: "OpenSans-CondBold";
    color: #fff;
    font-size: 50px;
}

.banner-section .banner-content-box .sub-title {
    font-family: "OpenSans";
    color: #fff;
    font-weight: 300;
}

.banner-section .mouse-scroll-icon-box span {
    font-weight: 400;
}

.banner-section .video-play-button-box {
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
}

.banner-section .video-play-button-box .outer-icon {
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    animation: play-button-rotation 7s infinite linear;
}

@keyframes play-button-rotation {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}

.banner-section .social-media-box {
    position: absolute;
    bottom: 5%;
    left: 10%;
    display: flex;
    gap: 10px;
    border: 1px solid var(--light-white);
}

.banner-section .social-media-box {
    position: absolute;
    bottom: 5%;
    left: 10%;
    display: flex;
    gap: 10px;
    border: 1px solid var(--light-white);
    color: var(--light-white) !important;
    padding: 10px 30px;
    border-radius: 25px;
}

.banner-section .social-media-box a {
    color: var(--light-white) !important;
    font-size: 18px;
}

.banner-section .mouse-scroll-icon-box {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.banner-section .mouse-scroll-icon-box .arrow-icon {
    position: relative;
    animation: arrow-down 2s infinite ease-in-out;
}

@keyframes arrow-down {
    0% {
        top: 0;
    }

    50% {
        top: 10px;
    }

    100% {
        top: 0;
    }
}

.banner-section .banner-bottom-design {
    width: 80px;
    height: 80px;
    background: #fff;
    position: absolute;
    bottom: -7%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

/* ------- 7. Why choose styles --------- */

.why-choose-section .bg-img {
    position: absolute;
    height: 100%;
    right: 0;
    width: 30%;
    z-index: -1;
}

.why-choose-section .bg-img.rotate {
    left: 0;
    transform: rotateY(180deg);
}

.why-choose-section .container {
    padding: 70px 0;
}

.why-choose-section h2 {
    font-size: 40px;
    font-weight: 400;
    display:inline-block
}
.text3 span {
    display: inline-block;
    opacity: 1;
    transform: translateY(0);
}

.why-choose-section h2 span {
    font-weight: 600;
}

.why-choose-section img {
    width: 80%;
}

.why-choose-section .other-company-col span {
    position: absolute;
    bottom: 0;
    left: 28%;
    font-size: 20px;
}



/* ------- 8. Visualize Our Process styles --------- */

/* .our-process-section h3 {
    font-family: "Sacramento";
    color: var(--web-black-color);
    font-size: 45px;
}

.our-process-section h3 span {
    color: orange;
} */

.our-process-section h3 {
    font-family: "Sacramento";
    color: var(--web-black-color);
    font-size: 45px;
    font-weight: 600;
}

.our-process-section h3 span {
    color: orange;
}

.visual div {
    display: inline-block; /* Ensure each letter is animated separately */
    line-height: 1.2; /* Maintain proper spacing */
    opacity: 0; /* Initial state for animation */
    transform: translateY(50px); /* Match the GSAP starting point */
  }

.animated-text div {
    display: inline-block; /* Ensure each letter is animated separately */
    line-height: 1.2; /* Maintain proper spacing */
  }
  .black-text{
    color: #000 !important;
  }

/* .animated-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid orange;
    animation: typing 6s steps(40, end) 1 normal forwards, hideCursor 0s 1.5s forwards;
    
}


@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}


@keyframes hideCursor {
    0% {
        border-right: 2px solid orange;
    }

    100% {
        border-right: none;
    }
} */


.our-process-section .bg-color {
    background: linear-gradient(90.01deg, #898989 -7.42%, #EFEFEF 49.97%, #ADADAD 118.71%);
    padding: 50px 0;
}

.our-process-section .bg-color .client-logo-box {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    overflow: hidden;
    
}

.our-process-section .bg-color .client-logo-box img {
    opacity: 0;
    animation: fadeIn 1s forwards;
    animation-delay: calc(0.5s * var(--i));
    /* Delay based on index */
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* ------- 9. Golden Dealer styles --------- */

.golden-dealer-section {
    background-image: url(../images/home-page/golden-dealer-bg.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 300px;
}

.golden-dealer-section2 {
    padding-top: 3%;
}

.golden-dealer-section2 .golden-dealer-img {
    width: 50%;
    margin: auto;
}

/* .golden-dealer-section .container::before{
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #fff;
} */

.golden-dealer-section .content h4 {
    font-size: 45px;
    font-weight: 400;
    
}

.golden-dealer-section .content span {
    font-weight: 600;
    color: #c4902d !important;
}

.golden-dealer-section .content p {
    color: #848484;

}

.golden-dealer-section .golden-dealer-img .star-icon-box {
    position: absolute;
    left: 50%;
    bottom: 26%;
    transform: translateX(-45%);
    transition: transform 0.5s ease;

}

.golden-dealer-section2 .golden-dealer-img .star-icon-box {
    bottom: 8%;
}

.golden-dealer-section:nth-child(2) {
    background-color: red;
}

.star-icon  {
    transform: scale(0);
    transition: transform 0.5s ease;
}
.dealer-image{
    /* background-image: url('/assets/images/home-page/Ellipse.jpg'); */
    border-radius: 130px;
    filter: drop-shadow(0px 0px 0px #cfcccc);
}
.gold-img{
    /* background-image: url('/assets/images/home-page/Ellipse26.jpg'); */
    border-radius: 130px;
    filter: drop-shadow(0px 0px 0px #cfcccc);
}

/* ------- 10. Counter styles --------- */

.counter-section .yr-ex-box {
    background: url(../images/home-page/counters/counter1.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 30px 30px;
}

.counter-section .yr-ex-box span {
    color: var(--counter-font-color);
}

.counter-section .yr-ex-box span:nth-child(1) {
    font-size: 120px;
    font-weight: 700;
}

.counter-section .yr-ex-box span:nth-child(2) {
    font-size: 40px;
    font-weight: 700;
    width: 50%;
    text-align: center;
    line-height: 40px;

}

.counter-section .project-complete {
    background: url(../images/home-page/counters/counter2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    align-items: center;
    padding: 0 30px;
}

.counter-section .happy-clients {
    background: url(../images/home-page/counters/counter3.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    align-items: center;
    padding: 30px;
}

.counter-section .project-complete p,
.counter-section .happy-clients p {
    margin: 0;
    font-size: 40px;
    font-weight: 400;
    line-height: 40px;
    line-height: 45px;
}

.counter-section .project-complete p span,
.counter-section .happy-clients p span {
    font-weight: 700;
    color: var(--counter-font-color);
}

.counter-section .project-complete .col-4 span,
.counter-section .happy-clients .col-4 span {
    font-size: 100px;
    color: var(--counter-font-color);
    font-weight: 700;
}

/* ------- 11. Schedule demo styles --------- */

.schedule-demo-section {
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/home-page/schedule-demo-bg.png);
    padding: 80px 0 !important;
}

.schedule-demo-section h2 {
    margin: 0;
    color: #fff;
    font-weight: 400;
    font-size: 55px;
}

.schedule-demo-section span {
    font-weight: 700;

}

.schedule-demo-section .book-now-button {
    background: #fff;
    padding: 5px 40px;
    width: fit-content;
    margin-left: auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items: center;
    font-size: 28px;
    color: #484141;
}
.schedule-demo-section a:hover{
    filter: drop-shadow(2px 4px 6px #83dc8c);
}
/* ------- 12. Footer styles --------- */

.footer-section {
    background-color: #EFEFEF;
    padding: 50px 0;
}

.footer-section h3 {
    font-size: 40px;
    color: var(--web-black-color);
    margin: 0;
}

.footer-section h4 {
    font-weight: bold;
    font-size: 40px;
    margin: 0;
}

.footer-section h6 {
    color: var(--footer-font-color);
    width: 80%;
}

.footer-section .contact-details-box .col-6 h6 {
    color: var(--footer-font-color);
    font-weight: bold;
}

.footer-section .contact-details-box .col-6 a,
.footer-section .contact-details-box .col-6 P {
    color: var(--footer-font-color) !important;
}

.footer-section .social-media-box {
    display: flex;
    gap: 10px;
}

.footer-section .social-media-box a i {
    color: #3D3A3A;
    font-size: 18px;
}

.footer-section .copy-right-box p {
    font-size: 12px;
    margin: 0;
    color: var(--footer-font-color);
}

.footer-section .footer-form-widget {
    background: #fff;
    box-shadow: 0px 4px 16.7px 0px #00000040;
    border-radius: 30px;
    padding: 40px;
}

.footer-section .footer-form-widget .title-box h3 {
    color: var(--web-black-color);
    font-weight: 300;
}

.footer-section .footer-form-widget .title-box p {
    color: var(--footer-font-color);
}

.footer-section .footer-form-widget form input {
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    padding: 0 0 5px;
    outline: none;
    box-shadow: none;
}

.footer-section .footer-form-widget form input::placeholder {
    color: #000;
}

.footer-section .footer-form-widget .submit-btn {
    background: #D9D9D9;
    border: none;
    padding: 5px 70px;
    margin-top: 30px;
}

/* -------------------- About page designs start -------------------- */

/* ------- 13. About Section styles --------- */

.about-section h2 {
    font-size: 100px;
    font-weight: 600;
    color: #c2c2c2;
    opacity: 0.3;
}

.about-section h5 {
    font-size: 22px;
    margin-bottom: 40px;
    width: 223px;
}

.about-section p {
    width: 80%;
}

.about-section .video-play-button-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.about-section .video-play-button-box .outer-icon {
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    animation: play-button-rotation 7s infinite linear;
}

.about-section img {
    border-radius: 7px;
}

.about-section .col-6:nth-child(2) {
    padding-top: 5%;
}

/* ------- 14. What We Do styles --------- */

.what-we-do-section h2 {
    margin: 0;
    text-align: center;
    padding: 50px 0;
    background: #A0988F;
    font-size: 40px;
    color: #fff;
    font-family: "Sofia-Pro-Az";
}
.what-we-do-section h2 span {
    opacity: 0;
    transform: scaleX(0.5);
    display: inline-block;
}


.what-we-do-section .images-box {
    height: 700px;
    display: flex;
}

.what-we-do-section .images-box .image-div {
    background-image: var(--what-we-do-bg-image);
    background-size: 300% 100%;
    background-position-x: 22%;
    background-repeat: no-repeat;
    width: 30%;
    height: 100%;
    padding: 40px 0 0 40px;
    transition: all 0.5s ease-out;
}

.what-we-do-section .images-box .image-div:hover {
    width: 100%;
    background-size: 150% 100%;
}

.view-eye {
    position: relative;
    top: 45%;
    left: 42%;
    font-size: 30px;
    background: #0000006e;
    width: 22%;
    text-align: center;
    border-radius: 50%;
    height: 109px;
    color: #ffffff;
    display: none;
}

.view-eye i {
    position: relative;
    top: 30px;
}

.image-div:hover .view-eye {
    display: block;
}


.what-we-do-section .images-box .image-div h3 {
    color: #fff;
    width: 50%;
    margin: 0;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 18px;
}
.what-we-do-section .slider-controls button {
    color: #fff;
    border: none;
    padding: 14px;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /*border-radius: 50%;*/
    background: #00000000;
    font-family: "Sofia-Pro-Az";
    text-transform: uppercase   ;
}
.what-we-do-section .slider-controls {
    position: relative;
    top: -322px;
    transform: translateY(-50%);
    width: 100%;
    display: flex
;
    justify-content: space-between;
    padding: 0 10px;
}
/* Style for the entire scrollbar */
.what-we-do-section .images-box::-webkit-scrollbar {
    width: 10px;  /* Adjust the width of the scrollbar */
    height: 1px; /* Adjust the height for horizontal scrollbar */
}

/* Style for the scrollbar track (background) */
.what-we-do-section .images-box::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light grey background for the track */
    border-radius: 10px;  /* Optional: rounded corners for the track */
}

/* Style for the scrollbar handle (the part that moves) */
.what-we-do-section .images-box::-webkit-scrollbar-thumb {
    background: #888; /* Darker grey color for the thumb */
    border-radius: 10px;  /* Optional: rounded corners for the thumb */
}

/* Hover effect for the scrollbar thumb */
.what-we-do-section .images-box::-webkit-scrollbar-thumb:hover {
    background: #555; /* Darker shade when hovering */
}

/* Style for the scrollbar corner (bottom-right corner) */
.what-we-do-section .images-box::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* ------- 15. Quote styles --------- */

.quote-section .quote-div .quote-inner {
    border: 1px solid #000;
    padding: 60px 0 60px 40px;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    height: 230px;
    width: 80%;
    margin-left: auto;
    background-image: url(../images/about-page/quote-bg.png);
}

.quote-section .quote-div .quote-inner p {
    font-size: 35px;
    margin: 0;
    font-family: "Sacramento";
    color: #5A5B49;
}

.quote-section .quote-div .quote-inner .quote-icon.top {
    position: absolute;
    top: -10%;
    left: -7%;
}

.quote-section .quote-div .quote-inner .quote-icon.bottom {
    position: absolute;
    bottom: -30%;
    right: 20%;
    transform: rotate(180deg);
}


/* -------------------- Projects page designs start -------------------- */

/* ------- 16. Projects section styles --------- */
/* Initial state: All images overlap */
/* Excluded image - No animation */


.project-images-section img {
    position: absolute;
    top: 605%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: all 0.4s ease-out;
}



.project-inner.left img {
    position: static;
    transform: none;
    opacity: 1;
}

/* Animated images */
.projects-section img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 1s ease-out;
}

.projects-section.animate-images img {
    position: static;
    transform: none;
    opacity: 1;
}

/* Add staggered animations for other images */
.projects-section.animate-images img:nth-child(2) {
    transition-delay: 0.2s;
}

.projects-section.animate-images img:nth-child(3) {
    transition-delay: 0.2s;
}


.projects-section .project-inner {
    height: 550px;
}

.projects-section .project-inner2 {
    height: 270px;
}

.projects-section .project-inner img,
.projects-section .project-inner2 img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.projects-section .project-inner.img-position img {
    object-position: 80%;
}

.projects-section .project-inner.shade::before,
.projects-section .project-inner2.shade::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    background: #00000085;
}

.projects-section .project-details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.projects-section .project-details h4 {
    font-weight: 600;
    color: #fff;
    font-size: 30px;
    margin-bottom: 30px;
}

.projects-section .project-details .person-name {
    border: 1px solid #fff;
    padding: 10px 20px;
    border-radius: 30px;
    width: fit-content;
    margin: auto;
    display: flex;
    justify-content: center;
    /* align-content: center; */
    align-items: center;
}

.projects-section .project-inner .person-name span,
.projects-section .project-inner2 .person-name span {
    color: #fff;
    margin-left: 8px;
    font-size: 14px;
}

.projects-section .project-details .person-name img {
    width: 30px;
}

.projects-section .small-images img {
    height: 260px;
    object-fit: cover;
}

.projects-section .custom-flex {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* -------------------- Projects Description page designs start -------------------- */

/* ------- 17. Projects Description styles --------- */

.page-banner-widget .badge {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    background-color: #F08B23;
}

.project-description h2 {
    font-size: 100px;
    font-weight: 600;
    color: #c2c2c2;
    opacity: 0.3;
}

.project-description h5 {
    font-size: 22px;
    margin-bottom: 40px;
}

.project-description .sub-details .sub-inner {
    display: flex;
    align-items: center;
    gap: 30px;
}

.project-description .sub-details .sub-inner .person-name span {
    font-size: 22px;
    margin-left: 5px;
}

.project-description .project-description-content {
    font-family: "Montserrat";
    margin-top: 10%;
}

.project-images-section .project-left-img img {
    height: 500px;
    object-fit: cover;
    object-position: right;
}

.project-images-section .project-right-img img {
    height: 240px;
    width: 100%;
    object-fit: cover;
}

.project-images-section .project-right-img .space-between {
    justify-content: space-between;
    height: 100%;
}

.project-images-section .image-resize img {
    height: 240px;
    object-fit: cover;
}

/* .project-images-section img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all 0.4s ease-out;
} */


.project-images-section.animate-images .project-left-img img {
    position: static;
    transform: none;
    opacity: 1;
}

.project-images-section.animate-images .project-right-img img,
.project-images-section.animate-images .image-resize img {
    position: static;
    transform: none;
    opacity: 1;
}


.client-logo-section .client-logo-box {
    display: flex;
    justify-content: space-around;
}

/* -------------------- Brands page designs start -------------------- */

/* ------- 18. Brands styles --------- */

/* .brands-section #image-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
} */
.brand-row.visible {
    opacity: 1;
    transform: translateY(0);
}
 .brands-con{
    max-width: 1200px;
 }
.brands-section #image-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.brands-section .brand-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    opacity: 1; /* Initially hidden */
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.brands-section .brand-row.visible {
    opacity: 1; /* Fade in when animation starts */
    transform: translateX(0); /* Move to normal position */
    animation-duration: 4s; 
    animation-timing-function: ease-out;
    animation-iteration-count: 1; /* Ensure animation runs once */
}

@keyframes slide-right-left {
    0% {
        transform: translateX(100%); /* Start offscreen to the right */
    }
    100% {
        transform: translateX(0); /* End at normal position */
    }
}

@keyframes slide-left-right {
    0% {
        transform: translateX(-100%); /* Start offscreen to the left */
    }
    100% {
        transform: translateX(0); /* End at normal position */
    }
}

.slide-right-left {
    animation-name: slide-right-left;
}

.slide-left-right {
    animation-name: slide-left-right;
}

.hidden {
    visibility: hidden; /* Initially hide rows */
}


/* -------------------- Solutions page designs start -------------------- */

/* ------- 19. Solutions styles --------- */

.solutions-content-section h1,
.solutions-details-section .section-heading h1 {
    font-size: 100px;
    color: #c2c2c2;
    font-family: "Montserrat";
    font-weight: 700;
}

.solutions-content-section h6,
.solutions-details-section .section-heading h6 {
    font-family: "Sofia-Pro-Az";
    width: 220px;
}

.solutions-content-section p {
    width: 80%;
}

.key-solutions-section h2 {
    font-family: "Sofia-Pro-Az";
}

.key-solutions-section .key-solution-box {
    background: #D9D9D9;
    text-align: center;
    padding: 50px 0;
    border-radius: 30px;
    width: 90%;
    margin-left: auto;
    transition: all 0.3s ease-in-out;
}

/* .key-solutions-section .key-solution-box.width-100{
    width: 100%;
} */

/* .key-solutions-section .key-solution-box p {
    font-family: "Sofia-Pro";
    font-size: 18px;
    color: #555755;
    margin-top: 5%;
    margin-bottom: 0;
}

.key-solutions-section .key-solution-box.service-box {
    width: 70%;
    margin-top: 10px;
}

.key-solutions-section .key-solution-box.active-box {
    background: #656F7E;
}

.key-solutions-section .key-solution-box.active-box p {
    color: #fff;
}

.key-solutions-section .key-solution-box:hover {
    background: #656F7E;
}

.key-solutions-section .key-solution-box:hover p {
    color: #fff;
}
.key-solution-box:hover img {
    filter: brightness(0) invert(1); 
    transition: all 0.3s ease;
} */

.key-solution-box p {
    font-family: "Sofia-Pro-Az";
    font-size: 18px;
    color: #555755;
    margin-top: 5%;
    margin-bottom: 0;
}

.key-solution-box.service-box {
    width: 70%;
    margin-top: 10px;
}

.key-solution-box.active-box {
    background: #656F7E;
}

.key-solution-box.active-box p {
    color: #fff;
}

.key-solution-box:hover {
    background: #656F7E;
}

.key-solution-box:hover p {
    color: #fff;
}

.key-solution-box:hover img {
    filter: brightness(0) invert(1);
    transition: all 0.3s ease;
}


.solutions-details-section .video-play-button-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.solutions-details-section .video-play-button-box .outer-icon {
    width: 100%;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    animation: play-button-rotation 7s infinite linear;
}

.solutions-details-section img {
    border-radius: 7px;
}

.solutions-details-section .key-solution-type {
    border: 1px solid;
    border-radius: 20px;
    padding: 20px 0;
    transition: all 0.3s ease-out;
    width: 90%;
    margin: 0 auto;
}

.solutions-details-section .key-solution-type:hover {
    background-color: #D9D9D9;
}

.solutions-details-section .key-solution-type .arrow-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
}

.solutions-details-section .key-solution-type h4 {
    color: #484141;
}

.solutions-details-section .key-solution-type p {
    font-size: 12px;
    margin: 0;
}

.solutions-details-section .key-solution-type-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
}



/* -------------------- Contact page designs start -------------------- */

/* ------- 20. Contact Details styles --------- */

.contact-details-section .contact-details-card {
    font-family: "saira";
    border: 1px solid #3F3F3F;
    padding: 20px;
    border-radius: 20px;
}

.contact-details-section .contact-details-card img {
    padding: 10px;
    border: 1px solid #B3B3B3;
}

.contact-details-section .contact-details-card h6 {
    font-weight: 600;
}

.contact-details-section .contact-details-card p {
    font-size: 12px;
    color: #333333;
}

.contact-details-section .contact-details-card a {
    color: #848484 !important;
}

/* ------- 21. Frequently Asked Questions styles --------- */

.frequently-asked-questions-sections h2 {
    font-weight: 700;
    font-size: 50px;
}

.frequently-asked-questions-sections .accordion {
    border: 1px solid #c2c2c238;
    font-family: "saira";
}

.frequently-asked-questions-sections .accordion-item .circle-shape {
    height: 20px;
    width: 20px;
    /* background-color: darkgray; */
    border-radius: 50%;
    margin-right: 10px;
}

.frequently-asked-questions-sections .accordion-button:not(.collapsed) {
    background-color: #FAFBFF;
    color: inherit;
}

.frequently-asked-questions-sections .accordion-button:focus {
    box-shadow: none !important;
}


.frequently-asked-questions-sections .accordion-button {
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    color: #000000;
}

.frequently-asked-questions-sections .accordion-item {
    border-bottom: 1px solid #c2c2c238;
}

.frequently-asked-questions-sections .accordion-button.collapsed {
    background-color: #fff;
}

/* -----------------13.Scroll Behaviour---------------- */
#section1 {
    scroll-behavior: smooth;
}

/* ------------------14.Other Company Image rotaion------------------ */

#rotating-image {
    transform-origin: center;
}

#rotating-image.animate {
    animation: rotate360 10s linear infinite;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


@keyframes moveUpAndDown {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.animate {
    animation: moveUpAndDown 2s infinite;
}

/* ------------arrows------------ */
.fisrt_arrow {
    position: relative;
    top: -13%
}

.second_arrow {
    position: relative;
    top: -55%;
}

.second_arrow img {
    width: 13px !important;
    animation: moveUpDowns 1.5s infinite;
}

@keyframes moveUpDowns {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes upDownAnimation {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.arrow-animation {
    animation: upDownAnimation 1.5s infinite ease-in-out;
}


/* ----------------project-image-animation--------------------------- */
.animate-images {
    animation: slideInRight 1s ease-out forwards;
}

@keyframes slideInRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}


.reset-animation {
    transform: translateX(0);
    opacity: 0;
}


/* --------------contact icons animation--------------- */


.contact-details-card img {
    transition: transform 0.3s ease;
}

.contact-details-card:nth-child(1):hover img {
    animation-name: bounceEffect;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}


.contact-details-card:nth-child(2):hover img {
    animation-name: upDownEffect;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}


.contact-details-card:nth-child(3):hover img {
    animation-name: shakeEffect;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}


@keyframes bounceEffect {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}


@keyframes upDownEffect {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}


@keyframes shakeEffect {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}


.before-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(233, 233, 233, 0.5); 
    z-index: -1; 
}


.fancybox__toolbar {
    background-color: rgba(0, 0, 0, 0.8); /* Dark background for the toolbar */
}

.fancybox__button {
    color: white; /* White icons */
    transition: color 0.3s;
}

.fancybox__button:hover {
    color: #007bff; /* Highlight on hover */
}


.navbar-nav .nav-link.active {
    color: #787373 !important;
    font-weight: bold;
    border-bottom: 2px solid #b4b4b4;
}
.navbar-nav .nav-link:hover {
    color: #a8c8e8 !important;
}
.pn{
    padding: 6px;
    font-size: 10px;
    font-family: "Sofia-Pro-Az";
    text-transform: uppercase   ;
}
.navbar-nav .nav-link.active {
    color: #787373 !important;
    font-weight: bold;
    border-bottom: 2px solid #b4b4b4;
}
.navbar-nav .nav-link:hover {
    color: #a8c8e8 !important;
}

.bg-gold-img::before {
    background-image: url(/assets/images/home-page/Ellipse.jpg);
    position: absolute;
    top: 0;
    left: -127px;
    content: '';
    height: 98%;
    width: 120%;
    filter: drop-shadow(0px 0px 0px #84848480);
    border-radius: 1px 164px 165px 1px;
}
.bg-gold-img2::before {
    background-image: url(/assets/images/home-page/Ellipse.jpg);
    position: absolute;
    top: -40px;
    right: -104px;
    content: '';
    height: 137%;
    width: 46%;
    filter: drop-shadow(0px 0px 0px #84848480);
    border-radius: 144px 2px 1px 157px;
    /* filter: drop-shadow(2px 4px 6px black); */
}

.offcanvas-start {
    top: 0;
    left: 0;
    width: 281px !important;
    border-right: 1px solid rgba(0, 0, 0, .2);
    transform: translateX(-100%);
}