/*========================
FONTS LINK HERE
========================*/

@import url("https://fonts.cdnfonts.com/css/helvetica-neue-55");
@import url("https://fonts.cdnfonts.com/css/sf-pro-display");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import url("https://v1.fontapi.ir/css/SFProDisplay");
@font-face {
    font-family: "Clash Display Variable";
    src: url(font/ClashDisplay-Variable.ttf);
}

/*========================
DEFAULT CSS HERE
========================*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: "SF Pro Display", sans-serif;
    font-size: 16px;
    font-weight: 400;
    background: #FAFAFA !important;
    line-height: 1.5;
    color: #212529;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

:root {
    --helveticaNeue: "Helvetica Neue", sans-serif;
    --opensans: "Open Sans", sans-serif;
    --inter: "Inter", sans-serif;
}

h1,
h2,
h3,
h5,
h6,
p {
    margin: 0;
}

p {
    color: #4D4D4D !important;
}

a,
a:hover {
    text-decoration: none;
    display: inline-block;
}

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

img {
    width: 100%;
    vertical-align: middle;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

.row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}

.row>* {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.col-3 {
    flex: 0 0 auto;
    width: 25%;
}

.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}

.col-6 {
    flex: 0 0 auto;
    width: 50%;
}

.align-items-center {
    align-items: center !important;
}

.text-end {
    text-align: right !important;
}

.offset-2 {
    margin-left: 16.66666667%;
}

.text-center {
    text-align: center !important;
}

.d-none {
    display: none !important;
}

.d-block {
    display: block !important;
}

.g-3,
.gx-3 {
    --bs-gutter-x: 1rem;
}

.g-3,
.gy-3 {
    --bs-gutter-y: 1rem;
}

.order-1 {
    order: 1 !important;
}

.order-2 {
    order: 2 !important;
}

.order-3 {
    order: 3 !important;
}

.order-4 {
    order: 4 !important;
}

.order-5 {
    order: 5 !important;
}

.h-100 {
    height: 100% !important;
}

.g-0,
.gx-0 {
    --bs-gutter-x: 0;
}

.g-0,
.gy-0 {
    --bs-gutter-y: 0;
}

.gap-1 {
    gap: 10px;
}
.gap-2 {
    gap: 20px;
}
.gap-3 {
    gap: 30px;
}
.gap-4 {
    gap: 40px;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: 0.25rem !important;
}

.pt-2 {
    padding-top: 0.5rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.pt-6 {
    padding-top: 3.5rem !important;
}

.pt-7 {
    padding-top: 4rem !important;
}

.pt-8 {
    padding-top: 4.5rem !important;
}


.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: 0.25rem !important;
}

.pb-2 {
    padding-bottom: 0.5rem !important;
}

.pb-3 {
    padding-bottom: 1rem !important;
}

.pb-4 {
    padding-bottom: 1.5rem !important;
}

.pb-5 {
    padding-bottom: 3rem !important;
}

.pb-6 {
    padding-bottom: 3.5rem !important;
}

.pb-7 {
    padding-bottom: 4rem !important;
}

.pb-8 {
    padding-bottom: 4.5rem !important;
}


.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.p-5 {
    padding: 3rem !important;
}


.px-0 {
    padding-top: 0 !important;
}

.px-1 {
    padding-left: 0.25rem !important;
    padding-right: 0.25rem !important
}

.px-2 {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important
}

.px-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
}

.justify-content-center {
    justify-content: center !important;
}

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

.d-flex {
    display: flex !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.yellow-bg {
    background-color: #fbe302;
    display: inline-block;
    padding: 0 5px;
    border-radius: 25px;
    padding-left: 10px;
    padding-right: 10px;
}

.scrolltotop {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #ffc701;
    text-align: center;
    font-size: 22px;
    color: #ffffff;
    position: fixed;
    right: 30px;
    bottom: 25px;
    display: none;
    animation: lab_top_up 5s linear infinite;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 1;
}

.scrolltotop i {
    color: #ffff;
}

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

.pluse,
.pluse2 {
    position: relative;
    top: 11px;
    left: -9px;
    z-index: -1;
}

.pluse::before,
.pluse2::before {
    width: 40px;
    height: 40px;
}

.pluse::after,
.pluse::before,
.pluse2::after,
.pluse2::before {
    background: #ffc701;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    display: block;
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
}

.pluse::after,
.pluse2::after {
    width: 30px;
    height: 30px;
    background: transparent;
    margin-left: -15px;
    margin-top: -15px;
}

.pluse::before {
    -webkit-animation: pluse_animate 2.5s infinite linear;
    animation: pluse_animate 2.5s infinite linear;
}

.pluse2::before {
    -webkit-animation: pluse_animate 3s infinite linear;
    animation: pluse_animate 3s infinite linear;
}

@keyframes pluse_animate {
    0% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(0.3);
        transform: translate(-50%, -50%) scale(0.3);
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(2);
        transform: translate(-50%, -50%) scale(2);
    }
}

.container {
    padding-left: 45px;
    padding-right: 45px;
}

/*========================
HEADER HERO COMBAIND CSS HERE
========================*/

.hero-header-area {
    padding-top: 33px;
    padding-bottom: 120px;
    background-color: #f5f5f5;
}

.header-wrpper {
    border-radius: 200px;
    padding: 20px 30px;
    background-color: rgba(155, 154, 154, 0.3);
    backdrop-filter: blur(15px);
}

.header-wrpper-sticky {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    width: calc(100vw - 30px);
    max-width: 1290px;
    animation: slideDown 0.65s ease-out;
}

@keyframes slideDown {
    from {
        top: -120px;
    }
    to {
        top: 35px;
    }
}

/*========================
HEADER CSS HERE
========================*/

.navfixed {
    position: fixed;
    left: 0;
    top: 0px;
    width: 100%;
    z-index: 999;
    /* transition: 0.3s; */
}

.blurred-bg {
    backdrop-filter: blur(60px);
    background-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #0d6efd;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.navfixed .header-wrpper {
    background-color: transparent !important;
    border-radius: 200px;
    padding: 20px 30px;
    transition: 0.3s;
    backdrop-filter: blur(60px);
}

.nav-for-bg .header-wrpper {
    background-color: #fff;
}

#content .navfixed .header-wrpper {
    background-color: #fff !important;
}

.canary-navbar-wrpper .navbar {
    justify-content: center;
    padding: 0;
}

.canary-menu li a,
.mobile-menu li a {
    color: #000 !important;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
    position: relative;
}

.SMN_effect-14 a {
    position: relative;
    -webkit-transition: color 0.3s;
    -moz-transition: color 0.3s;
    transition: color 0.3s;
    padding-left: 0;
    padding-right: 0;
    margin: 0 15px;
}

.SMN_effect-14 a::after {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    height: 2px;
    background-color: #000;
    bottom: 6px;
    transform: translateY(15px);
    transition: 0.3s all ease;
    opacity: 0;
}

.SMN_effect-14 a:hover::after {
    transform: translateY(0px);
    opacity: 1;
}

.request-demo-btn-wrpper a {
    padding: 13.42px 30px;
    border-radius: 54.313px;
    background: #000;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    overflow: hidden;
    margin: auto;
    display: block;
    transition: all 0.3s ease;
}

.request-demo-btn-wrpper a:hover {
    background-color: #2d4450;
}

.request-demo-btn-wrpper a img,
.hero-request-btn a img {
    width: 17px;
    margin-left: 5px;
}

.hero-request-btn a {
    transition: 0.3s !important;
}

.hover-effect a span,
.hover-effect a img {
    position: relative;
    z-index: 5555;
}

.hover-effect a::before {
    content: "";
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    height: 0px;
    width: 0px;
    border-radius: 50%;
    background-color: #7ccb87;
}

.hover-effect a:hover::before {
    width: 700px;
    height: 700px;
    transition: width 0.5s, height 0.5s;
}

.hamburger .line {
    width: 40px;
    height: 3px;
    background-color: #000;
    display: block;
    margin: 10px 0;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.hamburger:hover {
    cursor: pointer;
}

#hamburger-1.is-active .line:nth-child(2) {
    opacity: 0;
}

#hamburger-1.is-active .line:nth-child(1) {
    -webkit-transform: translateY(13px) rotate(45deg);
    -ms-transform: translateY(13px) rotate(45deg);
    -o-transform: translateY(13px) rotate(45deg);
    transform: translateY(13px) rotate(45deg);
}

#hamburger-1.is-active .line:nth-child(3) {
    -webkit-transform: translateY(-13px) rotate(-45deg);
    -ms-transform: translateY(-13px) rotate(-45deg);
    -o-transform: translateY(-13px) rotate(-45deg);
    transform: translateY(-13px) rotate(-45deg);
}

.btn-close:focus {
    outline: none;
    box-shadow: none;
    opacity: 1;
}

.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    visibility: hidden;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    transition: transform 0.3s ease-in-out;
}

.offcanvas-start {
    top: 0;
    left: 0;
    width: 400px;
    border-right: 1px solid rgba(0, 0, 0, 0.2);
    transform: translateX(-100%);
    visibility: visible;
}

.offcanvas-header {
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
}

.offcanvas-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem 0rem !important;
}

.dropdown-item {
    padding: 0.5rem 1rem !important;
}

.offcanvas-start.active {
    transform: translateX(0);
}

.offcanvas-header button {
    background: transparent;
    border: none;
    outline: none;
    font-size: 20px;
    cursor: pointer;
}

/*========================
HERO AREA CSS HERE
========================*/

.hero-area-wrpper {
    /* margin-top: 33px; */
}

.hero-title h2 {
    color: #000;
    font-size: 82.826px;
    font-weight: 300;
    letter-spacing: 1.183px;
    line-height: calc(1em + 1px); 
}

.hero-title h2 p {
    display: inline-block;
    background-color: #ffe702;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 21.355px;
    color: #000 !important;
}

.hero-description {
    max-width: 458px;
}

.hero-description p {
    color: #4d4d4d;
    font-family: var(--helveticaNeue);
    margin-top: 48px;
}

.hero-request-btn {
    margin-top: 64px;
}

.hero-request-btn a {
    width: 312px;
    text-align: center;
    margin-right: auto !important;
    margin-left: 0 !important;
    padding: 22px 0;
    transition: 0.3s;
}

.hero-imgs {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hero-charts {
    display: flex;
    gap: 20px;
}

.hero-line-chart {
    width: 70%;
}

.hero-img-bottom img {
    border-radius: 10px;
}

.hero-pie-chart {
    width: 30%;
}

.hero-pie-chart img {
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

/*========================
Overview AREA CSS HERE
========================*/

.overview-area {
    padding: 100px 0;
}

.overview-left p {
    color: #808080;
    font-family: var(--helveticaNeue);
}

.overview-right h3 {
    color: #000;
    font-size: 55px;
    font-weight: 300;
    letter-spacing: 0.962px;
    line-height: 100%;
}

.sinlge-figure h3 {
    color: #3dacff;
    font-family: "Clash Display Variable";
    font-size: 75px;
    letter-spacing: 0.962px;
    font-weight: 400;
}

.sinlge-figure p {
    color: #808080;
    font-family: var(--helveticaNeue);
}

.overview-figures {
    display: flex;
    justify-content: space-between;
    margin-top: 70px;
}

.sinlge-figure {
    width: 32%;
}

/*========================
CANARY PROPOSES AREA CSS HERE
========================*/

.canary-proposes-area {
    padding: 141px 0;
    transition: 0.5s;
    padding-top: 144px;
}

.canary-proposes-area:hover {
    background-color: #ffe702;
}

.proposes-title-wrpper h3 {
    color: #000;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: 0.802px;
    line-height: 50px;
}

.offer-img {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background-color: #ffe703;
    transition: 0.5s;
}

.canary-proposes-area:hover .offer-img {
    background-color: #fff;
}

.provide-offers {
    padding-top: 70px;
    display: flex;
    flex-wrap: wrap;
}

.offer-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-img img {
    width: 44px;
    display: block;
    text-align: center;
    margin-left: 4px;
}

.offer-title p {
    color: #000;
    font-size: 30.109px;
    font-weight: 300;
    letter-spacing: 0.483px;
    position: relative;
    margin-top: 28px;
}

.offer-title p::after {
    content: "";
    display: block;
    clear: both;
    position: absolute;
    width: 100px;
    height: 3px;
    background-color: #fed000;
    bottom: -14px;
    left: 0;
    transition: 0.5s;
}

.canary-proposes-area:hover .offer-title p::after {
    background-color: #fff;
}

.offer-title span {
    color: #4d4d4d;
    font-family: var(--helveticaNeue);
    display: block;
    margin-top: 28px;
}

.control-list {
    margin-top: 30px;
}

.control-list p {
    color: #4d4d4d;
    font-size: 20px;
    margin-bottom: 17px;
}

.control-list li {
    color: #4d4d4d;
    font-family: var(--helveticaNeue);
    margin-bottom: 6px;
    display: flex;
    gap: 10px;
}

.single-offer {
    width: 50%;
    padding-left: 10px;
    padding-bottom: 40px;
    padding-right: 30px;
    border-right: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    transition: 0.5s;
}

.canary-proposes-area:hover .single-offer {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.canary-proposes-area:hover .single-offer:nth-child(2),
.canary-proposes-area:hover .single-offer:nth-child(4),
.single-offer:nth-child(2),
.single-offer:nth-child(4) {
    border-right: none;
    padding-left: 40px;
}

.single-offer:nth-child(3),
.single-offer:nth-child(4) {
    padding-top: 40px;
    border-bottom: none;
}

.canary-proposes-area:hover .single-offer:nth-child(3),
.canary-proposes-area:hover .single-offer:nth-child(4) {
    border-bottom: none;
}

.control-list li i {
    color: #fed000;
    transition: 0.5s;
    padding-top: 5px;
}

.canary-proposes-area:hover .control-list li i {
    color: #000;
}

/*========================
driven research AREA CSS HERE
========================*/

.driven-research-area {
    background: url(images/drive-research.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.driven-researc-overlay {
    padding-top: 548px;
    padding-bottom: 154px;
    background: rgba(0, 0, 0, 0.1);
}

.driven-research-title {
    padding-bottom: 30px;
}

.driven-research-title h2 {
    color: #fff;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: 0.962px;
    line-height: 100%;
}

.driven-research-content p {
    color: #fff !important;
    font-family: var(--helveticaNeue);
    font-size: 16px;
    margin-left: auto;
}

.driven-research-content p:first-child {
    margin-bottom: 1rem;
}

.index-submit-btn input:disabled {
    cursor: not-allowed;
}

.index-submit-btn img {
    padding-left: 4px;
    margin-top: 4px;
}

/*========================
ADVANCE MINE AREA CSS HERE
========================*/

.advance-mine-area {
    padding: 160px 0;
    background-color: #fafafa;
}

.advance-mine-top h2 {
    color: #000;
    font-size: 50px;
    font-weight: 300;
    letter-spacing: 0.802px;
    line-height: 100%;
    margin-bottom: -10px;
}

.mind-text-wrapper {
    height: 61px;
    overflow: hidden;
    margin-top: 10px;
}

.mind-text-list a {
    color: #121212;
    text-decoration: none;
    font-size: 50px;
    font-weight: 300;
}

.mind-text-list {
    padding: 0px;
    list-style: none;
    -webkit-animation: pooja 9s ease-in-out infinite;
    -moz-animation: pooja 9s ease-in-out infinite;
    -ms-animation: pooja 9s ease-in-out infinite;
    -o-animation: pooja 9s ease-in-out infinite;
    animation: pooja 9s ease-in-out infinite;
}

@keyframes pooja {
    0% {
        margin-top: 0;
    }
    20% {
        margin-top: -80px;
    }
    40% {
        margin-top: -160px;
    }
    60% {
        margin-top: -230px;
    }
    80% {
        margin-top: -310px;
    }
    100% {
        margin-top: 0;
    }
}

@-moz-keyframes pooja {
    0% {
        margin-top: 0;
    }
    20% {
        margin-top: -80px;
    }
    40% {
        margin-top: -160px;
    }
    60% {
        margin-top: -230px;
    }
    80% {
        margin-top: -310px;
    }
    100% {
        margin-top: 0;
    }
}

@-webkit-keyframes pooja {
    0% {
        margin-top: 0;
    }
    20% {
        margin-top: -80px;
    }
    40% {
        margin-top: -160px;
    }
    60% {
        margin-top: -230px;
    }
    80% {
        margin-top: -310px;
    }
    100% {
        margin-top: 0;
    }
}

@-ms-keyframes pooja {
    0% {
        margin-top: 0;
    }
    20% {
        margin-top: -80px;
    }
    40% {
        margin-top: -160px;
    }
    60% {
        margin-top: -230px;
    }
    80% {
        margin-top: -310px;
    }
    100% {
        margin-top: 0;
    }
}

@-o-keyframes pooja {
    0% {
        margin-top: 0;
    }
    20% {
        margin-top: -80px;
    }
    40% {
        margin-top: -160px;
    }
    60% {
        margin-top: -230px;
    }
    80% {
        margin-top: -310px;
    }
    100% {
        margin-top: 0;
    }
}

.single-packge-one {
    background-color: #f5f5f5;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
    border-radius: 15px;
    transition: 0.6s;
}

.single-packge-one:hover {
    background-color: #ffe702;
    padding-top: 40px;
    padding-bottom: 30px;
}

.pkg-top-icon-area,
.packeg-two-icon {
    width: 83px;
    height: 83px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pkg-top-img-area {
    width: 50%;
    /* height: 130px; */
    /* margin-left: auto;  */
}

.packeg-top {
    display: flex;
}

.performance-img,
.packge-heading {
    position: relative;
}

.packge-heading {
    margin-bottom: 16px;
}

.performance-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.performance-img img,
.packge-heading img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
}

.packeg-bottom {
    margin-top: 20px;
}

.packeg-bottom h3 {
    color: #000;
    font-size: 30.109px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.483px;
    margin-bottom: 20px;
    line-height: 100%;
}

.packeg-bottom p {
    color: #4d4d4d;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    width: 85%;
}

.packeg-two-top {
    display: flex;
    justify-content: space-between;
}

.single-packge-two {
    background-color: #f5f5f5;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 20px;
    border-radius: 15px;
}

.pkg-two-cntn {
    width: 70%;
    background-color: #fff;
    padding-top: 14px;
    padding-left: 18px;
    padding-bottom: 20px;
    padding-right: 18px;
    border-radius: 15px;
    position: relative;
}

.pkg-two-cntn::after {
    content: "";
    display: block;
    clear: both;
    position: absolute;
    top: 100%;
    left: 50%;
    border-top: 25px solid #fff;
    border-right: 20px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 20px solid transparent;
}

.pkg-two-content-top {
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 5px;
}

.pkg-two-content-top p {
    margin-bottom: 0;
    padding-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pkg-two-desc-top-line {
    display: flex;
    margin-top: 19px;
    margin-bottom: 26px;
}

.pkg-two-desc-top-line p {
    margin-bottom: 0;
    width: 40%;
}

.pkg-two-desc-top-line p {
    color: #707070;
    font-family: var(--opensans);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.pkg-two-desc-top-line span {
    color: #000;
    font-family: var(--opensans);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.pkg-two-desc-list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pkg-two-desc-list ul li h6 {
    color: #707070;
    font-family: var(--opensans);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-decoration-line: underline;
}

.pkg-two-desc-list ul li p {
    margin-bottom: 0;
    display: inline-block;
    width: 40%;
    color: #707070;
    font-family: var(--inter);
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.pkg-two-desc-list ul li span {
    color: #000;
    font-family: var(--opensans);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.see-trips-btn span {
    color: #387ff3;
    font-family: var(--opensans);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}

.pkg-two-bottm {
    margin-top: 45px;
}

.pkg-two-bottm h3 {
    color: #000;
    font-family: "SF Pro Display";
    font-size: 30.109px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.483px;
    line-height: 100%;
}

.single-packge-one,
.single-packge-two,
.single-packge-three {
    min-height: 492px;
}

.single-packge-three {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.single-packge-three .pkg-two-cntn::after {
    display: none;
}

.pkg-two-alert-wrpper {
    width: 70%;
    margin-left: auto;
    background-color: #fef4f3;
    border: 1px solid #d46985;
    border-radius: 10px 0 0 10px;
    border-right: none;
    display: flex;
    align-items: center;
    padding-left: 15px;
}

.pkg-three {
    display: initial;
}

.pkg-three-top {
    display: flex;
}

.pkg-three .pkg-two-cntn {
    margin-left: auto;
}

.pkg-two-alert-wrpper ul {
    margin: 0;
    padding: 0;
    padding-left: 15px;
    list-style: none;
}

.pkg-two-alert-wrpper ul li {
    color: #1a1a1a;
    font-family: var(--opensans);
    font-size: 13.125px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.pkg-two-alert-wrpper ul li p {
    display: inline-block;
    margin-bottom: 0;
}

.pkg-two-alert-wrpper ul li span {
    font-family: var(--inter) !important;
    font-weight: 400 !important;
}

.pkg-three-cntn {
    margin-top: 21px;
    padding-right: 0;
}

.pkg-three-cntn-top p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.pkg-three-desc-list ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.pkg-two-alert-wrpper img {
    width: 48px;
}

.advance-main-bottom {
    margin-top: 96px;
}

/*========================
WHY CANARY TECHNOLOGY CSS HERE
========================*/

.canary-guide-area {
    padding: 100px 0;
    padding-top: 50px;
    padding-bottom: 248px;
}

.canary-guide-title h2 {
    color: #000;
    font-size: 60px;
    font-style: normal;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.962px;
}

.canary-guide-post-wrpper {
    padding-top: 120px;
}

.single-canary-guide {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.canary-guide-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 53px 30px 64px 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.guide-content-top span {
    color: #fff;
    font-family: var(--helveticaNeue);
    font-style: normal;
}

.guide-content-top h2 {
    color: #fff;
    font-size: 50px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.802px;
    margin-top: 13px;
    line-height: 100%;
}

.guide-content-bottom p {
    color: #fff !important;
    font-family: var(--helveticaNeue);
    font-style: normal;
}

.canary-load-more {
    margin-top: 95px;
}

.canary-load-more a {
    display: flex;
    width: 312px;
    height: 73px;
    padding: 13.424px 18.644px;
    justify-content: center;
    align-items: center;
    border-radius: 54.313px;
    background: #000;
    color: #fff;
    font-size: 20px;
    font-style: normal;
    gap: 15px;
    margin: auto;
}

.canary-load-more a img {
    width: 30px;
}

/*========================
SLIDER AREA CSS HERE
========================*/

.l-slider-bg {
    position: relative;
}

.l-slider-bg img {
    width: 100%;
}

.slider-contetn .container,
.slider-contetn .container .slider-content-wrpper {
    height: 100%;
}

.slider-contetn .container .slider-content-wrpper {
    padding-bottom: 100px;
}

.slider-contetn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 65px;
}

.slider-content-wrpper {
    /* min-height: 900px; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.slider-top-content h2 {
    color: #fff;
    font-size: 50px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.802px;
    line-height: 110%;
}

.slider-bottom-content p {
    width: 641px;
    color: #fff !important;
    font-family: var(--helveticaNeue);
}

.owl-dots {
    display: none;
}

.owl-nav .owl-prev {
    position: absolute;
    right: 10%;
    top: 70px;
}

.owl-nav .owl-next {
    position: absolute;
    right: 7%;
    top: 71px;
}

.owl-nav .owl-prev i,
.owl-nav .owl-next i {
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*========================
OPTIMIZE TODAY AREA CSS HERE
========================*/

.optimize-today-area {
    padding-top: 136px;
    padding-bottom: 208px;
    background-color: #fed000;
}

.optimize-left p {
    color: #696969;
    font-family: var(--helveticaNeue);
}

.optimize-middle h3 {
    color: #000;
    font-size: 60px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.962px;
    line-height: 100%;
}

.optimize-right a {
    color: #000;
    font-size: 18.056px;
    font-style: normal;
    font-weight: 300;
    text-decoration-line: underline;
}

.optimize-right a img {
    width: 30px;
    padding-left: 7px;
}

/*========================
WHY CANARY TECHNOLOGY CSS HERE
========================*/

.canary-technology-area {
    padding-top: 208px;
    padding-bottom: 136px;
    background-color: #ffe703;
}

.technology-title h2 {
    color: #000;
    font-size: 60px;
    font-weight: 300;
    letter-spacing: 0.962px;
    line-height: 100%;
}

.techonology-img img {
    width: 318px;
    display: block;
    margin: auto;
    border-radius: 20px;
}

.single-tech-cntn-wrpper {
    display: flex;
    gap: 20px;
}

.single-point-icon img {
    width: 30px;
}

.single-point-icon {
    padding-top: 7px;
}

.point-title h2 {
    color: #000;
    font-size: 30.109px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.483px;
    margin-bottom: 15px;
}

.point-cntn p {
    color: #4d4d4d;
    font-family: var(--helveticaNeue);
    font-style: normal;
}

.single-tech-cntn-wrpper {
    margin-bottom: 50px;
}

.single-tech-cntn-wrpper:last-child {
    margin-bottom: 0;
}

.canary-technology-wrpper .row .col-lg-5 {
    align-self: flex-end;
}

/*========================
READY TO JOIN AREA CSS HERE
========================*/

.ready-to-join-area {
    background: url(images/ready-join-large-2.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 500px 0;
    padding-top: 288px;
}

.ready-to-join-wrpper h1 {
    color: #000;
    text-align: center;
    font-size: 82.826px;
    font-weight: 300;
    letter-spacing: 1.183px;
    line-height: 100%;
}

.join-single-input input {
    width: 823px;
    height: 63.929px;
    border-radius: 10px;
    background: rgba(171, 171, 171, 0.45);
    border: none;
    outline: none;
    margin: auto;
    display: block;
    padding: 0 30px;
    font-size: 16px;
    /* color: #f6f6f6; */
}

.driven-research-content {
    width: 447px;
    margin-left: auto;
    padding: 20px;
    max-width: 100%;
    border-radius: 10px;
    transition: 0.8s !important;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-user-select: none;
    /* For Safari */
    -moz-user-select: none;
    /* For Firefox */
    -ms-user-select: none;
    /* For Internet Explorer/Edge */
    user-select: none;
    /* Standard Syntax */
}

.join-single-input input::placeholder {
    color: #000;
}

.ready-join-form {
    margin-top: 170px;
}

.mt-5 {
    margin-top: 60px !important;
}

.submit-btn {
    width: 312px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fed000;
    border-radius: 54.313px;
    cursor: pointer;
    margin: 100px auto auto;
    transition: all 0.3s ease;
}

.submit-btn:hover {
    background-color: rgba(254, 208, 0, 0.8);
}

.submit-btn input {
    background-color: transparent;
    border: none;
    outline: none;
    color: #000;
    font-size: 20px;
    font-weight: 400;
}

.submit-btn img {
    width: 30px;
}

/*========================
FOOTER AREA CSS HERE
========================*/

.footer-area {
    padding-top: 59px;
}

.footer-menu p,
.footer-company p,
.footer-location p {
    color: #808080;
    font-family: var(--helveticaNeue);
    margin-bottom: 32px;
}

.footer-menu ul li a {
    color: #000;
    font-size: 35px;
    transition: 0.3s all ease;
}

.footer-menu ul li a:hover {
    color: #fed000;
}

.footer-company ul li {
    margin-bottom: 18px;
}

.footer-company ul li:last-child {
    margin-bottom: 0;
}



.footer-location ul li:last-child {
    margin-top: 20px;
    margin-bottom: 0;
}

.footer-location ul li:last-child a {
    color: #4d4d4d;
}

.footer-location ul li:last-child a {
    transition: 0.2s;
}

.footer-location ul li:last-child a:hover {
    color: #fed000;
}

.footer-company ul li a,
.footer-location ul li {
    color: #4d4d4d;
    transition: 0.3s all ease;
}

.footer-company ul li a {
    text-decoration: underline;
}

.footer-company ul li a:hover {
    color: #fed000;
}

.footer-logo h2,
.footer-logo h3 {
    width: 165.59px;
    text-align: center;
    margin-left: auto;
    line-height: 100%;
    color: #000;
    font-family: "Clash Display Variable";
    font-size: 22.78px;
    font-weight: 500;
    text-transform: uppercase;
}

.footer-logo h2 {
    margin-top: 17px;
}

.footer-bottom {
    margin-top: 50px;
    border-top: 1px solid #ddd;
    padding: 31px 0 33px;
}

.warning p {
    color: #000;
}

.privacy-trems ul {
    display: flex;
    gap: 80px;
    justify-content: flex-end;
}

.privacy-trems ul li a {
    color: #000;
    transition: 0.2s all ease;
}

.privacy-trems ul li a:hover {
    color: #fed000;
}

/*=============================
CONTACT US PAGE CSS START
===============================*/

.contact-header-area {
    background: url(images/ContactUsHeader.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top, center;
}

.contact-header-overlay {
    padding-top: 33px;
    padding-bottom: 200px;
    /* background: rgba(0, 0, 0, 0.3); */
}

.contact-header-title {
    margin-top: 128px;
}

.contact-header-title h2,
.contact-header-title h3 {
    font-size: 80px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 2rem;
    line-height: 100%;
}

.contact-header-title h3 {
    margin-bottom: 0;
}

.contact-header-title p {
    color: #fff !important;
    font-size: 24px;
    font-weight: 300;
}

/*=============================
TRY CANARY CONTACT FORM CSS START
===============================*/

.try-canary-contact-area {
    padding: 60px 0;
    padding-top: 110px;
    /* background-color: #FAFAFA; */
}

.single-canary-input-wrpper {
    display: flex;
    margin-bottom: 52px;
}

.index-number {
    width: 20%;
}

.lable-input-wrpper {
    width: 80%;
}

.index-number span {
    color: #696969;
    font-family: var(--helveticaNeue);
}

.lable-input-wrpper {
    display: flex;
    align-items: flex-start;
}

.lable-input-wrpper label {
    width: 15%;
    color: #000;
    font-size: 25px;
    font-style: normal;
}

.lable-input-wrpper input {
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    width: 85%;
    border: none;
    outline: none;
    border-bottom: 1px solid #bebebe;
    background-color: transparent;
    padding-bottom: 12px;
    transition: 0.3s;
}

.lable-input-wrpper input::placeholder {
    color: #8a8a8a;
}

.sumbit-btn {
    margin-top: 50px;
    padding-left: 150px;
}

.sumbit-btn input {
    border: none;
    background-color: #000;
    color: #fff;
    padding-top: 25px;
    padding-bottom: 25px;
    width: 250px;
    border-radius: 300px;
    font-size: 18px;
    transition: 0.3s all ease;
}

.sumbit-btn input:disabled {
    cursor: not-allowed;
}

.sumbit-btn input:hover {
    background-color: #ffe703;
    color: #000;
}

/* ================================================
 PRODUCT AND SOLUTION PAGE STYLE START HARE 
 =================================================== */

.product-header-area {
    position: relative;
    height: 100vh;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.product-hero-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.product-hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-header-wapper {
    background: transparent;
    backdrop-filter: blur(60px);
}

.product-hero-content h2 {
    text-align: center;
    font-size: 100px;
    color: #fff;
    font-weight: 300;
}

/*========== HEADER AREA STYLE END HARE ========= */

/*===== MODULAR SOLUTION ARA START HARE ========= */

.modular-solution-area {
    padding: 13rem 0;
    /* padding-top: 210px; */
}

.modular-wapper {
    max-width: 982px;
    margin: 0 auto;
}

.modular-wapper h2 {
    font-size: 60px;
    font-weight: 300;
    text-align: center;
    line-height: 110% !important;
}

.modular-wapper h2 span {
    background: #fbe302;
    padding: 0px 10px;
    border-radius: 20px;
}

.modular-inner-text {
    max-width: 666px;
    margin: 0 auto;
    padding-top: 100px;
    text-align: center;
}

.modular-inner-text p {
    font-family: var(--helveticaNeue);
    font-weight: normal;
    padding-bottom: 20px;
}

.modular-inner-text p:last-child {
    padding-bottom: 0;
}

/*======== MODULAR AREA STYLE END HARE ========= */

/*======== PROBLEM AREA STYLE START HARE ====== */

.problem-area-sa {
    padding: 150px 0;
    background: #fbe302;
    overflow: hidden;
}

.problem-text-sa p {
    color: #696969;
    padding-left: 20px;
}

.problem-wappper-sa h2 {
    color: #000000;
    font-size: 50px;
    font-weight: 300;
    max-width: 715px;
    line-height: 100%;
}

.problem-wappper-sa ul {
    padding-top: 70px;
}

.problem-wappper-sa ul li {
    display: flex;
    gap: 17px;
    font-size: 30px;
    font-weight: 300;
    margin: 10px 0;
    align-items: baseline;
}

.problem-bottom-text-sa {
    padding-top: 150px;
}

/*======= PROBLEM AREA STYLE END HARE ======== */

/*======= PRODUCT AREA STYLE START HARE ======== */

.product-area-sa {
    padding: 150px 0;
    padding-bottom: 224px;
}

.product-top-wapper-sa {
    max-width: 754px;
    margin: 0 auto;
}

.product-title-sa h2 {
    font-size: 60px;
    font-weight: 300;
}

.product-title-sa h2 span {
    background: #fbe302;
    padding: 0px 10px;
    border-radius: 20px;
}

.products-text p {
    font-family: var(--helveticaNeue);
    color: #696969;
}

.product-des-sa {
    max-width: 660px;
    margin: 0 auto;
    padding-top: 80px;
}

.product-des-sa p {
    font-family: var(--helveticaNeue);
    text-align: center;
}

.signle-products-sa {
    padding-top: 168px;
}

.products-thmb-box {
    margin-right: 50px;
    position: relative;
    max-height: 361px;
}

.inner-box-sa {
    position: absolute;
}

.asset-inner-sa {
    left: 5%;
    top: -65px;
}

.products-thmb-box>img {
    border-radius: 10px;
    width: 100%;
    height: 361px;
    object-fit: cover;
}

.products-details-sa {
    max-width: 639px;
    margin-left: auto;
}

.product-serial-sa p {
    font-family: var(--helveticaNeue);
    padding: 20px 0;
    color: #808080;
    margin-bottom: 10px;
}

.products-details-sa h2 {
    font-size: 50px;
    font-weight: 300;
    line-height: 100%;
}

.products-details-sa>p {
    font-family: var(--helveticaNeue);
    color: #4d4d4d;
    padding-top: 50px;
    margin-top: 30px;
}

.kip-inner-sa {
    right: -40px;
    bottom: 30px;
}

.shift-inner-sa {
    left: 5%;
    bottom: -30px;
}

.meterial-inner-sa {
    right: 5%;
    top: -30px;
}

.dust-inner-sa {
    left: 5%;
    top: -30px;
}

.maintainence-inner-sa {
    right: -30px;
    bottom: 50px;
}

.signle-products-sa .row {
    align-items: center;
}

.utilisation-inner-sa {
    left: 5%;
    bottom: -50px;
}

.shift-planning-inner-sa {
    right: 5%;
    bottom: -30px;
}

.dmu-inner-sa {
    left: 5%;
    top: -40px;
}

.pre-start-inner-sa {
    right: -30px;
    bottom: 20%;
}

.ventilation-inner-sa {
    left: 5%;
    top: -30px;
}

.pumps-inner-sa {
    right: 10%;
    top: -30px;
}

.user-management-inner-sa {
    right: 5%;
    top: -30px;
}

.action-logs-inner-sa {
    left: 5%;
    bottom: -40px;
}

/*======== PRODUCT AREA STYLE END HARE ======= */

/*======= SOLUTION AREA STYLE START HARE ======== */

.solution-area-sa {
    padding: 150px 0;
    background: #fbe302;
    padding-top: 176px;
    padding-bottom: 164px;
}

.solution-wapper-left-sa h2 {
    font-size: 60px;
    font-weight: 300;
    max-width: 510px;
    line-height: 100%;
}

.solution-wapper-left-sa h2 {
    margin-top: 56px;
}

.solution-content-sa {
    padding-top: 334px;
}

.solution-content-sa ul li {
    display: flex;
    align-items: baseline;
    gap: 15px;
    margin-bottom: 50px;
}

.solution-content-sa ul li:last-child {
    margin-bottom: 0;
}

.solution-content-sa ul li i {
    font-size: 24px;
}

.solution-content-sa ul li .sl-text h2 {
    font-size: 30px;
    font-weight: 300;
}

.solution-content-sa ul li .sl-text p {
    font-family: var(--helveticaNeue);
    color: #4d4d4d;
    padding-top: 20px;
}

/*====== SOLUTION AREA STYLE END HARE ========= */

/*====== PRODUCT SOLUTION AREA STYLE START ====== */

.callto-action-area {
    height: 100vh;
    background: url(images/Product-Solution-Action-bg.png) no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 0;
    padding: 515px 0;
}

.callto-action-area::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.cl-to-action-wapper {
    max-width: 978px;
    margin: 0 auto;
}

.cl-to-action-wapper h2 {
    font-size: 82.83px;
    font-weight: 300;
    text-align: center;
    color: #ffffff;
    line-height: 100%;
}

.cl-to-action-wapper p {
    font-size: 50px;
    color: #fff !important;
    font-weight: 300;
    margin-top: 50px;
}

.call-to-action-btn a {
    width: 372px;
    height: 73px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    background: #fff;
    font-size: 20px;
    font-weight: 400;
    border-radius: 54.31px;
    margin-top: 117px;
    color: #000;
    transition: 0.3s;
}

.call-to-action-btn a img {
    width: 34px;
}

.call-to-action-btn a:hover {
    background: #fbe302;
}

/*=======================
 industries page design 
 =======================*/

.sh-industries-header {
    background-color: #fafafa;
    padding-bottom: 0;
}

.sh-industries-wrapper {
    background-color: #fafafa;
}

.sh-ib-title {
    padding-top: 160px;
    padding-bottom: 130px;
    text-align: center;
}

.sh-ib-title h2 {
    color: #000;
    font-size: 82.826px;
    font-weight: 300;
    letter-spacing: 1.183px;
    line-height: 100%;
}

.sh-ib-title h2 p {
    display: inline-block;
    background-color: #ffe702;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 16.355px;
    line-height: 71%;
    padding-bottom: 20px;
    color: #000 !important;
    margin: 0 7px;
}

/*======= lot-solution area design =======*/

.sh-lot-solution {
    padding: 200px 0;
}

.sh-lot-content {
    margin-right: 30px;
}

.sh-lot-content h2 {
    font-size: 60px;
    font-weight: 300;
    color: #000;
    letter-spacing: 0.96px;
    line-height: 100%;
}

.sh-lot-text {
    margin-top: 70px;
}

.sh-lot-text .single-pera {
    margin-bottom: 20px;
    font-family: var(--helveticaNeue);
    color: #4d4d4d;
}

.sh-lot-slideBox {
    margin-left: 40px;
    margin-top: 150px;
}

.sh-lot-slideBox img {
    height: 600px;
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

#slider {
    width: 100%;
    height: 100%;
    position: relative;
}

.slide {
    list-style: none;
}

#slider>li {
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
}

/*======= our-industries area design =======*/

.sh-our-industries {
    padding: 130px 0;
    background-color: #fed000;
    overflow: hidden;
    margin-top: 245px;
    padding-top: 125px;
}

.sh-oi-left {
    margin-right: 30px;
}

.sh-oi-left h4 {
    font-size: 16px;
    font-weight: 400;
    color: #808080;
}

.sh-oi-left>div {
    max-width: 345px;
    margin-left: auto;
    margin-top: 80px;
}

.sh-oi-left>div img {
    border-radius: 10px;
}

.sh-oi-right {
    margin-left: 30px;
}

.sh-oi-right h2 {
    color: #000;
    font-size: 82.826px;
    font-weight: 300;
    letter-spacing: 1.183px;
    text-transform: capitalize;
    line-height: 110%;
}

.sh-oi-right h2 span {
    font-weight: 300;
}

/*======= canary-form area design =======*/

.sh-canary-form {
    background-image: url(images/canary-form-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 187px;
    padding-bottom: 147px;
    position: relative;
    z-index: 1;
}

.sh-canary-form:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: -1;
}

.sh-canary-form-content {
    max-width: 860px;
    margin-right: auto;
    color: #fff;
}

.sh-canary-form-content h2 {
    font-size: 60px;
    color: #fff;
    font-weight: 300;
    margin-bottom: 40px;
    line-height: 100%;
}

.sh-canary-form-content p {
    color: #fff !important;
}

.sh-canary-form-content form {
    margin-top: 85px;
    max-width: 820px;
    margin-right: auto;
}

.sh-canary-form-content form div {
    margin-bottom: 40px;
}

.sh-canary-form-content input,
.sh-canary-form-content textarea {
    width: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 15px 33px;
    border-radius: 8px;
    border: 0;
    outline: none;
    color: #fff;
    resize: none;
    font-size: 16px;
}

.sh-canary-form-content input:focus,
.sh-canary-form-content textarea:focus {
    box-shadow: 0 0 0 2px #fed000;
}

.sh-canary-form-content input:focus::placeholder,
.sh-canary-form-content textarea:focus::placeholder {
    color: #fed000;
}

.sh-canary-form-content input::placeholder,
.sh-canary-form-content textarea::placeholder {
    color: 20px;
    font-weight: 400;
    color: #fff;
}

.sh-canary-form-content form input[type="submit"] {
    width: initial;
    display: initial;
    font-size: 20px;
    color: #000;
    border-radius: 50px;
    background-color: #fed000;
    padding: 22px 65px;
    border: 2px solid #fed000;
    margin-top: 35px;
    transition: 0.5s all ease;
}

.sh-canary-form-content form input[type="submit"]:hover {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.industries-submit-btn input:disabled {
    cursor: not-allowed;
}

.thlgy-form-content input:focus,
.thlgy-form-content textarea:focus {
    box-shadow: 0 0 0 2px #d1ac04;
}

.thlgy-form-content input:focus::placeholder,
.thlgy-form-content textarea:focus::placeholder {
    color: #fed000;
}

.teclgy-submit2 input:disabled {
    cursor: not-allowed;
}

.thlgy-form-content input {
    color: #000;
}

.ready-join-form input:focus {
    box-shadow: 0 0 0 2px #fed000;
}

/*=======================
 technology page design 
 =======================*/

.technology-hero-area {
    background-color: transparent;
}

.technology-hero-area .header-wrpper {
    background-color: rgba(255, 255, 255, 0.2);
}

.sh-technology-banner-wrapper {
    position: relative;
    z-index: 1;
}

.sh-technology-banner-wrapper::after {
    content: "";
    display: block;
    width: 100%;
    height: 85%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fed000;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: 0.9s all ease;
}

.sh-technology-banner-wrapper:hover::after {
    opacity: 1;
    visibility: visible;
}

.sh-technology-header {
    position: absolute;
    width: 100%;
    height: auto;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.sh-tb-content {
    padding-top: 175px;
    padding-bottom: 112px;
    display: flex;
    justify-content: space-between;
}

.sh-tb-content h2 {
    font-size: 66px;
    color: #000;
    font-weight: 300;
    line-height: 100%;
}

.sh-tb-content span {
    color: #838282;
}

.sh-technology-vedio video {
    width: 100%;
    border-radius: 12px;
}

/*======= our-solutions-area design =======*/

.sh-our-solutions-area {
    padding-top: 170px;
    padding-bottom: 127px;
}

.sh-os-tilte {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 135px;
    text-align: center;
}

.sh-os-tilte h2 {
    color: #000;
    font-size: 80px;
    font-weight: 300;
    letter-spacing: 1.183px;
    margin-bottom: 63px;
    line-height: 100%;
}

.sh-os-single {
    position: relative;
}

.sh-os-single img {
    border-radius: 10px;
}

.sh-os-single .sh-os-content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-left: 25px;
    padding-bottom: 35px;
}

.sh-os-single .sh-os-content span {
    color: #fff;
    font-size: 26px;
}

/*======= global-partners-area design =======*/

.sh-global-partners-area {
    background-color: #ffe702;
    padding-top: 136px;
    padding-bottom: 130px;
}

.sh-gp-header {
    margin-bottom: 120px;
}

.sh-gp-header span {
    color: #696969;
    font-family: var(--helveticaNeue);
    display: inline-flex;
}

.sh-gp-header h2 {
    font-size: 50px;
    font-weight: 300;
    line-height: 100%;
}

.sh-gp-header p {
    font-family: var(--helveticaNeue);
    font-weight: 400;
}

.sh-gp-global-map {
    position: relative;
}

.sh-gp-location-btn {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
}

.sh-gp-location-btn ul {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    background-color: transparent;
}

.sh-gp-location-btn ul li {
    position: absolute;
}

.sh-gp-location-btn ul li.location-btn1 {
    left: 4.5vw;
    top: 27.5vh;
}

.sh-gp-location-btn ul li.location-btn2 {
    left: 8.9vw;
    top: 38vh;
}

.sh-gp-location-btn ul li.location-btn6 {
    left: 34.5vw;
    top: 10vh;
}

.sh-gp-location-btn ul li.location-btn4 {
    left: 36vw;
    top: 28vh;
}

.sh-gp-location-btn ul li.location-btn3 {
    right: 16.5vw;
    top: 36vh;
    z-index: 9999;
}

.sh-gp-location-btn ul li.location-btn5 {
    right: 7vw;
    top: 25vh;
}

.sh-gp-location-btn ul li.location-btn7 {
    right: 5vw;
    bottom: 20vh;
}

.sh-gp-location-btn a {
    font-size: 25px;
    font-weight: 300;
    letter-spacing: 0.96px;
    padding: 13px 25px;
    background-color: #fafafa;
    color: #000;
    border-radius: 25px;
    position: relative;
}

.sh-gp-location-btn a::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -80%;
    transform: translatex(-50%) rotate(90deg);
    width: 100px;
    height: 2px;
    border-top: 2px dashed #000;
}

/*======= connectivity-area design =======*/

.sh-connectivity-area {
    padding-top: 150px;
    padding-bottom: 276px;
}

.sh-connectivity-title {
    margin-bottom: 136px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.sh-connectivity-title span {
    color: #696969;
    font-family: var(--helveticaNeue);
    display: inline-flex;
}

.sh-connectivity-title h2 {
    font-size: 50px;
    padding-top: 64px;
    padding-bottom: 48px;
    font-weight: 300;
}

.sh-connectivity-area img {
    max-width: 100%;
    width: initial;
}

.sh-connectivity-area .row>div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-connectivity-area .row>div div {
    padding: 0 40px;
}

.sh-logo-first-row {
    margin-bottom: 70px;
}

/*======= software-area design =======*/

.sh-software-area {
    margin-bottom: 150px;
}

.sh-software-heading span {
    color: #696969;
    font-family: var(--helveticaNeue);
    display: inline-flex;
}

.sh-software-heading h2 {
    font-size: 50px;
    padding-top: 35px;
    padding-bottom: 90px;
    font-weight: 300;
    line-height: 100%;
}

.sh-software-left {
    padding-right: 70px;
}

.sh-software-right img {
    border-radius: 10px;
}

/*======= technology-form-area design =======*/

.sh-technology-form-area {
    padding-top: 140px;
    padding-bottom: 155px;
    transition: 0.7s all ease;
}

.sh-tf-title h2 {
    font-size: 60px;
    font-weight: 300;
    color: #000;
    letter-spacing: 0.96px;
    line-height: 100%;
}

.sh-technology-form-area:hover {
    background-color: #fed000;
}

.sh-technology-form-area input,
.sh-technology-form-area textarea {
    background-color: #fff;
}

.sh-technology-form-area input::placeholder,
.sh-technology-form-area textarea::placeholder {
    color: #23232380;
}

.sh-technology-form-area form input[type="submit"] {
    background-color: #000;
    border-color: #000;
    color: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.sh-technology-form-area form input[type="submit"]:hover {
    background-color: #fff;
    border-color: #fff;
    color: #000;
}

/*========================
 about page design 
========================*/

.about-hero-header {
    padding-bottom: 88px;
}

.about-hero-section {
    background: #fed000;
    padding: 0px 0 80px 0;
    position: relative;
    height: 100vh;
}

.about-hero-header {
    background-color: transparent;
}

.about-hero-header .header-wrpper {
    background-color: rgba(255, 255, 255, 0.2);
}

.rt-hero-section-image {
    text-align: right;
    margin-right: 90px;
}

.rt-hero-section-image img {
    max-width: 100% !important;
    width: initial;
    border-radius: 10px;
}

.rt-hero-section-content .rt-single-text {
    display: flex;
    margin-left: 80px;
    padding: 7px 0 7px 0;
}

.rt-hero-section-content .rt-single-text span {
    font-size: 18px;
    padding-right: 40px;
}

.rt-hero-section-content .rt-single-text h2 {
    font-size: 64px;
    font-weight: 300;
}

.rt-hero-section-content .rt-single-text h2 a {
    color: #212529;
}

/*======= about-technology-section =======*/

.about-technology-section {
    background: #fafafa;
    padding: 186px 0 50px 0;
}

.about-technology-section .rt-canary-heading h2 {
    font-size: 88px;
    font-weight: 300;
}

.about-technology-section .rt-canary-paragraph {
    padding-top: 90px;
}

.about-technology-section .rt-canary-paragraph p {
    font-size: 16px;
    font-weight: 400;
    color: #808080;
    font-family: var(--helveticaNeue);
}

.about-technology-section .rt-technology-heading h2 {
    font-size: 88px;
    font-weight: 300;
}

.about-technology-section .rt-technology-paragraph {
    padding-top: 90px;
}

.about-technology-section .rt-technology-paragraph p {
    font-size: 16px;
    font-weight: 400;
    color: #808080;
    font-family: var(--helveticaNeue);
}

.rt-technology-paragraph .rt-tech-para2 {
    padding-top: 28px;
}

.rt-technology-paragraph .rt-tech-para3 {
    padding-top: 28px;
}

.rt-technology-paragraph .rt-tech-para4 {
    padding-top: 28px;
}

/*======= about-work-section =======*/

.about-work-section {
    background: #fafafa;
    padding: 70px 0 168px 0;
}

.rt-work-section-image img {
    max-width: 100% !important;
    width: initial;
}

.about-work-section .rt-work-heading h2 {
    font-size: 60px;
    font-weight: 300;
    line-height: 100%;
}

.about-work-section .rt-work-content ul li {
    display: flex;
    align-items: center;
}

.about-work-section .rt-work-content ul li img {
    width: 21px;
    height: 10px;
}

.about-work-section .rt-work-content span {
    padding: 2px 0 0 18px;
}

.about-work-section .rt-work-content span h4 {
    font-size: 25px;
    font-weight: 300;
    color: #000;
    margin: 0;
}

.rvtn-about-work {
    padding-top: 165px;
}

/*======= about-studies-section =======*/

.about-studies-section {
    padding: 140px 0 140px 0;
    background: #fafafa;
    transition: 0.8s;
}

.about-studies-section:hover {
    background: #ffe703;
}

.rt-about-studies-content span {
    font-size: 16px;
    font-family: var(--helveticaNeue);
    font-weight: 400;
    color: #808080;
}

.rt-about-studies-content h2 {
    padding-top: 44px;
    color: #000;
    font-size: 60px;
    font-weight: 300;
}

.rt-studies-items {
    padding-top: 140px;
    padding-left: 20px;
    padding-right: 20px;
}

.rt-studies-items .rt-studies-items-image img {
    max-width: 100% !important;
    border-radius: 9px;
}

.rt-studies-items .rt-studies-items-head {
    padding-top: 50px;
}

.rt-studies-items .rt-studies-items-head h4 {
    color: #000;
    font-size: 25px;
    font-weight: 300;
    margin: 0;
}

.rt-studies-items .rt-studies-items-btn {
    padding-top: 60px;
}

.rt-studies-items .rt-studies-items-btn a {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    font-family: var(--helveticaNeue);
    transition: 0.3s;
}

.rt-studies-items .rt-studies-items-btn a:hover {
    text-decoration: none;
}

.rt-studies-items .rt-studies-items-btn a:hover img {
    transform: translateX(5px);
}

.rt-studies-items .rt-studies-items-btn img {
    padding-left: 10px;
    transition: 0.3s;
    width: initial;
    max-width: 100%;
}

.rt-studies-items-image {
    position: relative;
}

.rt-about-position1 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rt-about-position1 div:last-child {
    display: flex;
    justify-content: space-between;
}

.rt-about-position1 h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--helveticaNeue);
    padding: 43px 0 0 35px;
}

.rt-about-position1 h3 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 44px 35px;
}

.rt-about-position1 span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 0 42px 49px 0;
    padding-top: 5px !important;
}

.rt-single-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*======= about-blog-section =======*/

.about-blog-section {
    background: #fafafa;
    padding: 140px 0 140px 0;
    overflow: hidden;
    padding-top: 178px;
    padding-bottom: 200px;
}

.about-blog-section .rt-blog-content h2 {
    font-size: 60px;
    font-weight: 300;
}

.about-blog-item {
    padding-top: 130px;
    padding-left: 20px;
    padding-right: 20px;
}

.about-blog-item .rt-blog-item-image img {
    max-width: 100% !important;
    border-radius: 9px;
}

.about-blog-item .rt-blog-item-head {
    padding-top: 50px;
}

.about-blog-item .rt-blog-item-head h4 {
    color: #000;
    font-size: 25px;
    font-weight: 300;
    margin: 0;
}

.about-blog-item .rt-blog-item-btn {
    padding-top: 60px;
}

.about-blog-item .rt-blog-item-btn a {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
    font-family: var(--helveticaNeue);
    transition: 0.3s;
}

.about-blog-item .rt-blog-item-btn a:hover {
    text-decoration: none;
}

.about-blog-item .rt-blog-item-btn a:hover img {
    transform: translateX(6px);
}

.about-blog-item .rt-blog-item-btn img {
    padding-left: 10px;
    transition: 0.3s;
    width: initial;
    max-width: 100%;
}

.rt-sap-btn {
    margin-top: 113px;
    display: flex;
    justify-content: flex-end;
}

.rt-sap-btn a {
    display: flex;
    align-items: center;
    column-gap: 15px;
    font-size: 25px;
    font-weight: 300;
    color: #000;
    transition: 0.3s all ease;
}

.rt-sap-btn a:hover {
    color: #3b3b3b;
}

.rt-sap-btn a:hover img {
    transform: translateX(8px);
}

.rt-sap-btn a img {
    width: initial;
    max-width: 100%;
    margin-top: 2px;
    transition: 0.3s all ease;
}

.rt-blog-item-image {
    position: relative;
}

.rt-blog-position1 {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.rt-blog-position1 div:last-child {
    display: flex;
    justify-content: space-between;
}

.rt-blog-position1 h4 {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--helveticaNeue);
    padding: 43px 0 0 35px;
}

.rt-blog-position1 h3 {
    color: #ffffff;
    font-size: 30px;
    font-weight: 400;
    padding: 0 0 44px 35px;
}

.rt-blog-position1 span {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    padding: 0 42px 49px 0;
    display: inline-flex;
    padding-top: 7px !important;
}

/*======= about-testimonials-section =======*/

.about-testimonials-section {
    background-image: url(images/testimonials-image.png);
    min-height: 100vh;
    background-repeat: no-repeat;
    width: 100%;
    background-size: cover;
    background-position: top;
    padding: 225px 0 130px 0;
}

.rt-testimonials-content span {
    font-size: 16px;
    font-weight: 400;
    font-family: var(--helveticaNeue);
    color: #ffffff;
    display: inline-flex;
}

.rt-testimonials-content h2 {
    color: #ffffff;
    font-size: 82px;
    font-weight: 300;
    padding-top: 52px;
}

.rt-testimonials-item {
    padding: 48px 90px 52px 48px;
    border-radius: 12px;
}

.rt-testimonials-item h6 {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    font-family: var(--helveticaNeue);
}

.rt-testimonials-item h4 {
    padding-top: 30px;
    color: #ffffff;
    font-size: 25px;
    font-weight: 400;
    margin: 0;
}

.rt-testimonials-item div {
    padding-top: 85px;
}

.rt-testimonials-item p {
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 500;
    font-family: var(--helveticaNeue);
}

.rt-testimonials-items1 {
    background: rgba(105, 105, 105, 0.1);
    margin-top: 210px;
    max-width: 760px;
}

.rt-testimonials-items2 {
    background: rgba(105, 105, 105, 0.1);
    margin-top: 175px;
    margin-left: auto;
    max-width: 730px;
}

.rt-testimonials-items3 {
    background: transparent;
    margin-top: 175px;
    max-width: 610px;
    margin-left: 30px;
}

.rt-testimonials-items4 {
    background: rgba(0, 0, 0, 0.5);
    margin-top: 175px;
    margin-left: auto;
    max-width: 760px;
    margin-right: 30px;
}

/* Preloader styles */

#video-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    transition: opacity 0.5s ease-out;
}

#content {
    opacity: 0;
    transition: opacity 0.5s ease-in;
    position: relative;
    z-index: 1;
}

#video-preloader video {
    max-height: 100%;
    width: 100vw;
}

/* Hide content initially */

#content {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Slide up animation when the video ends */

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-100%);
    }
}

.hidden {
    animation: slideUp 1s ease forwards;
}

.content-slide-up {
    display: block;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: transform 1s ease;
}

#preloader.slide-up {
    transform: translateY(-100%);
}

#content {
    display: block;
}

.video-title {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 100px 0;
    padding-bottom: 55px;
}

.video-title-top h2 {
    color: #fff;
    text-align: center;
    font-weight: 60px;
    line-height: 100%;
    font-size: 8.7vw;
}

.video-bottom-title {
    padding-left: calc((100vw - 1350px) / 2);
}

.video-bottom-title h4 {
    color: #FFF;
    font-family: "Helvetica Neue";
    font-size: 50px;
    font-weight: 400;
    line-height: 110%
}

.video-title-top {
    text-align: center;
}

.video-title-top a {
    display: inline-block;
    padding: 12px 25px;
    border: 1px solid #fff;
    border-radius: 30px;
    color: #fff;
    margin-bottom: 10px;
}

.am-more {
    padding-bottom: 50px;
}

.am-more h4 {
    font-size: 25px;
    font-weight: 300;
    color: #000;
    margin-top: 0;
}

.solution-content-sa .icon-sa img {
    margin-top: -9px;
    height: 12px;
    width: 25px;
}

.rt-technology-heading {
    padding-left: 14px;
}

.rt-technology-paragraph {
    padding-left: 14px;
}

.pgg-two-2nd {
    margin-top: 0 !important;
    margin-bottom: 22px;
}

.animate-text {
    height: 65px;
    overflow: hidden;
}

.animate-text span {
    display: none;
}

.animate-text span a {
    color: #000;
    font-size: 50px;
    font-weight: 300;
    line-height: 73px;
}

.animate-text span.text-in {
    display: block;
    animation: textIn .5s ease;
}

.animate-text span.text-out {
    animation: textOut 1s ease;
}

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

@keyframes textOut {
    0% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(-100%);
    }
}

.single-packge-two {
    transition: 0.6s;
}

.single-packge-two:hover {
    background-color: #ffe702;
}

.slide-item .image-slide {
    overflow: hidden;
}

.slide-item .image-slide img {
    animation: imageSlide 4.6s ease forwards;
    transform: translateY(100%);
    opacity: 0;
}

.slide-item .image-slide1 img {
    animation-delay: 0.1s;
}

.slide-item .image-slide2 img {
    animation-delay: 0.2s;
}

.slide-item .image-slide3 img {
    animation-delay: 0.3s;
}

@keyframes imageSlide {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    20%,
    80% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}


.swiper-container {
    width: 100%;
    max-width: 600px;
    height: 656px;
    margin: 0 auto;
}

.swiper-slide {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.swiper-slide-active {
    opacity: 1;
    visibility: visible;
}

.reletive-box {
    position: relative;
}

.reletive-box .image-slide {
    position: absolute;
    right: 10px;
    top: 60%;
    transform: translateY(-50%);
}

.reletive-box .image-slide img {
    animation-delay: 0.4s;
}

.reletive-box2 {
    position: relative;
}

.reletive-box2 .image-slide {
    position: absolute;
    right: 25px;
    top: 34%;
    transform: translateY(-50%);
}

.reletive-box2>img {
    border-radius: 10px;
}

.hero-last-slide {
    min-height: initial !important;
}

.hero-last-slide img {
    border-radius: 10px;
    height: 100%;
    object-fit: cover;
}

.four-slide-top-img {
    display: grid;
    grid-template-columns: 70% 30%;
}

.four-slide-top-img .hero-last-slide {
    margin-left: -29%;
}

.sw-slide-four .hero-last-slide img {
    animation-delay: 0.2s;
}

.four-slide-top-img .image-slide3 {
    position: relative;
    z-index: 2;
}

.four-slide-top-img .hero-last-slide {
    position: relative;
    z-index: 1;
}



          /* Initially hide the description text with opacity */
.hidden-text {
    display: none;
    opacity: 0;
    transform: translateY(10px); /* Slight movement for a smooth transition */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Hover effect to smoothly show the description */
.single-advance-packge:hover .hidden-text {
    display: block;
    opacity: 1;
    transform: translateY(0); /* Moves the text into place smoothly */
}

/* Optional styling for the hover scale effect */
.single-advance-packge {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* .single-advance-packge:hover {
    transform: scale(1.05);
} */












/*====================================================== after remove bootrtrap ======================================================*/
.header-wrpper .offset-sm-0 {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.header-wrpper .offset-sm-0 div {
    display: flex;
    align-items: center;
}

.driven-research-wrpper .col-lg-6 {
    display: flex;
    align-items: flex-end;
}

.optimize-today-wrpper .justify-content-between {
    justify-content: space-between;
}

input {
    font-family: inherit;
}

#initial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOut 2s ease-in-out 2s forwards;
}

.center-logo {
    width: 200px; /* Adjust size as needed */
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

.video-container {
    position: relative;
    width: 100%;
    height: 100vh; /* Add this to ensure full height */
    opacity: 0;
    animation: fadeIn 1s ease-in-out 3s forwards;
}

.floating-logo {
    position: absolute;
    width: 150px; /* Adjust size as needed */
    opacity: 0;
    z-index: 100; /* Ensure logo stays above video */
    animation: logoFloat 4s ease-in-out 4s forwards;
}

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

@keyframes fadeOut {
    from { opacity: 1; }
    to { 
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes logoFloat {
    0% {
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
    }
    20% {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
    }
    100% {
        opacity: 0.8;
        top: 85%;
        left: 85%;
        transform: translate(0, 0);
        width: 100px; /* Smaller size when in corner */
    }
}

#intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#initial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeOut 2s ease-in-out 1s forwards;
}

.center-logo {
    width: 200px;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

.main-content {
    position: relative;
    width: 100%;
    height: 100vh;
    opacity: 0;
    animation: fadeIn 1s ease-in-out 1s forwards;
}

#intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.video-center-logo {
    position: absolute;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: centerLogoFade 2s ease-in-out 2s forwards;
}

.corner-logo {
    position: absolute;
    width: 100px;
    bottom: 40px;
    right: 40px;
    opacity: 0;
    animation: cornerLogoFade 2s ease-in-out 2s forwards;
}

/* Update the pseudo-element to create a circular background */
.corner-logo::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140px; /* Adjust to match the circular background size */
    height: 140px; /* Should be equal to width for perfect circle */
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
    border-radius: 50%; /* Makes it circular */
    z-index: -1;
}

@keyframes centerLogoFade {
    0% {
        opacity: 0.5;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes cornerLogoFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Optional: Add a subtle shadow for better visibility */
.corner-logo {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.corner-logo-container {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 120px;
    height: 120px;
    opacity: 0;
    animation: cornerLogoFade 2s ease-in-out 2s forwards;
    text-align: center; /* Center the label */
}

.circular-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 50%;
    opacity: 0.6;
}

.corner-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    z-index: 1;
}

.corner-logo-label {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: -30px; /* Position below the circular logo */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    white-space: nowrap; /* Prevent text wrapping */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Optional: add shadow for better readability */
}

.video-center-logo {
    position: absolute;
    width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: centerLogoFade 2s ease-in-out 2s forwards;
}

@keyframes cornerLogoFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes centerLogoFade {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.corner-logo-container {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 140px; /* Increased size to accommodate text */
    height: 140px; /* Increased size to accommodate text */
    opacity: 0;
    animation: cornerLogoFade 2s ease-in-out 2s forwards;
    text-align: center;
}

.circular-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 50%;
    opacity: 0.6;
}

.corner-logo {
    position: absolute;
    top: 35%; /* Moved up further to make room for two lines */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    z-index: 1;
}

.corner-logo-label {
    position: absolute;
    width: 80%; /* Reduced width to ensure text stays within circle */
    text-align: center;
    bottom: 15%; /* Adjusted for two lines */
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1.2; /* Space between lines */
    z-index: 1;
    white-space: normal; /* Allow text to wrap */
    word-wrap: break-word; /* Break words if necessary */
}

/* Add media query for smaller screens if needed */
@media (max-width: 768px) {
    .corner-logo-container {
        width: 120px;
        height: 120px;
    }
    
    .corner-logo-label {
        font-size: 10px;
    }
}