@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root {
   --font-size: 16px;
   --theme-green-color: #FAD78D;
   --theme-blue-color: #00AEFF;
   --text-color: #4F4F4F;
   --manrope-font-family: "Manrope", sans-serif;
   --lexend-font-family: "Lexend", sans-serif;
   --poppins-font-family: "Poppins", sans-serif;
   --heading-color: #262626;
   --blue-btn-gradient: linear-gradient(115.72deg, #0064C4 19.76%, #00AEFF 73.13%);
}

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

body {
   font-size: 15px;
   background: #F5F6FA;
   font-family: var(--manrope-font-family);
   line-height: 2em;
   color: var(--text-color);
   font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin-bottom: 15px;
   color: var(--heading-color);
   margin-top: 0;
   line-height: 1.1em;
   font-family: var(--manrope-font-family);
   letter-spacing: -2px;
}

p {
   margin-bottom: 15px;
   color: var(--text-color);
}

.btn-theme {
   border: 2px solid #FAD78D;
   background-image: -webkit-linear-gradient(30deg, #FAD78D 50%, transparent 50%);
   background-image: linear-gradient(30deg, #FAD78D 50%, transparent 50%);
   background-size: 500px;
   background-repeat: no-repeat;
   background-position: 0%;
   -webkit-transition: background 300ms ease-in-out;
   transition: background 300ms ease-in-out;
   border-radius: 50px;
   padding: 12px 35px;
   color: var(--heading-color);
   font-weight: 500;
   font-size: 1rem;
   text-decoration: none;
   box-shadow: 0px 4px 0px #000000;
   display: inline-block;
}

.btn-theme:hover {
   background-position: 50%;
   color: #ffffff;
}

.btn-theme-text:hover {
   color: var(--heading-color);
}

.btn-theme-blue {
   border: 2px solid #0066c6;
   background-image: -webkit-linear-gradient(30deg, #00abfd 19.76%, #0066c6 40%);
   background-image: linear-gradient(30deg, #00abfd 19.76%, #0066c6 40%);
   background-size: 500px;
   background-repeat: no-repeat;
   background-position: 0%;
   -webkit-transition: background 300ms ease-in-out;
   transition: background 300ms ease-in-out;
   border-radius: 10px;
   padding: 12px 35px;
   color: white;
   font-weight: 500;
   font-size: 1rem;
   text-decoration: none;
   box-shadow: 0px 4px 0px #000000;
   display: inline-block;
}

.btn-theme-blue:hover {
   background-position: 100%;
   color: #ffffff;
}

/* header */
.header {
   padding: 15px 0;
   z-index: 999;
   transition: 0.6s;
   position: absolute;
   width: 100%;
}

header.sticky {
   padding: 0px 0px;
   position: fixed;
   width: 100%;
   z-index: 999;
   background: #F5F5F5;
}

header.sticky #navbarNav {
   border-bottom: 0px !important;
}

header.sticky img {
   width: auto;
   transition: all 0.5s ease-in-out;
}

img.header-icons{
    width: 30px;
}


/* header */
/* Navbar */

.navbar-nav li {
   padding: 5px 10px;
}

.navbar-nav li a {
   font-size: var(--font-size);
   font-weight: 400;
   color: #ffffff;
   display: inline-block;
   position: relative;
}

ul.dropdown-menu {
   padding: 0;
   background: var(--blue-btn-gradient);
   border-radius: 0px;
   column-count: 4;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
    left: 100%;
    transform: translateX(-48%);
}

ul.dropdown-menu li a {
   color: white;
}

.dropdown-menu li:hover,
.dropdown-menu li:hover a {
   background: var(--theme-green-color);
   color: var(--heading-color) !important;
}

.dropdown-menu li.active,
.dropdown-menu li.active a {
   background: var(--theme-green-color);
   color: var(--heading-color) !important;
}

.navbar-nav li a:hover {
   color: var(--theme-green-color);
}

.navbar-nav .nav-link.active {
   color: var(--theme-green-color);
}

.navbar-brand img {
   width: auto;
   transition: 0.6s;
}

.b-bottom {
   border-bottom: 1px solid #ffffff38;
   padding-bottom: 15px;
}

/*  end */

.explore-center h3 {
   font-family: "IBM Plex Serif", serif;
}


.hero-section {
   padding: 200px 0px 50px 0px;
   position: relative;
}

.hero-section #bg-video {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   padding: 0;
   object-fit: fill;
   border-radius:30px;
}

.hero-section .overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.3);
   z-index: -1;
   padding: 0;
   border-radius:30px;
}

.hero-text h1 {
   color: white;
   font-size: 53px;
   font-weight: 600;
}

.hero-text {
   text-align: center;
}

.hero-text h1 span {
   color: #ffffff;
}


.hero-section .hero-button {
   margin-top: 30px;
}

.hero-trust-div {
   text-align: center;
   border-radius: 20px;
   background: #0000001a;
   padding: 30px 15px;
   backdrop-filter: blur(5px);
   background: linear-gradient(135.76deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(2px);
}

.hero-trust-div p {
   color: #ffff;
   font-size: 14px;
   margin-bottom: 8px;
}

.hero-trust-div .icon-box {
   margin-bottom: 8px;
}

.hero-trust-div i {
   color: #FFDC24;
}

.hero-right-div ul {
   list-style: none;
   padding-left: 0px;
}

.hero-right-div i {
   color: #FAD78D;
   font-size: 18px;
}

.hero-right-div span {
   font-size: 18px;
   font-weight: 500;
   color: #fff;
}

.hero-right-div p {
   font-size: 16px;
   color: #fff;
   text-align:left;
}

.hero-row {
   padding-top: 50px;
}

.hero-trust-div {
   position: relative;
   z-index: 1;

}

.hero-image-container {
   position: relative;
}

.hero-image-container::before {
   content: '';
   background-image: url(../images/vector3.png);
   background-repeat: no-repeat;
   position: absolute;
   top: -35%;
   left: 60%;
   width: 100%;
   height: 100%;
   z-index: 0;
}

section {
   padding: 50px 0px;
}

.industries-bg {
   background: url(../images/industries-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.website-bg {
   background: url(../images/website-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.logo-bg {
   background: url(../images/logo-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.brand-bg {
   background: url(../images/brand-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.concept-bg {
   background: url(../images/concept-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.game-bg {
   background: url(../images/game-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.app-bg {
   background: url(../images/app-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.virtual-bg {
   background: url(../images/virtual-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.drop-bg {
   background: url(../images/drop-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.affiliate-bg {
   background: url(../images/affiliate-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.ecommerce-bg {
   background: url(../images/ecommerce-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.social-bg {
   background: url(../images/social-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.search-bg {
   background: url(../images/search-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.content-bg {
   background: url(../images/content-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.publish-bg {
   background: url(../images/publish-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.animation-bg {
   background: url(../images/animation-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.sell-bg {
   background: url(../images/sell-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.bookkeeping-bg {
   background: url(../images/bookkeeping-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.launch-bg {
   background: url(../images/launch-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.career-bg {
   background: url(../images/career-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.career-detail-bg {
   background: url(../images/career-detail-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

.contact-bg {
   background: url(../images/contact-bg.png) !important;
   background-repeat: no-repeat !important;
   background-size: cover !important;
}

/* top banner */
.top-banner {
   padding: 200px 0px 80px 0px;
   background: url(../images/about-top.png);
   background-repeat: no-repeat;
   background-size: cover;
   border-radius:30px;
}

.top-banner .left-col h1 {
   font-size: 53px;
   font-weight: 600;
   color: white;
}

.top-banner .left-col h1>span {
   color: var(--theme-green-color);
}

.top-banner .left-col p {
   font-size: 16px;
   font-weight: 400;
   color: #ffffff;
   margin-bottom: 0;
}

/* end */

/* sec 2 */
.sec-2 {
   padding: 50px 0px 50px 0px;
   text-align: center;
}

.sec-2 h2 {
   font-size: 40px;
   color: var(--heading-color);
   font-weight: 700;
   margin-top: 30px;
}

.sec-2 p {
   font-size: 16px;
   font-weight: 400;
   color: #5E5E5E;
}

/* end */

/* we are */
.we-are {
   padding: 50px 0px 50px 0px;
}

.we-are .left-col h3 {
   font-size: 40px;
   color: var(--heading-color);
   font-weight: 700;
}

.we-are .left-col p {
   font-size: 24px;
   font-weight: 700;
   color: #222021;
}

.we-are .right-col p {
   font-size: 16px;
   font-weight: 400;
   color: #4A4A4E;
   margin-bottom: 0;
}

.we-are .inner-heading>h4 {
   color: var(--heading-color);
   font-size: 38px;
   font-weight: 400;
   letter-spacing: inherit;
   margin-bottom: 0;

   span {
      color: #0064C4;
   }
}

.we-are .inner-para>p {
   font-size: 16px;
   font-weight: 400;
   color: #4A4A4E;
   margin-bottom: 0;
}

.we-are .line {
   background: #2C2E3220;
   height: 1px;
   width: 95%;
}

.we-are .number {
   color: #222021;
   font-size: 40px;
   font-weight: 600;
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
}

/* end */

/* approach */
.approach {
   padding: 50px 0px 50px 0px;
   background: url(../images/bg-theme.png);
   background-size: cover;
   background-repeat: no-repeat;
   border-radius:30px;
}

.approach .heading>h3 {
   color: white;
   font-size: 28px;
   font-weight: 500;
   letter-spacing: inherit;
   text-align: center;
   max-width: 400px;
   margin: auto;
   line-height: 35px;
}

.approach .approach-section {
   display: flex;
   align-items: start;
   justify-content: space-between;
   margin-top: 60px;
   gap: 105px;
   position: relative;
}

.approach .approach-section:after {
   content: "";
   position: absolute;
   background: white;
   height: 100%;
   width: 1px;
   top: 0;
   left: 50%;
}

.approach .approach-section .approach-body {
   display: flex;
   flex-direction: column;
   gap: 50px;
   width: 49.333%;
}

.approach .approach-section .approach-body .approach-inner:nth-child(1) {
   border-bottom: 1px solid white;
   padding-bottom: 35px;
}

.approach .approach-section .approach-inner>h4 {
   color: white;
   letter-spacing: inherit;
   font-size: 20px;
   font-weight: 600;
}

.approach .approach-section .approach-inner>p {
   color: white;
   font-size: 15px;
   font-weight: 300;
}

/* end */

/* why choose us */
.why-choose-us {
   padding: 50px 0px 20px 0px;
}

.why-choose-us .right-col h3 {
   font-size: 38px;
   font-weight: 700;
   color:black;
}

.why-choose-us .right-col p {
   font-size: 16px;
   font-weight: 400;
   color: #4A4A4A;
   margin-bottom: 0;
}

.why-choose-us .right-col i {
   color: #ECC7FF;
   font-size: 18px;
}

.why-choose-us .right-col span {
   font-size: 18px;
   font-weight: 700;
   color: var(--heading-color);
}

.why-choose-us .right-col .number-list {
   display: flex;
   gap: 20px;
   align-items: start;
   margin-top: 25px;
}

.why-choose-us .right-col .number-list h4 {
   font-size: 18px;
   letter-spacing: inherit;
   font-weight: 700;
   color: var(--heading-color);
   margin-bottom: 8px;
}

.why-choose-us .right-col .number-list>span {
   border: 1px solid #07A0E6;
   border-radius: 50px;
   padding: 10px 13px;
   font-size: 20px;
   font-weight: 800;
}

/* end */

.about-image img {
   width: 100%;
}

.heading i {
   font-size: 22px;
   color: #B562E0;
}

.heading span {
   font-size: 20px;
   font-weight: 700;
   color: var(--heading-color);
}

.about-text h3 {
   font-size: 47px;
   font-weight: 700;
   /*max-width: 425px;*/
   color:black;
}

.about-text p {
   font-size: 16px;
   color: #3F3F3F;
   font-weight: 400;
   margin-bottom: 15px;
}

.about-counter p {
   text-align: center;
   color: #A0A0A0;
   font-size: 15px;
   font-weight: 400;
   margin-bottom: 0;
   font-family: var(--poppins-font-family);
}

.about-counter .column {
   background-color: transparent;
   float: left;
   width: 25%;
   padding: 0 5px;
}

.about-counter .card {
   /* padding: 0px 16px; */
   text-align: center;
   color: black;
   border: none;
   background-color: transparent;
}

.counter span {
   color: #0064C4;
}

.about-counter h3 {
   font-size: 41px;
   font-weight: 800;
   color:black;
   
}

.image-slider-section {
   padding: 0px;
   overflow: hidden;
}

.slide-container {
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
   align-self: center;
   background-color: #ffff;
   padding: 15px 0px;
}

.help-text ul {
   padding-left: 0px;
   list-style: none;
}

.help-text i {
   color: #B562E0;
   font-size: 22px;
}

.help-text span {
   font-size: 20px;
   font-weight: 700;
   color: var(--heading-color);
}

.help-text h3 {
   font-size: 47px;
   font-weight: 700;
   /*max-width: 425px;*/
   margin-bottom: 0px;
   color:black;
}

.help-para p {
   font-size: 16px;
   color: var(--heading-color);
   font-weight: 600;
   margin-bottom: 0;
}

.help-para p span {
   color: #00AEFF;
}

.help-div ul {
   list-style: none;
   padding-left: 0px;
   position: relative;
   z-index: 1;
}

.help-div ul span {
   color: #262626;
   font-size: 12px;
   transition: .3s;
}

.help-div h4 {
   font-size: 22px;
   font-weight: 700;
   padding-top: 5px;
   transition: .3s;
   max-width: 210px; 
   color:black;
}

.help-div p {
   font-size: 16px;
   line-height: 27px;
   color: #4F4F4F;
   font-weight: 600;
}

.help-div a {
   text-decoration: none;
   background-color: #EDF2FF;
   padding: 10px 25px;
   border-radius: 50px;
   font-weight: 600;
   color: #07A0E6;
   display: flex;
   align-items: center;
   gap: 10px;
}

.help-div a span {
   color: white;
   background-color: #07A0E6;
   font-size: 12px;
   border-radius: 50%;
   height: 22px;
   width: 22px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
}

.help-button {
   margin-top: 25px;
   display: flex;
}

.help-card-row {
   padding-top: 30px;
}

.text-main i {
   color: #ECC7FF;
   font-size: 20px;
}

.text-main span {
   font-size: 20px;
   font-weight: 700;
   color: var(--heading-color);
}

.dealing-text {
   text-align: center;
}

.dealing-section {
   padding: 20px 0px 50px;
}

.vector-img {
   position: absolute;
   top: 0;
   left: 18%;
}

.vector-img img {
   width: 76%;
}

.dealing-text li {
   color: #262626;
   font-size: 22px;
   font-weight: 700;
}

.dealing-heading {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   margin-bottom: 30px;
}

.text-main {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
}

.dealing-heading h3 {
   font-size: 47px;
   font-weight: 700;
   max-width: 500px;
   margin-bottom: 0px;
   color:black;
}

.dealing-img img {
   width: 100%;
   height: 410px;
   border-radius: 20px;
}

.dealing-img {
   position: relative;
   transition: .3s;
   /* cursor: pointer; */
   width: 100%;
   height: auto;
}

.deal-para p {
   color: #ffff;
   font-size: 30px;
   font-weight: 600;
}

.deal-para {
   position: absolute;
   top: 83%;
   left: 7%;
   transform: translateY(50px);
   transition: .3s;
   opacity: 0;
   z-index: 1;
}

.dealing-img:hover .deal-para {
   transform: translateY(0);
   /* Move to original position */
   opacity: 1;
   /* Make it visible */
}

.deal-button {
   text-align: center;
   padding-top: 20px;
}

.deal-button button {
   background-color: #FAD78D;
   border: 1px solid #FAD78D;
   padding: 6px 35px;
   border-radius: 20px;
   font-size: 19px;
   font-weight: 600;
   color: #262626;
}

.accordion-section {
   background: linear-gradient(120deg, #0064C4, #00AEFF);
   border-radius:30px;
}

.accord-para ul {
   list-style: none;
   padding-left: 0px;
}

.accord-para ul span {
   color: #FAD78D;
   font-size: 16px;
   margin: 0px 10px 0px 0px;
}

.accord-para i {
   color: #FAD78D;
   font-size: 20px;
}

.accord-para span {
   color: #ffff;
   font-size: 20px;
   font-weight: 700;
}

.accord-text h3 {
   font-size: 48px;
   color: #ffff;
   font-weight: 700;
}

.accord-text h3 span {
   color: #FAD78D;
}

.accord-text p {
   color: #ffffff;
   font-size: 16px;
   font-weight: 400;
}

.accord-img img {
   width: 60%;
}

.accord-img {
   text-align: center;
}

.service-accordion .accordion-button span {
   background-color: #EDF2FF;
   margin: 0px 22px;
   padding: 9px 20px;
   border-radius: 50px;
   font-weight: 600;
   font-size: 16px;
}

.service-accordion .accordion-button:not(.collapsed)::after {
   background-image: url(../images/accordion-vector.png);
   transform: rotate(-180deg);
}

.service-accordion .accordion-button::after {
   flex-shrink: 0;
   width: 1.25rem;
   height: 1.25rem;
   margin-left: auto;
   content: "";
   background-image: url(../images/accordion-vector.png);
   background-repeat: no-repeat;
   background-size: 1.25rem;
   transition: transform .2s ease-in-out;
}

.service-accordion .accordion-button::after {
   flex-shrink: 0;
   width: 2.25rem;
   height: 2.25rem;
   margin-left: auto;
   content: "";
   background-image: url(../images/accordion-vector.png);
   background-repeat: no-repeat;
   background-size: 2.25rem;
   transition: transform .2s ease-in-out;
}

.service-accordion .accordion-item:first-of-type .accordion-button {
   border-top-left-radius: none;
   border-top-right-radius: none;
   border-radius: 10px;
   padding: 19px;
}

.accordion-item:first-of-type .accordion-button {
   border-top-left-radius: calc(0px);
   border-top-right-radius: calc(0px);
}

.service-accordion .accordion-item .accordion-button:focus {
   background-color: #f5f6fa !important;
}

.service-accordion .accordion-button:not(.collapsed) {
   background-color: #f5f6fa !important;
}

.service-accordion .accordion-item {
   border-radius: 10px;
   padding: 0px 0px;
   border: none;
   box-shadow: 0px 10px 24px 0px #000000;
   margin-bottom: 10px;
}

.service-accordion .accordion-body>p {
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 0;
}

.service-accordion .accordion-item .accordion-button {
   box-shadow: 0px 0px 4px 0px #837a7a;
   border-radius: 10px !important;
   font-size: 20px;
   font-weight: 600;
   color: var(--heading-color);
}

.blog-heading ul {
   list-style: none;
   padding-left: 0px;
}

.blog-heading i {
   color: #B562E0;
   font-size: 20px;
}

.blog-heading span {
   font-size: 20px;
   font-weight: 700;
   color: var(--heading-color);
}

.blog-para h3 {
   font-size: 38px;
   color: #262626;
   font-weight: 700;
   max-width: 920px;
}

.blog-para h3 span {
   color: #00AEFF !important;
}

.blog-img img {
   width: 100%;
   transition: .3s;
}

.blog-card {
   background-color: #ffff;
   border-radius: 0px 0px 10px 10px;
   position: relative;
   box-shadow: 11.9118px 11.9118px 36.1px rgba(0, 0, 0, 0.1);
   display: block;
}

.blog-card a:after {
   content: "";
   position: absolute;
   top: 100%;
   width: 0%;
   background: #51BC7C;
   height: 1px;
   left: 0;
   transition: .3s;
}

.blog-card a:hover:after {
   width: 100%;
}

.blog-card h4 {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 0px;
   letter-spacing: 0px;
   color:black;
}

.blog-card h4 {
        padding-bottom: 2px;
        display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; 
}
.blog-card p {
    margin-bottom: 15px;
    color: var(--text-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
}

.blog-card-text {
   display: flex;
   flex-direction: column;
   gap: 10px;
   margin-bottom: 20px;
   padding: 20px 15px;
   align-items: flex-start;
}

.blog-card a {
   color: #00a9fb;
   text-decoration: none;
   font-size: 16px;
   font-weight: 500;
   position: relative;
}

.nov {
   position: absolute;
   bottom: 189px;
   left: -9px;
   background: linear-gradient(to right, #0064C4, #00AEFF);
   padding: 0px 25px;
   text-align: center;
}

/* .nov:hover{
   left: 0px;
   
}  */

.nov span {
   margin-bottom: 0px;
   color: #ffff;
   font-size: 16px;
   font-weight: 400;
}

.nov p {
   font-weight: 700;
   font-size: 23px;
   margin-bottom: 0px;
   color: white;
}

.blog-row {
   margin-top: 30px;
}

.explore-section {
   background:#262626;
   border-radius:30px;
}


.left-div {
   text-align: center;
}

.left-div h4 {
   font-size: 69px;
   font-weight: 700;
   color: #ffff;
   /*margin-top: -69px;*/
}

.explore-icon i {
   color: #FFDC24;
   font-size: 14px;
   padding-bottom: 20px;
}

.left-div p {
   font-size: 18px;
   font-weight: 400;
   color: white;
}

.explore-center ul {
   list-style: none;
   padding-left: 0px;
}

.explore-center span,
.explore-center i {
   font-size: 17px;
   color: white;
}

.explore-center h3 {
   color: #FAD78D;
   font-style: italic;
   font-size: 40px;
   line-height: 62px;
   font-weight: 500;
}

.slider-arrow {
   display: flex;
   align-items: center;
   gap: 12px;
   justify-content: end;
}

.slider-arrow>img {
   width: auto !important;
}

.explore-center p {
   font-size: 16px;
   padding-top: 15px;
   color: white;
}


.right-div img {
   width: 52%;
   margin-top: 57px;
}

.explore-section .slick-dots {
   bottom: -60px;
}

.explore-section .slick-dots li.slick-active button:before {
   opacity: 1;
   font-size: 0;
   background: var(--theme-green-color);
   border-radius: 12px;
   height: 7px;
   width: 20px;
}

.explore-section .slick-dots li button:before {
   font-size: 0;
   background: var(--theme-green-color);
   border-radius: 12px;
   height: 7px;
   width: 8px;
   opacity: 1;
}

.right-div p {
   color: #FFFFFF;
   transform: rotate(15deg);
   text-align: center;
   margin-bottom: 0px;
   /* border-radius: 82%; */
}

.explore-circle {
   background:#FAD78D;
   text-align: center;
   border-radius: 54%;
   width: 55%;
   padding: 54px 13px;
   margin-top: 20px;
   margin-left: -39px;
   
}

.left-div {
   position: relative;
}

.left-div p::after {
   content: '';
   position: absolute;
   top: 235px;
   left: 28%;
   width: 140px;
   height: 2px;
   background: #FAD78D;
   border-radius: 20px;
}

.multiple-items .slick-prev {
   right: 0px !important;
}

.team-section {
   /* margin-top: 50px; */
   /* background: linear-gradient(to right, #0064C4, #00AEFF); */
   /* height: 500px; */
   position: relative;
   
}

.team-section::after {
   content: '';
   display: block;
   width: 100%;
   height: calc(100% - 286px);
   background: linear-gradient(to right, #0064C4, #00AEFF);
   position: absolute;
   top: 0;
   border-radius:30px;
}

.team-row {
   position: relative;
   z-index: 3;
   margin-top: 20px;
}

.team-text h3 {
   color: #ffff;
   font-size: 42px;
   font-weight: 700;
   position: relative;
   z-index: 3;
}

.team-text p {
   font-size: 19px;
   color: #ffffff;
   margin-bottom: 0px;
   position: relative;
   z-index: 3;
}

.team-image {
   position: relative;
   transition: .3s;
   overflow: hidden;
   cursor: pointer;
   border-radius:30px;
}

.team-image-text {
   position: absolute;
   top: 90%;
   left: 15px;
   transform: translateY(50px);
   /* Start slightly lower */
   /* transition: opacity 0.5s ease, transform 0.5s ease; */
   /* Prevents click issues */
   /* display: none; */
   /* Initially hidden */
   transition: .3s;
   opacity: 0;
}

/* Show the text when hovering over the parent element */
.team-image:hover .team-image-text {
   /* Show the text on hover */
   transform: translateY(0);
   /* Move to original position */
   /* visibility: visible; */
   /* Make it visible */
   opacity: 1;
}

.team-image-text p {
   margin-bottom: 0px;
   color: #fff;
   font-size: 19px;
   font-weight: 400;
}

.team-image-text span {
   margin-bottom: 0px;
   color: #fff;
   font-size: 16px;
   font-weight: 400;
}

.team-image img {
   width: 100%;
   height: auto;
   /* position: absolute; */
   object-fit: cover;
}

/*footer {*/
/*   background-color: #262626;*/
/*   padding: 50px 0px 30px 0px;*/
/*   position: relative;*/
/*}*/

/*.footer-list ul {*/
/*    list-style: none;*/
/*    padding-left: 0px;*/
/*    margin-bottom: 0;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    gap: 30px;*/
/*}*/


/*.footer-list li>a {*/
/*   color: #fff;*/
/*   font-size: 15px;*/
/*   text-decoration: none;*/
/*   font-weight: 500;*/
/*}*/

/*.footer-list li>a:hover {*/
/*   color: var(--theme-blue-color)*/
/*}*/

/*.footer-button {*/
/*   text-align: end;*/
/*}*/

/*.footer-img img {*/
/*   width: 68%;*/
/*}*/

/*footer hr {*/
/*   color: #4F4F4F;*/
/*   margin: 30px 0px 20px 0px;*/
/*   opacity: 1;*/
/*}*/

/*footer hr:not([size]) {*/
/*   height: 3px;*/
/*}*/

/*.footer-text p {*/
/*   color: #ffffff;*/
/*   font-size: 15px;*/
/*   font-weight: 400;*/
/*   margin-bottom: 0;*/
/*}*/

/*.footer-row-second {*/
/*   align-items: center;*/
/*}*/

/*.footer-icon {*/
/*   text-align: center;*/
/*   color: #fff;*/
/*}*/

/*.footer-icon span {*/
/*   padding: 11px 16px;*/
/*   border-radius: 50%;*/
/*   font-size: 18px;*/
/*   background-image: url(../images/footer-icon-img.png);*/
/*   background-repeat: no-repeat;*/
/*   background-size: cover;*/
/*   margin: 0px 3px;*/
/*}*/

/*.footer-icon span>a {*/
/*   color: white;*/
/*}*/

/*.footer-icon span>a:hover {*/
/*   color: var(--theme-blue-color);*/
/*}*/

/*.footer-arrow-div{*/
/*    position: absolute;*/
/*    bottom: 95%;*/
/*    left: 50%;*/
/*    background-color: #262626;*/
/*    padding: 10px 60px;*/
/*    border-top-right-radius: 37px;*/
/*    border-top-left-radius: 37px;*/
/*    color: #EDF2FF;*/
/*    transform: translateX(-50%);*/
/*}*/
    
/*.footer-arrow-div span {*/
/*   color: #fff;*/
/*}*/
/* footer */
.footer {
  padding-top: 50px;
  padding-bottom: 50px;
 background-image: url('../images/vectorbg.webp');
  background-size: cover;
  border-radius: 30px;
}


.footer-social-media {
    display: inline-flex;
    align-items: left;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #ffff;
    margin-right: 10px;
    color: #FAD78D;
    transition: 0.3s;
}

.footer .footer-right ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer .footer-right ul>li {
  color: white;
  font-size: 16px;
}

.footer .footer-right ul>li a {
  color: white;
  text-decoration: none;
}

.footer .footer-links {
  margin-top: 12px;
  margin-bottom: 12px;
}

.footer .footer-links h5 {
  font-size: 20px;
  font-weight: 400;
  color: white;
  text-align:left;
}

.footer .footer-links ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer .footer-links ul>li {
  color: white;
  font-size: 16px;
  font-weight: 300;
  display: flex;
  align-items: center;
}

.footer .footer-links ul>li a {
  color: white;
  text-decoration: none;
  transition: all ease 0.5s;
}

.footer .footer-links ul>li a:hover {
  color: #FFB72B;
}

.footer hr {
  color:white;
  opacity: 1
  margin-right:20px;
  
}

.footer-bottom {
  background: linear-gradient(to right, #0064C4, #00AEFF);
  padding: 20px 0;
  text-align: center;
}

.footer-bottom p {
  color: white;
  font-size: 16px;
  margin-bottom: 0;
  font-weight: 400;
}
.social-main a {
    font-size: 22px;
    color: white;
    border: 1px solid;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color:#FAD78D;
    text-decoration:none;
    
}
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
    color: #ffffff;}

.social-main {
    display: flex;
    align-items: center;
    gap: 15px;
    
}
/* end */

.agency-background img {
   width: 100%;
}

.agency-section {
   padding-bottom: 60px;
}

.agency-background {
   position: relative;
}

.agency-text {
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   padding-right: 60px;
   gap: 10px;
}

.agency-text p {
   font-size: 24px;
   color: #fff;
   font-weight: 300;
   line-height: 1;
}

.agency-text h3 {
   font-size: 60px;
   color: #fff;
   font-weight: 700;
}

.help-div a:hover span i {
   rotate: -45deg;
}

.help-div a span i {
   transition: .3s;
}

.blog-card:hover .blog-img img {
   scale: 1.1;
}

.blog-img {
   overflow: hidden;
}

.help-div::after {
   content: '';
   top: 0;
   height: 0%;
   width: 100%;
   background-color: #EDF2FF;
   left: 0;
   position: absolute;
   transition: 0.3s;
}

.help-div:hover::after {
   height: 25%;

}

.help-div:hover h4,
.help-div:hover ul span {
   color: #07A0E6;
}

.help-div {
   background-color: white;
   border-radius: 20px;
   overflow: hidden;
   padding: 25px 20px;
   position: relative;
}

/*scroll*/
::-webkit-scrollbar {
   width: 12px;
}

::-webkit-scrollbar-thumb {
   background: var(--theme-blue-color);
   border-color: var(--theme-blue-color);
   border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
   background-color: #000001;
}

/* end */

.animate-up {
   animation: up 3s ease-in-out infinite;
}

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

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

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

/* Offcanvas */
.offcanvas {
   background: linear-gradient(120deg, #0064C4, #00AEFF);
}

.offcanvas ul.dropdown-menu {
   column-count: auto;
   overflow: scroll;
   height: 255px;
   width: 100%;
}

/* end */

.sourcode-digital-content h2 {
   font-size: 40px;
   font-weight: 700;
   max-width: 500px;
}

.sourcode-digital-content>p {
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 0;
}

.strategy-container {
   flex-direction: column;
   display: flex;
   gap: 10px;
   margin-top: 41px;
}

.strategy-main {
   display: flex;
   align-items: flex-start;
   gap: 22px;
   margin-top: 23px;
}

.strategy-main-content>h3 {
   margin: 0;
   font-size: 25px;
   font-weight: 800;
}

.strategy-main-content>p {
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 0;
}


.strategy-main-content {
   flex-direction: column;
   display: flex;
   gap: 21px;
}

.strategy-main .icon {
   height: 83px;
   flex: 0 0 83px;
   /* background: #22A8C6; */
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;
   color: white;
   border-radius: 50%;
   margin-top: -23px;
   position: relative;
   border: 1px solid transparent;
   transition: .3s;
   /* overflow: hidden; */
}

.strategy-main:not(:last-child) .icon:after {
   position: absolute;
   content: '';
   top: 100%;
   width: 2px;
   background: #A7A4A4;
   left: 50%;
   transform: translateX(-50%);
   height: 143px;
   display: flex;
}

.strategy-main:hover .icon i {
   rotate: 35deg;
   color: #22A8C6;
}

.strategy-main .icon i {
   transition: .3s;
   position: relative;
   z-index: 22;
}

.strategy-main:hover .icon {
   background: white;
   color: white;
   border-color: #A7A4A4;
}

.strategy-main .icon:before {
   content: "";
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   background: #22A8C6;
   height: 100%;
   width: 100%;
   left: 50%;
   border-radius: 50%;
   opacity: 1;
   transition: .3s;
}

.strategy-main:hover .icon:before {
   width: 20%;
   height: 20%;
   opacity: 0;
}

.sourcode-digital-img {
   height: 750px;
   width: 100%;
   overflow: hidden;
   border-radius: 10px;
}
.career-detail-sec-2 {
    padding: 50px 0px 25px;
}
.sourcode-digital-img img {
   height: 100%;
   width: 100%;
   object-fit: cover;
}


.life-ling-img {
   height: 351px;
   overflow: hidden;
   margin: 10px 0;
}

.life-ling-img img {
   height: 100%;
   width: 100%;
   object-fit: cover;
   transition: .3s;
}
.sour-code-digital {
    padding: 50px 0px 25px;
}
.lifelong-learners {
   padding: 25px 0 25px;
}

.lifelong-learners-content h3 {
   font-size: 40px;
   font-weight: 700;
   text-transform: capitalize;
}

.lifelong-learners-content>p {
   font-size: 16px;
   font-weight: 400;
}

.life-ling-img:hover img {
   scale: 1.1;
}

p.quote-text {
   display: flex;
   align-items: flex-start;
   max-width: 800px;
   margin: 0 auto;
   gap: 30px;
   margin-top: 50px;
}

p.quote-text img {
   margin-top: -20px;
}

p.quote-text span {
   font-size: 20px;
   color: #757575;
   font-weight: 500;
   font-style: italic;
}

.current-openings {
   padding: 25px 0 0px;
}

.current-openings-list-main {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.current-openings-main h4 {
   font-size: 33px;
   font-weight: 700;
   margin-bottom: 30px;
   margin-top: 25px;
}

.current-openings-container h3 {
   font-size: 40px;
   font-weight: 700;
   margin-bottom: 40px;
}

.current-openings-main .accordion-item {
   border: none;
   border-radius: 20px !important;
   margin-bottom: 20px;
}

.current-openings-main .accordion-button:focus {
   border-color: #ffffff;
   box-shadow: none;
}

.current-openings-main .accordion-button:not(.collapsed) {
   color: #212121;
   background-color: #ffffff;
   box-shadow: none;
}

.current-openings-main .accordion-item span {
   margin-bottom: 0;
   font-size: 18px;
   font-weight: 500;
   border-radius: 20px !important;
}

.current-openings-main .designer-postion {
   padding: 30px;
   background-color: #F0F0F0;
   border-radius: 6px;
}


.current-openings-main .designer-postion h5 {
   font-size: 30px;
   font-weight: 700;
   margin-bottom: 30px;
}

.current-openings-main .designer-postion p {
   font-size: 18px;
   font-weight: 600;
}

.current-openings-main .designer-postion ul li {
   font-size: 16px;
   font-weight: 400;
}

.border-less-btn {
   border-radius: 0;
}

.transparent-btn {
   background: transparent;
   border-color: white;
   box-shadow: none;
   transition: .3s;
   color: white;
}

.transparent-btn:hover {
   border: 2px solid #FAD78D;
   background-image: -webkit-linear-gradient(30deg, #FAD78D 100%, transparent 100%);
   background-image: linear-gradient(30deg, #FAD78D 100%, transparent 100%);
   color: var(--heading-color);

}

.career-detail {
   flex-direction: column;
   display: flex;
   align-items: flex-start;
   gap: 7px;
}

.career-detail h1 {
   font-size: 50px;
   color: white;
}

.career-detail p {
   font-size: 16px;
   font-weight: 400;
   color: #ffffff;
   margin-bottom: 0;
}

.career-detail-list-main {
   display: flex;
   align-items: center;
   gap: 20px;
   margin-bottom: 6px;
}

.career-detail-list {
   display: flex;
   align-items: center;
   gap: 7px;
   color: white;
}

.career-detail-list span strong {
   font-weight: 700;
   color: var(--theme-green-color);
}

.career-detail-list span {
   color: var(--theme-green-color);
}

.career-detail-btn-main {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 15px;
}


.career-detail-sec-2-list>* {
   margin: 0;
}

.career-detail-sec-2-list-main {
   flex-direction: column;
   display: flex;
   gap: 30px;
}

.career-detail-sec-2-list {
   flex-direction: column;
   display: flex;
   gap: 15px;
}

.career-detail-sec-2-list h4 {
   font-size: 30px;
   font-weight: 500;
   padding-bottom: 15px;
   border-bottom: 1px solid #B1B1B1;
}

.career-detail-sec-2-list p {
   color: #161616;
   font-size: 16px;
   font-weight: 400;
   margin-bottom: 0;
}

.career-detail-sec-2-list p>i {
   color: #07A0E6;
   font-size: 18px;
}

.apply-now {
   padding: 25px 0 80px;
}

.apply-now .apply-heading {
   text-align: center;
}

.apply-now .apply-heading>h3 {
   font-size: 38px;
   color: #262626;
   font-weight: 700;
   margin-bottom: 22px;
}

.apply-now .apply-heading>p {
   font-size: 20px;
   font-weight: 400;
   color: #4A4A4A;
   margin-bottom: 35px;
}

.apply-now .apply-form {
   border: 1px solid #ffffff;
   padding: 30px 40px;
   background: #ffffff;
   border-radius: 15px;
}

.apply-now .apply-form form input,
.apply-now .apply-form form select,
.apply-now .apply-form form textarea {
   background: #fafff1;
}

.apply-now .apply-form form label {
   color: #212121;
   font-weight: 600;
   margin-bottom: 5px;
   font-size: 16px;
}

.form-control {
   resize: none;
   display: block;
   width: 100%;
   padding: 16px 15px;
   font-size: 1rem;
   border-radius: 8px;
   font-weight: 400;
   line-height: 1.5;
   border: 1px solid #C4CACE;
   color: #1e1e1e !important;
   background-color: #F1F1F1;
}

.form-control:focus {
   background-color: transparent !important;
   border-color: var(--theme-green-color);
   box-shadow: none !important;
   outline: none !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* end */

.contact-us {
   padding: 50px 0 100px;
}

.contact-us .contact-heading {
   text-align: center;
}

.contact-us .contact-heading>h3 {
   font-size: 38px;
   color: #262626;
   font-weight: 700;
   margin-bottom: 22px;
}

.contact-us .contact-heading>p {
   font-size: 20px;
   font-weight: 400;
   color: #4A4A4A;
   margin-bottom: 35px;
}
.contact-us .contact-form {
   border: 1px solid #ffffff;
   padding: 30px 40px;
   background: #ffffff;
   border-radius: 15px;
}

.contact-us .contact-form form input,
.contact-us .contact-form form select,
.contact-us .contact-form form textarea {
   background: #fafff1;
}

.contact-us .contact-form form label {
   color: #212121;
   font-weight: 600;
   margin-bottom: 5px;
   font-size: 16px;
}

.navbar-toggler {
   box-shadow: none !important;
   border: none;
}

/*hover image*/

.hover-list {
   padding: 25px 0px 50px;
}

.hover-list .list-inner {
   display: flex;
   align-items: center;
   color:black;
   
   
}

.hover-list .list-inner .list-heading {
   width: 42%;
   
   
}

.hover-list .list-inner .list-heading>h3:hover,
.hover-list .list-inner .list-heading>h3.active {
   color: #00AEFF;
   
}

.hover-list .list-inner .list-heading>h3 {
   font-size: 32px;
   color:black;
}

.hover-list .list-inner .list-heading>h3>i {
   transform: rotate(-40deg);
}

.hover-list .list-inner .list-paragraph {
   width: 58%;
}

.hover-list .list-inner .list-paragraph>p {
   font-size: 16px;
   font-weight: 400;
}

.hover-list .hover-img>img {
   display: none;
   width: 100%;
}

/* end */


/*Thank You Start*/

/*Thank You Page Start*/
.thank_you_header{
      position: absolute;
    width: 100%;
    background-color: transparent !important;
}

.thank_you {
    background:#00AEFF;
    background-repeat: no-repeat, repeat;
    background-size: cover;
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
} 
.thank_you_data h2{
    font-size: 2.8rem;
    color: #fff;
    font-weight: 800;
}
.thank_you_data p{
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 40px;
}
.thank_you_data a{
    text-decoration: none;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    border: 1px solid #fff;
    padding: 10px 20px;
        transition: all 0.3s ease-in-out;
    border-radius: 18px;
}
.thank_you_data a:hover{
    color: #00AEFF;
    background: #fff;
}
/*Thank You Page End*/
/*Thank You End*/
/*Blog Page*/

.blog-h1{
    font-size:3.9rem;
    font-weight:800;
    color:#fff;
}

.blog-content {
    padding-left: 50px;
    padding-right: 50px;
}
.blog-content img {
    display: flex;
    margin: 38px auto;
}
.blog-content h2 {
    font-size: 2.3rem;
    margin-top: 34px;
}
.blog-content h3 {
    font-size: 1.8rem;
    margin-top: 40px;
}
.blog-content p {
    font-size: 1rem;
    line-height: 23px;
    margin-bottom: 20px;
}

.blog-content a {
    color: #51BC7C;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}
.blog-content a:hover {
    color: #00ff66;
}

 /* Base styles for the partners section */
        .partners {
            background-color: #ffffff; /* white background for the section */
            color: #000000;          /* black text colour for headings */
            padding: 40px 0;
            font-family: Arial, Helvetica, sans-serif;
            text-align: center;
        }

        .partners h2 {
            margin-bottom: 20px;
            font-weight: bold;
        }

        /* Container to control the width of the section content */
        .partners .partners-container {
            max-width: 1200px;
            margin: 0 auto;
            /* Remove horizontal padding so the card widths and gaps fit evenly
               within the container.  This prevents cards from being cut off
               at the right edge during continuous scrolling. */
            padding: 0;
            position: relative;

            /* Hide overflowing content from child elements.  While the
               `.partners-cards` element has `overflow: visible` to ensure
               cards can slide outside its bounds without being cut off,
               this parent container hides the overflow so the page does not
               scroll horizontally.  The fade overlays will handle the
               smooth disappearance of cards at the edges. */
            overflow: hidden;

            /* Add gradient overlays on the left and right edges to softly fade
               cards as they slide out of view.  Continuous sliding will
               inevitably produce partially visible cards at the boundaries; by
               masking the edges with a linear gradient from the section's
               background colour (white) to transparent, the cropping is
               visually softened.  MDN notes that overflow handling and
               scroll effects can be complemented with masking for carousels【766415940392773†L176-L181】. */
        }

        .partners .partners-container::before,
        .partners .partners-container::after {
            content: "";
            position: absolute;
            top: 0;
            width: 120px;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }

        /* Left fade overlay */
        .partners .partners-container::before {
            left: 0;
            /* Gradient fades from the section's white background to transparent */
            background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
        }

        /* Right fade overlay */
        .partners .partners-container::after {
            right: 0;
            /* Gradient fades from white to transparent in the opposite direction */
            background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0));
            width: 120px;
        }

        /* Flex container for the cards.
         * For continuous sliding, we set the container to flex with nowrap
         * and hide overflow.  We handle the horizontal translation via
         * JavaScript rather than CSS animations to ensure each card is
         * fully visible when it scrolls past the edges.  The margins are
         * offset on the container to cancel the outer margins of the
         * first and last cards, allowing the cards to fill the container
         * evenly. */
        .partners .partners-cards {
            display: flex;
            flex-wrap: nowrap;
            gap: 0;
            /* Allow cards to extend outside of the container so they are never cut
               off.  The fade overlays on the container will hide the
               overflow smoothly. */
            overflow: visible;
            margin-left: -10px;
            margin-right: -10px;
            /* Continuous sliding animation using CSS keyframes. */
            animation: slide-left 30s linear infinite;
        }

        /* Hide native scrollbars on WebKit browsers (not strictly needed since overflow is hidden) */
        .partners .partners-cards::-webkit-scrollbar {
            display: none;
        }

        /* Define keyframes for continuous sliding.
         * The animation moves the container left by 50% of its width, which
         * corresponds to the length of one copy of the card sequence.  When
         * the translation reaches -50%, the second copy has moved into view
         * and the animation resets to 0% to start again. */
        @keyframes slide-left {
            0% {
                transform: translateX(0);
            }
            100% {
                /* Shift by half of the total row width.  Because each card
                   occupies 240px (220px width + 10px left margin + 10px right
                   margin), and the row is duplicated, half the row width
                   corresponds exactly to one full set of cards. */
                transform: translateX(-50%);
            }
        }

        /* Individual card styling */
        .partners .partner-card {
            background-color: #00AEFF; /* card colour specified by the user */
            padding: 20px;
            border-radius: 8px;
            width: 220px;
            flex: 0 0 220px; /* ensures each card has a fixed width in the carousel */
            display: flex;
            align-items: center;
            justify-content: center;
            scroll-snap-align: start; /* align the card to the start of the snap port */
            /* Add equal margins left and right to create consistent spacing.
               Each card occupies 240px total (220 + 10 + 10), so five cards
               fit evenly into a 1200px container without leftover space. */
            margin-left: 10px;
            margin-right: 10px;
        }

        /* Logo styling – ensures logos scale properly and remain centered. The
         * brightness/invert filters make dark logos appear white on the blue
         * cards, improving contrast. */
        .partners .partner-card img {
            max-width: 100%;
            height: auto;
            filter: brightness(0) invert(1);
        }
        .row>*{
            text-align:left;
        }
        }