:root {
  --text-color: #000000;
}





















/*==================================================
PRELOADER
==================================================*/

#preloader{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#ffffff;
}

/*=========================================
BACKGROUND
=========================================*/

.loader-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
}

/*=========================================
GRID
=========================================*/

.grid-pattern{

    position:absolute;
    inset:0;

    background-image:

    linear-gradient(rgba(249,115,22,.06) 1px,transparent 1px),

    linear-gradient(90deg,rgba(249,115,22,.06) 1px,transparent 1px);

    background-size:60px 60px;

    opacity:.45;

}

/*=========================================
RADIAL LIGHT
=========================================*/

.loader-bg::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

    radial-gradient(circle,
    rgba(249,115,22,.12),
    transparent 70%);

}

/*=========================================
CONTENT
=========================================*/

.loader-content{

    position:relative;

    z-index:10;

    width:430px;

    text-align:center;

}

/*=========================================
LOGO
=========================================*/

.loader-logo{

    width:180px;

    margin:auto;

    margin-bottom:45px;

    user-select:none;

    filter:

    drop-shadow(0 15px 25px rgba(249,115,22,.18));

}

/*=========================================
GLOBE
=========================================*/

.globe-wrapper{

    position:relative;

    width:170px;

    height:170px;

    margin:auto;

    margin-bottom:45px;

}

.globe{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:90px;
    height:90px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:

    linear-gradient(145deg,
    #f97316,
    #fb923c);

    box-shadow:

    0 0 50px rgba(249,115,22,.35);

}

.globe i{

    font-size:40px;

    color:#fff;

}

/*=========================================
ORBITS
=========================================*/

.orbit{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    border-radius:50%;

    border:1.5px dashed rgba(249,115,22,.35);

}

.orbit1{

    width:135px;
    height:135px;

}

.orbit2{

    width:165px;
    height:165px;

}

/*=========================================
TITLE
=========================================*/

.loader-title{

    font-size:28px;

    font-weight:700;

    color:#111827;

    margin-bottom:12px;

}

#loadingText{

    font-size:15px;

    color:var( --text-color);

    margin-bottom:40px;

    min-height:24px;

    letter-spacing:.4px;

}

/*=========================================
PROGRESS
=========================================*/

.progress-area{

    width:100%;

}

.progress-line{

    position:relative;

    width:100%;

    height:8px;

    border-radius:100px;

    background:#ededed;

    overflow:hidden;

}

#progressFill{

    position:relative;

    width:0%;

    height:100%;

    border-radius:100px;

    background:

    linear-gradient(90deg,

    #fb923c,

    #f97316);

}

/*=========================================
SHIP
=========================================*/

.ship-progress{

    position:absolute;

    right:-8px;

    top:50%;

    transform:translateY(-50%);

    color:#f97316;

    font-size:22px;

    background:#fff;

    padding:6px;

    border-radius:50%;

    box-shadow:

    0 10px 30px rgba(249,115,22,.25);

}

/*=========================================
PERCENT
=========================================*/

#progressValue{

    display:block;

    margin-top:18px;

    font-size:15px;

    font-weight:700;

    color:#f97316;

    letter-spacing:1px;

}

/*=========================================
FLOATING ICONS
=========================================*/

.floating-icons i{

    position:absolute;

    color:#f97316;

    opacity:.08;

}

.ship1{

    top:14%;
    left:9%;

    font-size:44px;

}

.box1{

    right:10%;
    top:18%;

    font-size:34px;

}

.plane1{

    left:15%;
    bottom:16%;

    font-size:42px;

}

.truck1{

    right:12%;
    bottom:15%;

    font-size:40px;

}

/*=========================================
DECORATIVE DOTS
=========================================*/

.loader-bg::after{

    content:"";

    position:absolute;

    width:14px;
    height:14px;

    border-radius:50%;

    background:#f97316;

    left:18%;

    top:22%;

    box-shadow:

    300px 80px rgba(249,115,22,.15),

    620px 280px rgba(249,115,22,.15),

    150px 500px rgba(249,115,22,.12),

    900px 120px rgba(249,115,22,.10),

    1100px 480px rgba(249,115,22,.10);

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:768px){

.loader-content{

    width:90%;

}

.loader-logo{

    width:145px;

}

.globe-wrapper{

    width:140px;
    height:140px;

}

.globe{

    width:76px;
    height:76px;

}

.globe i{

    font-size:34px;

}

.loader-title{

    font-size:22px;

}

#loadingText{

    font-size:14px;

}

.ship-progress{

    font-size:18px;

    padding:5px;

}

.ship1,
.box1,
.plane1,
.truck1{

    font-size:28px;

}

}

@media(max-width:480px){

.loader-title{

    font-size:20px;

}

.loader-logo{

    width:130px;

}

.globe-wrapper{

    margin-bottom:30px;

}

}































/*==================================================
TOP BAR
==================================================*/

#topBar{

    position:relative;

    z-index:60;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.top-link{

    display:flex;

    align-items:center;

    gap:8px;

    color:#d1d5db;

    transition:.3s;

    font-size:14px;

}

.top-link i{

    color:#f97316;

    font-size:13px;

}

.top-link:hover{

    color:#ffffff;

}

.social-link{

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#d1d5db;

    transition:.35s;

}

.social-link:hover{

    background:#f97316;

    color:#fff;

    transform:translateY(-2px);

}

@media(max-width:1024px){

    #topBar{

        display:none;

    }

}


.nav-link-menu{
    font-size: 16px;
    font-weight: 700;
}



















/*==================================================
HERO SECTION
==================================================*/

#hero{
    position:relative;
    width:100%;
    overflow:hidden;
}

.heroSlider{
    width:100%;
    height:700px;
    min-height:700px;
}

.swiper-slide{
    position:relative;
    overflow:hidden;
}

/*=========================================
BACKGROUND IMAGE
=========================================*/

.hero-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:fill;
    transform:scale(1.08);
}

/*=========================================
OVERLAY
=========================================*/

.hero-overlay{

    position:absolute;
    inset:0;

    background:
    linear-gradient(
    90deg,
    rgba(0,0,0,.75) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.18) 100%);

}

/*=========================================
CONTENT
=========================================*/

.hero-content{

    position:relative;
    z-index:10;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
margin-top: 5%;
    height:800px;

    max-width:720px;

}

/*=========================================
BADGE
=========================================*/

.hero-badge{

    display:inline-flex;
    align-items:center;
    gap:10px;

    width:max-content;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    color:#fff;

    font-size:14px;

    font-weight:500;

    margin-bottom:28px;

    border:1px solid rgba(255,255,255,.2);

}

.hero-badge i{

    color:#f97316;

}

/*=========================================
TITLE
=========================================*/

.hero-title{

    color:#fff;

    font-size:3.3rem;

    font-weight:800;

    line-height:1.12;

    margin-bottom:28px;

}

.hero-title span{

    color:#f97316;

    display:block;

}

/*=========================================
DESCRIPTION
=========================================*/

.hero-desc{

    color:#f3f4f6;
    
    font-size:20px;
    font-weight: 700;
    text-align: justify;
    line-height:1.5;

    max-width:620px;

    margin-bottom:42px;

}

/*=========================================
BUTTONS
=========================================*/

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:17px 36px;

    border-radius:10px;

    font-weight:600;

    transition:.35s;

}

.hero-primary{

    background:#f97316;

    color:#fff;

}

.hero-primary:hover{

    background:#ea580c;

    transform:translateY(-4px);

}

.hero-secondary{

    color:#fff;

    border:2px solid rgba(255,255,255,.3);

    backdrop-filter:blur(15px);

}

.hero-secondary:hover{

    background:#fff;

    color:#111827;

}

/*=========================================
PAGINATION
=========================================*/

.hero-pagination{

    position:absolute;

    bottom:45px !important;

}

.hero-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    opacity:1;

    background:#fff;
    display: none;

}

.hero-pagination .swiper-pagination-bullet-active{

    background:#f97316;

    width:36px;

    border-radius:20px;

}

/*=========================================
ARROWS
=========================================*/

.hero-prev,
.hero-next{

    width:58px !important;

    height:58px !important;

    border-radius:50%;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    color:#fff !important;

    transition:.3s;

}

.hero-prev:hover,
.hero-next:hover{

    background:#f97316;

}

.hero-prev::after,
.hero-next::after{

    font-size:18px !important;

    font-weight:bold;

}

/*=========================================
SCROLL INDICATOR
=========================================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:30;

    display:flex;

    flex-direction:column;

    align-items:center;

    color:#fff;

    gap:10px;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.scroll-indicator i{

    font-size:24px;

    color:#f97316;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.hero-title{

    font-size:56px;

}

.hero-desc{

    font-size:20px;

}

}

@media(max-width:992px){

.heroSlider{

    height:750px;

}

.hero-content{

    justify-content:flex-start;
  margin-top: 100px;
    padding-bottom:140px;

}

.hero-title{

    font-size:46px;

}

.hero-prev,
.hero-next{

    display:none !important;

}

}

@media(max-width:768px){

.heroSlider{

    height:600px;

}

.hero-content{

    padding-bottom:110px;

}

.hero-title{

    font-size:36px;

}

.hero-desc{

    font-size:20px;

}

.hero-buttons{

    flex-direction:column;

    align-items:flex-start;

}

.hero-btn{

    width:220px;

    justify-content:center;

}

.hero-badge{

    font-size:13px;

}

}

@media(max-width:480px){

.hero-content{

    max-width:100%;

}

.hero-title{

    font-size:30px;

    line-height:1.25;

}

.hero-desc{

    font-size:18px;

    line-height:1.6;

}

.hero-btn{

    width:100%;

}

.hero-pagination{

    bottom:20px !important;

}

.scroll-indicator{

    display:none;

}

}





















/*==================================================
ABOUT SECTION
PART 2A
==================================================*/

#about{

    position:relative;

    padding:40px 0;

    background:#ffffff;

    overflow:hidden;

}

/*=========================================
CONTAINER
=========================================*/

#about .max-w-7xl{

    position:relative;

    z-index:2;

}

/*=========================================
GRID
=========================================*/

#about .grid{

    align-items:center;

    column-gap:80px;

}

/*=========================================
LEFT CONTENT
=========================================*/

.about-content{

    position:relative;

}

/*=========================================
BADGE
=========================================*/

.about-content .inline-flex{

    transition:.35s ease;

}

.about-content .inline-flex:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 40px rgba(249,115,22,.12);

}
.about-badge{
   font-size: 14px;
}
/*=========================================
HEADING
=========================================*/

.about-content h2{

    font-family:"Poppins",sans-serif;
      font-size: 2.4rem;
    font-weight:700;

    letter-spacing:-1px;

    color:#0F4C5C;

    line-height: 1.3;

    margin-bottom:35px;

}

/*=========================================
PARAGRAPHS
=========================================*/

.about-content p{

    font-size:17px;

    line-height:2;

    color:var( --text-color);

    margin-bottom:24px;

    text-align:justify;

}

.about-content strong{

    color:#111827;

    font-weight:600;

}

/*=========================================
BUTTON
=========================================*/

.about-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:8px;

    background:#f97316;

    color:#ffffff;

    font-weight:600;

    transition:.35s ease;

    box-shadow:

    0 15px 35px rgba(249,115,22,.22);

}

.about-btn:hover{

    background:#ea580c;

    transform:translateY(-4px);

    box-shadow:

    0 25px 45px rgba(249,115,22,.28);

}

.about-btn i{

    transition:.35s;

}

.about-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
RIGHT IMAGE
=========================================*/

#about .relative{

    position:relative;

}

#about .relative img{

    width:100%;

    display:block;

    object-fit:fill;

    transition:1s ease;

}

#about .overflow-hidden{

    overflow:hidden;

    border-radius:20px;

    box-shadow:

    0 35px 80px rgba(0,0,0,.12);

}

#about .overflow-hidden:hover img{

    transform:scale(1.06);

}

/*=========================================
DECORATIVE BACKGROUND
=========================================*/

#about::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(249,115,22,.06),

    transparent 70%);

    left:-180px;

    top:-120px;

}

#about::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(15,76,92,.04),

    transparent 70%);

    right:-120px;

    bottom:-100px;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:1200px){

#about{

    padding:40px 0;

}

#about .grid{

    gap:60px;

}

.about-content h2{

    font-size:2.2rem !important;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

#about{

    padding:40px 0;

}

#about .grid{

    grid-template-columns:1fr;

}

.about-content{

    order:2;

}

#about .relative{

    order:1;

}

.about-content h2{

    font-size:2.1rem !important;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

#about{

    padding:40px 0;

}

.about-content h2{

    font-size:1.8rem !important;

    line-height:1.3;

}

.about-content p{

    font-size:16px;

    line-height:1.9;

}

.about-btn{

    width:100%;

}

}
/*==================================================
ABOUT SECTION
PART 2A
==================================================*/

#about{

    position:relative;

    padding:40px 0;

    background:#ffffff;

    overflow:hidden;

}

/*=========================================
CONTAINER
=========================================*/

#about .max-w-7xl{

    position:relative;

    z-index:2;

}

/*=========================================
GRID
=========================================*/

#about .grid{

    align-items:center;

    column-gap:80px;

}

/*=========================================
LEFT CONTENT
=========================================*/

.about-content{

    position:relative;

}

/*=========================================
BADGE
=========================================*/

.about-content .inline-flex{

    transition:.35s ease;

}

.about-content .inline-flex:hover{

    transform:translateY(-3px);

    box-shadow:

    0 18px 40px rgba(249,115,22,.12);

}

/*=========================================
HEADING
=========================================*/

.about-content h2{

    font-family:"Poppins",sans-serif;

    font-weight:700;

    letter-spacing:-1px;

    color:#0F4C5C;

    margin-bottom:35px;

}

/*=========================================
PARAGRAPHS
=========================================*/

.about-content p{

    font-size:17px;

    line-height:2;

    color:var( --text-color);

    margin-bottom:24px;

    text-align:justify;

}

.about-content strong{

    color:#111827;

    font-weight:600;

}

/*=========================================
BUTTON
=========================================*/

.about-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border-radius:8px;

    background:#f97316;

    color:#ffffff;

    font-weight:600;

    transition:.35s ease;

    box-shadow:

    0 15px 35px rgba(249,115,22,.22);

}

.about-btn:hover{

    background:#ea580c;

    transform:translateY(-4px);

    box-shadow:

    0 25px 45px rgba(249,115,22,.28);

}

.about-btn i{

    transition:.35s;

}

.about-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
RIGHT IMAGE
=========================================*/

#about .relative{

    position:relative;

}

#about .relative img{

    width:100%;

    display:block;

    object-fit:fill;

    transition:1s ease;

}

#about .overflow-hidden{

    overflow:hidden;

    border-radius:20px;

    box-shadow:

    0 35px 80px rgba(0,0,0,.12);

}

#about .overflow-hidden:hover img{

    transform:scale(1.06);

}

/*=========================================
DECORATIVE BACKGROUND
=========================================*/

#about::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(249,115,22,.06),

    transparent 70%);

    left:-180px;

    top:-120px;

}

#about::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(15,76,92,.04),

    transparent 70%);

    right:-120px;

    bottom:-100px;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:1200px){

#about{

    padding:40px 0;

}

#about .grid{

    gap:60px;

}

.about-content h2{

    font-size:42px !important;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

#about{

    padding:40px 0;

}

#about .grid{

    grid-template-columns:1fr;

}

.about-content{

    order:2;

}

#about .relative{

    order:1;

}

.about-content h2{

    font-size:38px !important;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

#about{

    padding:40px 0;

}

.about-content h2{

    font-size:30px !important;

    line-height:1.3;

}

.about-content p{

    font-size:16px;

    line-height:1.9;

}

.about-btn{

    width:100%;

}

}


















/*==================================================
OUR SERVICES
PART 2A
Base Layout + Card Design
==================================================*/

/*=========================================
SECTION
=========================================*/

#services{

    position:relative;

    padding:40px 0;

    background:#F5FCFD;

    overflow:hidden;

}

/*=========================================
BACKGROUND SHAPE
=========================================*/

.services-bg{

    position:absolute;

    top:-250px;

    left:50%;

    transform:translateX(-50%);

    width:1400px;

    height:650px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,92,171,.06),
    transparent 70%);

    pointer-events:none;

}

/*=========================================
HEADING
=========================================*/

.section-title{

    font-size:2.6rem ;

    font-weight:700;

    line-height:1.1;

    color:#0E2344;

    margin-bottom:22px;

    letter-spacing:-1px;

}

.section-title span{

    display:block;

    color:#0D5CAB;

}

.section-description{

    max-width:660px;

    margin:auto;

    color:var( --text-color);

    font: size 0.8rem;

    line-height:1.6;
      /* text-align: justify; */

}

/*=========================================
GRID
=========================================*/

#services .grid{

    align-items:stretch;

}

/*=========================================
CARD
=========================================*/

.service-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:#fff;

    border-radius:26px;

    overflow:hidden;

    /* min-height:560px; */

    box-shadow:

    0 15px 45px rgba(0,0,0,.06);

    transition:.45s;



}

/*=========================================
TOP SHAPE
=========================================*/



/*=========================================
ARROW
=========================================*/
.service-card::before{

    z-index:1;

}

.service-arrow{

    position:absolute;

    top:12px;

    right:12px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#ffffff5b;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:20;
   border: .1px solid ;
    box-shadow:
    0 15px 35px rgba(0,0,0,.12);

}

.service-arrow i{

    font-size:18px;

    color:#111827;

    transition:.35s;

}

/*=========================================
CONTENT
=========================================*/

.service-content{

    padding:34px 28px;
    /* border: 2px solid red; */

}

.service-content h3{

    font-size:24px;
   /* margin-top: 10px; */
    line-height:1.45;

    font-weight:700;

    color:#1F2937;

    margin-bottom:10px;

}

.service-content p{

    color:var( --text-color);

    font-size:16px;

    line-height:1.9;

}

/*=========================================
IMAGE
=========================================*/

.service-image{

    position:relative;

    margin:0 18px 18px;

    overflow:hidden;

    border-radius:22px;

    height:300px;
    /* border: 2px solid red; */

}

.service-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s ease;

    display:block;

}

/*=========================================
IMAGE OVERLAY
=========================================*/

.service-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    transparent,

    rgba(0,0,0,.10)

    );

    z-index:1;

}

/*=========================================
BADGE
=========================================*/

#services .inline-flex{

    transition:.35s;

}

#services .inline-flex:hover{

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(249,115,22,.12);

}

/*=========================================
TABLET
=========================================*/

@media(max-width:1200px){

.service-card{

    min-height:520px;

}



}

/*=========================================
992
=========================================*/

@media(max-width:992px){

#services{

    padding:40px 0;

}



.service-card{

    min-height:500px;

}

.service-image{

    height:260px;

}

}

/*=========================================
768
=========================================*/

@media(max-width:768px){

#services{

    padding:40px 0;

}



.section-description{

    font-size:15px;

}

.service-card{

    min-height:auto;

}

.service-content{

    padding:30px 24px 20px;

}

.service-content h3{

    font-size:22px;

}

.service-image{

    margin:0 15px 15px;

    height:240px;

}

}

/*=========================================
480
=========================================*/

@media(max-width:480px){



.service-content h3{

    font-size:20px;

}

.service-content p{

    font-size:15px;

}

.service-arrow{

    width:38px;

    height:38px;

}

}
/*==================================================
OUR SERVICES
PART 2B
Hover Effects + Premium Animation + Responsive
==================================================*/

/*=========================================
CARD HOVER
=========================================*/

.service-card{

    border:1px solid transparent;

}

.service-card:hover{

    transform:translateY(-14px);

    border-color:rgba(13,92,171,.12);

    box-shadow:
    0 35px 80px rgba(0,0,0,.10);

}

/*=========================================
TOP SHAPE
=========================================*/

.service-card::before{

    transition:.45s ease;

}

.service-card:hover::before{

    width:190px;

    height:105px;

}

/*=========================================
ARROW BUTTON
=========================================*/

.service-arrow{

    transition:
    background .35s,
    transform .35s,
    box-shadow .35s;

}

.service-card:hover .service-arrow{

    background:#0D5CAB;

    transform:rotate(45deg);

    box-shadow:
    0 18px 35px rgba(13,92,171,.25);

}

.service-card:hover .service-arrow i{

    color:#fff;

}

/*=========================================
TITLE
=========================================*/

.service-content h3{

    transition:.35s;

}

.service-card:hover h3{

    color:#0D5CAB;

}

/*=========================================
PARAGRAPH
=========================================*/

.service-content p{

    transition:.35s;

}

.service-card:hover p{

    color:#4B5563;

}

/*=========================================
IMAGE
=========================================*/

.service-image{

    transition:.45s;

}

.service-card:hover .service-image{

    transform:translateY(-5px);

}

.service-card:hover .service-image img{

    transform:scale(1.08);

}

/*=========================================
OVERLAY
=========================================*/

.service-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(13,92,171,0),

    rgba(13,92,171,.15)

    );

    opacity:0;

    transition:.45s;

    z-index:2;

}

.service-card:hover .service-image::after{

    opacity:1;

}

/*=========================================
BOTTOM ACCENT
=========================================*/

.service-card::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:

    linear-gradient(

    90deg,

    #0D5CAB,

    #FFB703

    );

    transition:.45s;

}

.service-card:hover::after{

    width:100%;

}

/*=========================================
SHINE EFFECT
=========================================*/

.service-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.service-card .shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-80%;

    width:70%;

    height:250%;

    transform:rotate(25deg);

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );

    transition:1s;

}

.service-card:hover .shine::before{

    left:170%;

}

/*=========================================
BACKGROUND
=========================================*/

.service-card:hover{

    background:

    linear-gradient(

    180deg,

    #ffffff,

    #fbfdff

    );

}

/*=========================================
IMAGE SHADOW
=========================================*/

.service-image{

    box-shadow:

    0 15px 30px rgba(0,0,0,.06);

}

.service-card:hover .service-image{

    box-shadow:

    0 25px 45px rgba(0,0,0,.12);

}

/*=========================================
CURSOR
=========================================*/

.service-card{

    cursor:pointer;

}

/*=========================================
SMOOTH TRANSITIONS
=========================================*/

.service-card,
.service-content,
.service-image,
.service-image img,
.service-arrow,
.service-content h3,
.service-content p{

    transition:all .45s ease;

}

/*=========================================
ANIMATION READY
=========================================*/

.service-card{

    will-change:transform;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

.service-card:hover{

    transform:translateY(-8px);

}

}

@media(max-width:768px){

.service-card{

    border-radius:22px;

}

.service-card::before{

    width:140px;

    height:80px;

}

.service-arrow{

    width:35px;

    height:35px;

    right:12px;

    top:12px;

}

.service-arrow i{

    font-size:16px;

}

}

@media(max-width:480px){

.service-card{

    border-radius:20px;

}

.service-content{

    padding:28px 22px 18px;

}

.service-content h3{

    font-size:21px;

}

.service-content p{

    font-size:15px;

    line-height:1.8;

}

.service-image{

    height:220px;

    margin:0 12px 12px;

}

}























/*==================================================
WORKING PROCESS
PART 2A
Base Layout + Cards + Typography
==================================================*/

/*=========================================
SECTION
=========================================*/

#working-process{

    position:relative;

    background:#0F5563;

    padding:40px 0;

    overflow:hidden;

    z-index:1;

}

/*=========================================
BACKGROUND SHAPES
=========================================*/

.process-bg-circle{

    position:absolute;

    border-radius:50%;

    background:rgba(255,255,255,.03);

    filter:blur(2px);

}

.process-bg-1{

    width:420px;

    height:420px;

    left:-180px;

    top:-120px;

}

.process-bg-2{

    width:520px;

    height:520px;

    right:-250px;

    bottom:-250px;

}

/*=========================================
PLANE
=========================================*/

.process-plane{

    position:absolute;

    left:-60px;

    top:140px;

    width:320px;

    z-index:2;

    pointer-events:none;

}

.process-plane img{

    width:100%;

    display:block;

}

/*=========================================
SHIP
=========================================*/

.process-ship{

    position:absolute;

    top:0;

    right:-20px;

    width:220px;

    z-index:2;

    pointer-events:none;

}

.process-ship img{

    width:100%;

    display:block;

}

/*=========================================
HEADING
=========================================*/

.process-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border:1px solid rgba(255,183,3,.8);

    border-radius:999px;

    color:#FFB703;

    margin-bottom:28px;

    background:rgba(255,255,255,.04);

    backdrop-filter:blur(10px);

}

.process-badge img{

    width:34px;

}

.process-badge span{

    font-size:14px;

    font-weight:600;

}

.process-title{

    font-size:2.6rem;

    line-height:1.2;

    font-weight:700;

    color:#fff;

    margin-bottom:26px;

}

.process-title span{

    display:block;

}

.process-description{

    max-width:760px;

    margin:auto;

    color:rgba(255,255,255,.72);

    font-size:17px;

    line-height:1.9;
      /* text-align: justify; */

}

/*=========================================
GRID
=========================================*/

.process-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:60px;

    position:relative;

}

/*=========================================
CARD
=========================================*/

.process-card{

    position:relative;

    text-align:center;

    padding:20px 25px;

    z-index:2;

}

/*=========================================
ICON
=========================================*/

.process-icon{

    width:110px;

    height:110px;

    margin:0 auto 28px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(255,255,255,.05);

}

.process-icon i{

    font-size:46px;

    color:#FF6B35;

}

/*=========================================
NUMBER
=========================================*/

.process-number{

    position:absolute;

    top:15px;

    right:35px;

    font-size:90px;

    font-weight:800;

    color:rgba(255,255,255,.04);

    line-height:1;

    user-select:none;

}

/*=========================================
TITLE
=========================================*/

.process-card h3{

    color:#fff;

    font-size:1.9rem;

    font-weight:700;

    line-height:1.1;

    margin-bottom:20px;

}

/*=========================================
DESCRIPTION
=========================================*/

.process-card p{

    color:rgba(255,255,255,.70);

    font-size:.95rem;

    line-height:1.6;

    max-width:340px;

    margin:auto;
      /* text-align: justify; */

}

/*=========================================
ACTIVE CARD
=========================================*/

.process-card.active .process-icon{

    background:rgba(255,183,3,.12);

    border-color:rgba(255,183,3,.18);

}

.process-card.active .process-icon i{

    color:#FFB703;

}

/*=========================================
CONNECTOR LINE
=========================================*/

.process-grid::before{

    content:"";

    position:absolute;

    top:55px;

    left:16%;

    width:68%;

    height:2px;

    background:

    linear-gradient(

    90deg,

    rgba(255,255,255,.10),

    rgba(255,183,3,.35),

    rgba(255,255,255,.10)

    );

    z-index:0;

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

.process-title{

    font-size:2.6rem;

}

.process-grid{

    gap:40px;

}

.process-card h3{

    font-size:1.8;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

#working-process{

    padding:40px 0;

}

.process-grid{

    grid-template-columns:1fr;

    gap:70px;

}

.process-grid::before{

    display:none;

}

.process-plane{

    width:220px;

}

.process-ship{

    width:170px;

}

.process-title{

    font-size:2rem;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

#working-process{

    padding:40px 0;

}

.process-title{

    font-size:1.763rem;

}

.process-description{

    font-size:15px;

}

.process-card{

    padding:0;

}

.process-card h3{

    font-size:1.3rem;

}

.process-card p{

    font-size:15px;

    line-height:1.6;

}

.process-icon{

    width:90px;

    height:90px;

}

.process-icon i{

    font-size:36px;

}

.process-number{

    font-size:70px;

    right:15px;

}

.process-plane,

.process-ship{

    display:none;

}

}


/*=========================================
CARD
=========================================*/

.process-card{

    border-radius:28px;

    transition:all .45s ease;

    overflow:hidden;

}

/*=========================================
GLASS HOVER
=========================================*/

.process-card:hover{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(12px);

    transform:translateY(-12px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.18);

}

/*=========================================
TOP BORDER
=========================================*/

.process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #FFB703,
        #0D5CAB
    );

    transition:.45s;

}

.process-card:hover::before{

    width:120px;

}

/*=========================================
BOTTOM GLOW
=========================================*/

.process-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-120px;

    transform:translateX(-50%);

    width:240px;

    height:240px;

    border-radius:50%;

    background:rgba(255,183,3,.08);

    filter:blur(60px);

    opacity:0;

    transition:.45s;

}

.process-card:hover::after{

    opacity:1;

}

/*=========================================
ICON
=========================================*/

.process-icon{

    transition:.45s;

}

.process-card:hover .process-icon{

    transform:translateY(-8px) scale(1.08);

    background:#FFB703;

    border-color:#FFB703;

    box-shadow:

    0 20px 45px rgba(255,183,3,.28);

}

.process-card:hover .process-icon i{

    color:#0E2344;

}

/*=========================================
TITLE
=========================================*/

.process-card h3{

    transition:.35s;

}

.process-card:hover h3{

    color:#FFB703;

}

/*=========================================
TEXT
=========================================*/

.process-card p{

    transition:.35s;

}

.process-card:hover p{

    color:#ffffff;

}

/*=========================================
NUMBER
=========================================*/

.process-number{

    transition:.45s;

}

.process-card:hover .process-number{

    color:rgba(255,183,3,.12);

    transform:scale(1.05);

}

/*=========================================
ICON PULSE
=========================================*/

.process-card:hover .process-icon{

    animation:processPulse 1.8s infinite;

}

@keyframes processPulse{

0%{

    box-shadow:

    0 0 0 0 rgba(255,183,3,.45);

}

70%{

    box-shadow:

    0 0 0 22px rgba(255,183,3,0);

}

100%{

    box-shadow:

    0 0 0 0 rgba(255,183,3,0);

}

}

/*=========================================
CONNECTOR DOTS
=========================================*/

.process-grid::after{

    content:"";

    position:absolute;

    top:48px;

    left:17%;

    width:66%;

    height:18px;

    background:

    radial-gradient(circle,#FFB703 2px,transparent 3px);

    background-size:34px 18px;

    opacity:.45;

    pointer-events:none;

}

/*=========================================
PLANE
=========================================*/

.process-plane{

    animation:planeFloat 8s ease-in-out infinite;

}

@keyframes planeFloat{

0%,100%{

    transform:translateY(0) rotate(-6deg);

}

50%{

    transform:translateY(-18px) rotate(-3deg);

}

}

/*=========================================
SHIP
=========================================*/

.process-ship{

    animation:shipFloat 7s ease-in-out infinite;

}

@keyframes shipFloat{

0%,100%{

    transform:translateY(0);

}

50%{

    transform:translateY(-10px);

}

}

/*=========================================
BADGE
=========================================*/

.process-badge{

    transition:.35s;

}

.process-badge:hover{

    background:#FFB703;

    color:#0E2344;

    transform:translateY(-3px);

}

.process-badge:hover span{

    color:#0E2344;

}

/*=========================================
TITLE ANIMATION READY
=========================================*/

.process-title,
.process-description,
.process-card{

    will-change:transform,opacity;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.process-card:hover{

    transform:translateY(-8px);

}

.process-grid::after{

    display:none;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.process-card{

    padding:30px 20px;

    border-radius:22px;

}

.process-card:hover{

    transform:none;

}

.process-icon{

    width:85px;

    height:85px;

}

.process-card::before{

    height:3px;

}

.process-card:hover::before{

    width:90px;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.process-card{

    padding:24px 18px;

}

.process-card h3{

    font-size:1.3rem;

}

.process-card p{

    font-size:15px;

}

.process-icon{

    width:78px;

    height:78px;

}

.process-icon i{

    font-size:30px;

}

.process-number{

    font-size:58px;

}

}
























/*==================================================
FAQ SECTION
PREMIUM DESIGN
PART A1
Section + Background + Heading + Grid
==================================================*/

/*=========================================
SECTION
=========================================*/

#faq{

    position:relative;

    padding:10px 0;

    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfcfe 55%,
        #f8fafc 100%
    );

    overflow:hidden;

    z-index:1;

}

/*=========================================
BACKGROUND
=========================================*/

#faq::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-260px;

    top:-260px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.07),

        transparent 70%

    );

    z-index:0;

}

#faq::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.10),

        transparent 70%

    );

    z-index:0;

}

/*=========================================
FLOATING SHAPES
=========================================*/

.faq-shape{

    position:absolute;

    border-radius:50%;

    filter:blur(2px);

    pointer-events:none;

    z-index:0;

}

.faq-shape-1{

    width:180px;

    height:180px;

    background:rgba(13,92,171,.05);

    left:12%;

    top:18%;

}

.faq-shape-2{

    width:120px;

    height:120px;

    background:rgba(255,183,3,.10);

    right:10%;

    bottom:18%;

}

/*=========================================
CONTAINER
=========================================*/

#faq .container{

    position:relative;

    z-index:5;

}

/*=========================================
HEADING
=========================================*/

.faq-header{

    max-width:820px;

    margin:0 auto 85px;

    text-align:center;

}

/*=========================================
BADGE
=========================================*/

.faq-badge{

    display:inline-flex;

    align-items:center;

    gap:14px;

    padding:12px 28px;

    background:rgba(255,255,255,.92);

    border:1px solid rgba(255,183,3,.35);

    border-radius:999px;

    backdrop-filter:blur(15px);

    box-shadow:

    0 15px 40px rgba(0,0,0,.05);

    margin-bottom:30px;

    transition:.4s ease;

}

.faq-badge:hover{

    transform:translateY(-4px);

    box-shadow:

    0 25px 55px rgba(0,0,0,.08);

}

.faq-badge img{

    width:40px;

    height:40px;

    object-fit:contain;

}

.faq-badge span{

    color:#FFB703;

    font-size:14px;

    font-weight:700;

    letter-spacing:.6px;

    text-transform:uppercase;

}

/*=========================================
TITLE
=========================================*/

.faq-title{

    font-family:"Poppins",sans-serif;

    font-size:2.7rem;

    font-weight:700;

    line-height:1.1;

    color:#0E2344;

    margin-bottom:24px;

    letter-spacing:-1.2px;

}

.faq-title span{

    color:#0D5CAB;

}

/*=========================================
DESCRIPTION
=========================================*/

.faq-description{

    max-width:720px;

    margin:auto;

    font-size:17px;

    line-height:1.5;

    color:var( --text-color);

}

/*=========================================
GRID
=========================================*/

.faq-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:28px;

    align-items:start;

}

.faq-column{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.faq-title{

    font-size:2.6rem;

}

.faq-grid{

    gap:22px;

}

}

@media(max-width:992px){

#faq{

    padding:15px 0;

}

.faq-header{

    margin-bottom:65px;

}

.faq-title{

    font-size:2rem;

}

.faq-grid{

    grid-template-columns:1fr;

    gap:18px;

}

}

@media(max-width:768px){

#faq{

    padding:10px 0;

}

.faq-title{

    font-size:2rem;

    line-height:1.3;

}

.faq-description{

    font-size:16px;

}

.faq-badge{

    padding:10px 20px;

}

.faq-badge img{

    width:34px;

    height:34px;

}

}

@media(max-width:480px){

#faq{

    padding:10px 0;

}

.faq-title{

    font-size:1.8rem;

}

.faq-description{

    font-size:15px;

}

.faq-header{

    margin-bottom:50px;

}

}

/*==================================================
FAQ ACCORDION
PREMIUM DESIGN
PART A2-1
Glass Cards + Question + Typography
==================================================*/

/*=========================================
COLUMN
=========================================*/

.faq-column{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/*=========================================
FAQ CARD
=========================================*/

.faq-item{

    position:relative;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(18px);

    border:1px solid rgba(13,92,171,.08);

    border-radius:20px;

    overflow:hidden;

    transition:all .45s ease;

    box-shadow:

        0 12px 35px rgba(15,35,68,.05);

}

/*=========================================
LEFT ACCENT BAR
=========================================*/

.faq-item::before{

    content:"";

    position:absolute;

    top:18px;

    left:0;

    width:4px;

    height:0;

    border-radius:20px;

    background:linear-gradient(
        180deg,
        #FFB703,
        #0D5CAB
    );

    transition:.45s ease;

}

/*=========================================
TOP GLOW
=========================================*/

.faq-item::after{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:0;

    height:3px;

    border-radius:20px;

    background:linear-gradient(
        90deg,
        #0D5CAB,
        #FFB703
    );

    transition:.45s ease;

}

/*=========================================
QUESTION BUTTON
=========================================*/

.faq-question{

    position:relative;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:22px;

    padding:10px 30px;

    border:none;

    background:transparent;

    cursor:pointer;

    text-align:left;

    transition:.35s ease;

}

/*=========================================
QUESTION TEXT
=========================================*/

.faq-question span{

    flex:1;

    font-family:"Poppins",sans-serif;

    font-size:16px;

    font-weight:500;

    line-height:1.7;

    color:#111827;

    transition:.35s ease;

}

/*=========================================
ICON CONTAINER
=========================================*/

.faq-question i{

    width:32px;

    height:32px;

    min-width:32px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F8FAFC;

    border:1px solid #E5E7EB;

    color:#0D5CAB;

    font-size:14px;

    transition:all .4s ease;

    box-shadow:

        0 8px 20px rgba(0,0,0,.05);

}

/*=========================================
CARD SHADOW
=========================================*/

.faq-item:hover{

    transform:translateY(-5px);

    box-shadow:

        0 25px 60px rgba(15,35,68,.10);

}

/*=========================================
QUESTION HOVER
=========================================*/

.faq-item:hover .faq-question{

    padding-left:36px;

}

.faq-item:hover .faq-question span{

    color:#0D5CAB;

}

/*=========================================
ICON HOVER
=========================================*/

.faq-item:hover .faq-question i{

    background:#0D5CAB;

    border-color:#0D5CAB;

    color:#fff;

    transform:rotate(90deg);

}

/*=========================================
ACTIVE CARD
=========================================*/

.faq-item.active{

    border-color:rgba(13,92,171,.18);

    box-shadow:

        0 30px 70px rgba(13,92,171,.10);

}

.faq-item.active::before{

    height:70%;

}

.faq-item.active::after{

    width:100%;

}

.faq-item.active .faq-question span{

    color:#0D5CAB;

}

.faq-item.active .faq-question i{

    background:#0D5CAB;

    color:#fff;

    border-color:#0D5CAB;

    transform:rotate(45deg);

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.faq-question{

    padding:22px 24px;

}

.faq-question span{

    font-size:17px;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.faq-item{

    border-radius:16px;

}

.faq-question{

    padding:20px;

    gap:15px;

}

.faq-question span{

    font-size:16px;

    line-height:1.6;

}

.faq-question i{

    width:44px;

    height:44px;

    min-width:44px;

    font-size:15px;

}

.faq-item:hover .faq-question{

    padding-left:20px;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.faq-question{

    padding:18px;

}

.faq-question span{

    font-size:15px;

}

.faq-question i{

    width:40px;

    height:40px;

    min-width:40px;

    font-size:14px;

}

}

/*==================================================
FAQ PREMIUM
PART A2-2
Answer + CTA + Premium Effects
==================================================*/

/*=========================================
ANSWER
=========================================*/

.faq-answer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transition:

        max-height .45s ease,

        opacity .35s ease,

        visibility .35s ease;

}

.faq-answer p{

    position:relative;

    padding:0 30px 28px 30px;

    margin:0;

    color:var( --text-color);

    font-size:15px;

    line-height:1.6;

}

.faq-answer p::before{

    content:"";

    position:absolute;

    left:30px;

    top:-8px;

    width:60px;

    height:2px;

    background:linear-gradient(

        90deg,

        #FFB703,

        #0D5CAB

    );

    border-radius:30px;

}

/*=========================================
ACTIVE ANSWER
=========================================*/

.faq-item.active .faq-answer{

    opacity:1;

    visibility:visible;

}

.faq-item.active{

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #fbfdff

    );

}

/*=========================================
CTA
=========================================*/

.faq-cta{

    position:relative;

    margin-top:90px;

    padding:45px;

    border-radius:28px;

    overflow:hidden;

    background:

    linear-gradient(

        135deg,

        #0E2344,

        #0D5CAB

    );

    text-align:center;

    box-shadow:

        0 35px 80px rgba(14,35,68,.20);

    transition:.45s ease;

}

/*=========================================
CTA GLOW
=========================================*/

.faq-cta::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:

    rgba(255,255,255,.08);

    top:-140px;

    right:-120px;

}

.faq-cta::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

    rgba(255,183,3,.15);

    bottom:-100px;

    left:-80px;

}

/*=========================================
CTA TITLE
=========================================*/

.faq-cta h3{

    position:relative;

    z-index:2;

    color:#fff;

    font-size:24px;

    font-weight:600;

    line-height:1.5;

    margin-bottom:35px;

}

/*=========================================
BUTTONS
=========================================*/

.faq-cta-buttons{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

/*=========================================
BUTTON
=========================================*/

.faq-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:17px 34px;

    border-radius:14px;

    font-weight:600;

    font-size:14px;

    transition:.35s ease;

}

/*=========================================
PRIMARY
=========================================*/

.faq-btn-primary{

    background:#FFB703;

    color:#fff;

    box-shadow:

        0 18px 40px rgba(255,183,3,.25);

}

.faq-btn-primary:hover{

    background:#FB8500;

    transform:translateY(-4px);

}

/*=========================================
OUTLINE
=========================================*/

.faq-btn-outline{

    color:#fff;

    border:2px solid rgba(255,255,255,.22);

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(10px);

}

.faq-btn-outline:hover{

    background:#fff;

    color:#0D5CAB;

}

/*=========================================
ICON
=========================================*/

.faq-btn i{

    transition:.35s;

}

.faq-btn:hover i{

    transform:translateX(5px);

}

/*=========================================
CTA HOVER
=========================================*/

.faq-cta:hover{

    transform:translateY(-8px);

    box-shadow:

        0 45px 90px rgba(14,35,68,.28);

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

.faq-cta{

    padding:45px 35px;

}

.faq-cta h3{

    font-size:28px;

}

}

@media(max-width:768px){

.faq-answer p{

    padding:0 20px 24px;

    font-size:15px;

}

.faq-answer p::before{

    left:20px;

}

.faq-cta{

    padding:35px 25px;

    border-radius:22px;

}

.faq-cta h3{

    font-size:24px;

}

.faq-cta-buttons{

    flex-direction:column;

}

.faq-btn{

    width:100%;

}

}

@media(max-width:480px){

.faq-cta{

    margin-top:60px;

    padding:28px 18px;

}

.faq-cta h3{

    font-size:20px;

}

.faq-btn{

    padding:15px 20px;

    font-size:15px;

}

}





















/*==================================================
TESTIMONIAL SECTION
PART 2A
Layout + Cards + Typography
==================================================*/

/*=========================================
SECTION
=========================================*/

#testimonials{

    position:relative;

    padding:40px 0;

    background:#F8F9FB;

    overflow:hidden;

    z-index:1;

}

/*=========================================
BACKGROUND CIRCLE
=========================================*/

.testimonial-bg-circle{

    position:absolute;

    width:650px;

    height:650px;

    right:-250px;

    top:-250px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.06),

        transparent 70%

    );

    pointer-events:none;

}

/*=========================================
HEADING
=========================================*/

.testimonial-heading{

    position:relative;

    z-index:5;

}

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:11px 26px;

    border-radius:999px;

    background:#fff;

    border:1px solid rgba(13,92,171,.10);

    box-shadow:

    0 12px 30px rgba(0,0,0,.05);

    margin-bottom:28px;

}

.section-badge img{

    width:36px;

    height:36px;

    object-fit:contain;

}

.section-badge span{

    color: rgba(255,183,3);

    font-weight:600;

    font-size:15px;

}





/*=========================================
SWIPER
=========================================*/

.testimonialSwiper{

    overflow:hidden;

    padding:10px 5px;

}

.testimonialSwiper .swiper-slide{

    height:auto;

    display:flex;

    align-items:flex-start;

}

/*=========================================
CARD
=========================================*/

.testimonial-card{

    position:relative;

    width:100%;

    background:#fff;

    border-radius:26px;

    padding:30px;

    border:1px solid #E5E7EB;

    box-shadow:

    0 20px 50px rgba(0,0,0,.05);

}

/*=========================================
QUOTE ICON
=========================================*/

.quote-icon{

    position:absolute;

    top:28px;

    right:28px;

    width:62px;

    height:62px;

    border-radius:50%;

    background:

    linear-gradient(

        135deg,

        #0D5CAB,

        #1F6FD3

    );

    display:flex;

    align-items:center;

    justify-content:center;

}

.quote-icon i{

    color:#fff;

    font-size:22px;

}

/*=========================================
TOP AREA
=========================================*/

.testimonial-top{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:28px;

}

.testimonial-top img{

    width:82px;

    height:82px;

    border-radius:50%;

    object-fit:cover;

    flex-shrink:0;

    border:5px solid #F3F4F6;

}

.testimonial-top h3{

    font-size:24px;

    color:#111827;

    font-weight:700;

    margin-bottom:6px;

}

.testimonial-top span{

    display:block;

    color:#0D5CAB;

    font-size:15px;

    font-weight:600;

    margin-bottom:5px;

}

.testimonial-top small{

    color:var( --text-color);

    font-size:14px;

}

/*=========================================
RATING
=========================================*/

.testimonial-rating{

    display:flex;

    gap:6px;

    margin-bottom:22px;

}

.testimonial-rating i{

    color:#FFB703;

    font-size:17px;

}

/*=========================================
TEXT
=========================================*/

.testimonial-card p{

    color:var( --text-color);

    font-size:17px;

    line-height:2;

}

/*=========================================
BOTTOM
=========================================*/

.testimonial-bottom{

    margin-top:55px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/*=========================================
PAGINATION
=========================================*/

.testimonial-pagination{

    position:relative !important;

    bottom:0 !important;

    width:auto !important;

}

.testimonial-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#CBD5E1;

    opacity:1;

}

.testimonial-pagination .swiper-pagination-bullet-active{

    width:36px;

    border-radius:20px;

    background:#0D5CAB;

}

/*=========================================
NAVIGATION
=========================================*/

.testimonial-navigation{

    display:flex;

    gap:14px;

}

.testimonial-navigation button{

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#0D5CAB;

    cursor:pointer;

    box-shadow:

    0 12px 30px rgba(0,0,0,.08);

}

.testimonial-navigation i{

    font-size:18px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){


.testimonial-card{

    padding:34px;

}

}

@media(max-width:992px){

#testimonials{

    padding:40px 0;

}



}

@media(max-width:768px){

#testimonials{

    padding:40px 0;

}



.section-description{

    font-size:15px;

}

.testimonial-card{

    padding:28px;

}

.quote-icon{

    width:54px;

    height:54px;

}

.quote-icon i{

    font-size:18px;

}

.testimonial-top img{

    width:70px;

    height:70px;

}

.testimonial-top h3{

    font-size:20px;

}

.testimonial-card p{

    font-size:15px;

}

.testimonial-bottom{

    flex-direction:column;

    gap:22px;

}

}

@media(max-width:480px){



.testimonial-card{

    padding:22px;

    border-radius:20px;

}

.testimonial-top{

    align-items:flex-start;

}

.testimonial-top img{

    width:60px;

    height:60px;

}

.quote-icon{

    width:48px;

    height:48px;

    top:18px;

    right:18px;

}

.testimonial-navigation button{

    width:48px;

    height:48px;

}

}

/*==================================================
TESTIMONIAL SECTION
PART 2B
Premium Hover + Glass + Responsive Polish
==================================================*/

/*=========================================
CARD
=========================================*/

.testimonial-card{

    transition:all .45s ease;

    overflow:hidden;

    cursor:pointer;

    isolation:isolate;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.04),

        transparent 45%,

        rgba(255,183,3,.04)

    );

    opacity:0;

    transition:.45s;

    z-index:-1;

}

.testimonial-card:hover{

    transform:translateY(-12px);

    border-color:rgba(13,92,171,.15);

    box-shadow:

    0 35px 80px rgba(0,0,0,.10);

}

.testimonial-card:hover::before{

    opacity:1;

}

/*=========================================
TOP BORDER
=========================================*/

.testimonial-card::after{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:0;

    height:4px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    border-radius:50px;

    transition:.45s;

}

.testimonial-card:hover::after{

    width:100%;

}

/*=========================================
QUOTE ICON
=========================================*/

.quote-icon{

    transition:.45s;

}

.testimonial-card:hover .quote-icon{

    transform:rotate(15deg) scale(1.08);

    box-shadow:

    0 20px 40px rgba(13,92,171,.30);

}

/*=========================================
CLIENT IMAGE
=========================================*/

.testimonial-top img{

    transition:.45s;

}

.testimonial-card:hover .testimonial-top img{

    transform:scale(1.08);

    border-color:#0D5CAB;

}

/*=========================================
NAME
=========================================*/

.testimonial-top h3{

    transition:.35s;

}

.testimonial-card:hover h3{

    color:#0D5CAB;

}

/*=========================================
DESIGNATION
=========================================*/

.testimonial-top span{

    transition:.35s;

}

.testimonial-card:hover span{

    color:#FFB703;

}

/*=========================================
TEXT
=========================================*/

.testimonial-card p{

    transition:.35s;

}

.testimonial-card:hover p{

    color:#374151;

}

/*=========================================
RATING
=========================================*/

.testimonial-rating i{

    transition:.35s;

}

.testimonial-card:hover .testimonial-rating i{

    transform:translateY(-3px);

    color:#FFA500;

}

/*=========================================
BADGE
=========================================*/

.section-badge{

    transition:.35s;

}

.section-badge:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(13,92,171,.12);

}

/*=========================================
BUTTONS
=========================================*/

.testimonial-navigation button{

    transition:.35s;

}

.testimonial-navigation button:hover{

    background:#0D5CAB;

    color:#fff;

    transform:translateY(-4px);

    box-shadow:

    0 18px 35px rgba(13,92,171,.22);

}

/*=========================================
PAGINATION
=========================================*/

.testimonial-pagination .swiper-pagination-bullet{

    transition:.35s;

}

.testimonial-pagination .swiper-pagination-bullet:hover{

    background:#0D5CAB;

}

/*=========================================
SHINE EFFECT
=========================================*/

.testimonial-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.testimonial-card .shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.40),

        transparent

    );

    transition:1s;

}

.testimonial-card:hover .shine::before{

    left:180%;

}

/*=========================================
SUBTLE GLOW
=========================================*/

.testimonial-card:hover{

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #fbfdff

    );

}

/*=========================================
READY FOR GSAP
=========================================*/

.testimonial-card,
.quote-icon,
.testimonial-top img,
.testimonial-navigation button{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.testimonial-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.testimonial-card{

    border-radius:22px;

}

.testimonial-card:hover{

    transform:none;

}

.testimonial-navigation{

    justify-content:center;

    width:100%;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.testimonial-navigation{

    gap:10px;

}

.testimonial-navigation button{

    width:46px;

    height:46px;

}

.section-badge{

    padding:10px 18px;

}

}




















/*==================================================
BLOG SECTION
PART 2A
Layout + Cards + Typography
==================================================*/

/*=========================================
SECTION
=========================================*/

#blog{

    position:relative;

    padding:40px 0;

    background:#FFFFFF;

    overflow:hidden;

    z-index:1;

}

/*=========================================
BACKGROUND SHAPE
=========================================*/

.blog-shape{

    position:absolute;

    width:620px;

    height:620px;

    top:-260px;

    right:-250px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.05),

        transparent 70%

    );

    pointer-events:none;

}

/*=========================================
HEADING
=========================================*/

.blog-heading{

    position:relative;

    z-index:5;

}

.blog-heading .section-title{

    font-size:2.6rem;

    font-weight:700;

    color:#0E2344;

    line-height:1;

    margin-bottom:20px;

}

.blog-heading .section-description{

    max-width:720px;

    margin:auto;

    color:var( --text-color);

    font-size:.95rem;

    line-height:1.6;

}

/*=========================================
GRID
=========================================*/

.blog-wrapper{

    display:grid;

    grid-template-columns:1.35fr .95fr;

    gap:40px;

    align-items:start;

}

/*=========================================
FEATURED BLOG
=========================================*/

.featured-blog{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

}

.featured-image{

    display:block;

    overflow:hidden;

    border-radius:24px;

}

.featured-image img{

    width:100%;

    height:520px;

    object-fit:cover;

    display:block;

}

.featured-content{

    padding-top:28px;

}

/*=========================================
BLOG META
=========================================*/

.blog-meta{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:18px;

}

.blog-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    background:#FFB703;

    color:#fff;

    font-size:13px;

    font-weight:600;

    border-radius:50px;

    text-transform:uppercase;

}

.blog-date{

    color:#9CA3AF;

    font-size:15px;

}

/*=========================================
FEATURED TITLE
=========================================*/

.featured-content h3{

    margin-bottom:18px;

}

.featured-content h3 a{

    color:#0E2344;

    font-size:1.6rem;

    line-height:1.1;

    font-weight:600;

    text-decoration:none;

}

.featured-content p{

    color:var( --text-color);

    font-size:17px;

    line-height:1.6;

    margin-bottom:28px;

}

/*=========================================
READ MORE
=========================================*/

.read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#0D5CAB;

    font-weight:600;

    text-decoration:none;

}

.read-more i{

    font-size:14px;

}

/*=========================================
RIGHT BLOG LIST
=========================================*/

.blog-list{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*=========================================
BLOG ITEM
=========================================*/

.blog-item{

    display:grid;

    grid-template-columns:180px 1fr;

    gap:22px;

    align-items:center;

    padding-bottom:22px;

    border-bottom:1px solid #E5E7EB;

}

.blog-item:last-child{

    border-bottom:none;

    padding-bottom:0;

}

/*=========================================
THUMB
=========================================*/

.blog-thumb{

    display:block;

    overflow:hidden;

    border-radius:22px;

}

.blog-thumb img{

    width:100%;

    height:180px;

    object-fit:cover;

    display:block;

}

/*=========================================
BLOG INFO
=========================================*/

.blog-info h4{

    margin:14px 0 20px;

}

.blog-info h4 a{

    color:#0E2344;

    font-size:1.3rem;

    font-weight:600;

    line-height:1.1;

    text-decoration:none;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.blog-wrapper{

    grid-template-columns:1fr;

}

.featured-image img{

    height:460px;

}

}

@media(max-width:992px){

#blog{

    padding:40px 0;

}

.blog-heading .section-title{

    font-size:2.4rem;

}

.featured-content h3 a{

    font-size:1.4rem;

}

.blog-info h4 a{

    font-size:24px;

}

}



@media(max-width:768px){
    .section-title,  .section-description{

   text-align: left !important;

}
    .section-title {

font-size:1.763rem !important;

}
}







@media(max-width:768px){

#blog{

    padding:40px 0;

}

.blog-heading .section-title{

    font-size:1.563rem;

}

.blog-heading .section-description{

    font-size:.85rem;

}

.featured-image img{

    height:320px;

}

.blog-item{

    grid-template-columns:1fr;

}

.blog-thumb img{

    height:240px;

}

.featured-content h3 a{

    font-size:1.3;

}

.blog-info h4 a{

    font-size:22px;

}

}

@media(max-width:480px){

.blog-heading .section-title{

    font-size:1.9rem;

}

.featured-image img{

    height:250px;

}

.blog-thumb img{

    height:180px;

}

.featured-content h3 a{

    font-size:22px;

}

.blog-info h4 a{

    font-size:19px;

}

.blog-meta{

    flex-wrap:wrap;

    gap:10px;

}

}

/*==================================================
BLOG SECTION
PART 2B
Premium Hover + Glass + Responsive Polish
==================================================*/

/*=========================================
FEATURED CARD
=========================================*/

.featured-blog{

    position:relative;

    transition:.45s ease;

}

.featured-blog:hover{

    transform:translateY(-10px);

}

.featured-blog::after{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:0;

    height:4px;

    background:linear-gradient(90deg,#0D5CAB,#FFB703);

    border-radius:50px;

    transition:.45s;

}

.featured-blog:hover::after{

    width:100%;

}

/*=========================================
IMAGE HOVER
=========================================*/

.featured-image{

    position:relative;

}

.featured-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.18),
        transparent
    );

    opacity:0;

    transition:.4s;

    z-index:1;

}

.featured-image img{

    transition:1s ease;

}

.featured-blog:hover .featured-image img{

    transform:scale(1.08);

}

.featured-blog:hover .featured-image::before{

    opacity:1;

}

/*=========================================
FEATURED TITLE
=========================================*/

.featured-content h3 a{

    transition:.35s;

}

.featured-blog:hover h3 a{

    color:#0D5CAB;

}

/*=========================================
CATEGORY
=========================================*/

.blog-category{

    transition:.35s;

}

.featured-blog:hover .blog-category{

    background:#0D5CAB;

}

/*=========================================
READ MORE
=========================================*/

.read-more{

    transition:.35s;

}

.read-more i{

    transition:.35s;

}

.read-more:hover{

    color:#FFB703;

}

.read-more:hover i{

    transform:translateX(7px);

}

/*=========================================
SIDE BLOG CARD
=========================================*/

.blog-item{

    position:relative;

    transition:.4s ease;

    border-radius:22px;

}

.blog-item:hover{

    transform:translateX(8px);

    background:#fff;

    padding:18px;

    box-shadow:

    0 18px 45px rgba(15,35,68,.08);

}

/*=========================================
LEFT BORDER
=========================================*/

.blog-item::before{

    content:"";

    position:absolute;

    left:0;

    top:22px;

    width:4px;

    height:0;

    background:linear-gradient(
        180deg,
        #0D5CAB,
        #FFB703
    );

    border-radius:50px;

    transition:.4s;

}

.blog-item:hover::before{

    height:70%;

}

/*=========================================
SIDE IMAGE
=========================================*/

.blog-thumb{

    overflow:hidden;

}

.blog-thumb img{

    transition:.8s;

}

.blog-item:hover .blog-thumb img{

    transform:scale(1.08);

}

/*=========================================
SIDE TITLE
=========================================*/

.blog-info h4 a{

    transition:.35s;

}

.blog-item:hover h4 a{

    color:#0D5CAB;

}

/*=========================================
DATE
=========================================*/

.blog-date{

    transition:.35s;

}

.blog-item:hover .blog-date{

    color:#0D5CAB;

}

/*=========================================
BADGE
=========================================*/

.blog-heading .section-badge{

    transition:.35s;

}

.blog-heading .section-badge:hover{

    transform:translateY(-4px);

    box-shadow:

    0 16px 35px rgba(13,92,171,.12);

}

/*=========================================
SHINE EFFECT
=========================================*/

.featured-blog .shine,
.blog-item .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.featured-blog .shine::before,
.blog-item .shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:1s;

}

.featured-blog:hover .shine::before,
.blog-item:hover .shine::before{

    left:180%;

}

/*=========================================
SMOOTH
=========================================*/

.featured-blog,
.blog-item,
.featured-image img,
.blog-thumb img,
.read-more,
.blog-category{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.blog-item:hover{

    transform:none;

    padding:0;

    box-shadow:none;

    background:transparent;

}

.featured-blog:hover{

    transform:translateY(-5px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.featured-blog:hover{

    transform:none;

}

.blog-item{

    border-radius:18px;

}

.blog-item:hover{

    padding:0;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.blog-category{

    font-size:11px;

    padding:7px 14px;

}

.read-more{

    font-size:14px;

}

}
/*=========================================
JS ACTIVE STATE
=========================================*/

.featured-blog.active{

    transform:translateY(-10px);

}

.blog-item.active{

    transform:translateX(8px);

}

.featured-image,
.blog-thumb{

    transition:.4s ease;

}

.read-more i{

    transition:.3s ease;

}

.focused{

    outline:2px solid #0D5CAB;

    outline-offset:4px;

}




































/*==================================================
PRODUCT GALLERY
PART 2A
Layout + Cards + Typography
==================================================*/

/*=========================================
SECTION
=========================================*/

#gallery{

    position:relative;

    padding:40px 0;

    background:#F5FCFD;

    overflow:hidden;

    z-index:1;

}

/*=========================================
BACKGROUND SHAPES
=========================================*/

.gallery-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    z-index:0;

}

.gallery-shape.shape-1{

    width:520px;

    height:520px;

    left:-220px;

    top:-180px;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.05),

        transparent 70%

    );

}

.gallery-shape.shape-2{

    width:420px;

    height:420px;

    right:-180px;

    bottom:-160px;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.08),

        transparent 70%

    );

}

/*=========================================
CONTAINER
=========================================*/

#gallery .container{

    position:relative;

    z-index:2;

}

/*=========================================
HEADING
=========================================*/

.gallery-heading{

    margin-bottom:70px;

}

.gallery-heading .section-title{

    font-size:2.6rem;

    font-weight:700;

    color:#0E2344;

    line-height:1.2;

    margin-bottom:20px;

}

.gallery-heading .section-description{

    max-width:760px;

    margin:0 auto 32px;

    font-size:15px;

    color:var( --text-color);

    line-height:1.6;

}

/*=========================================
CTA BUTTON
=========================================*/

.gallery-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 34px;

    background:#FFB703;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.gallery-btn i{

    font-size:14px;

}

/*=========================================
GRID
=========================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:

        repeat(4,1fr);

    gap:24px;

    align-items:start;

}

/*=========================================
CARD
=========================================*/

.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:32px;

    height:auto;

    background:#ddd;

}

/*=========================================
LARGE CARD
=========================================*/

/* .gallery-card.large-card{

    min-height:680px;

} */

/*=========================================
IMAGE
=========================================*/

.gallery-image{

    display:block;

    width:100%;

    height:100%;

}

.gallery-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/*=========================================
OVERLAY
=========================================*/

.gallery-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:34px;

    background: #ffffff58;


}

/*=========================================
CATEGORY
=========================================*/

.gallery-category{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 18px;

    border-radius:40px;

    /* background:rgba(255,255,255,.18); */

    backdrop-filter:blur(12px);

       background:#FFB703;

    color:#fff;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

/*=========================================
TITLE
=========================================*/

.gallery-overlay h3{

    color:#000000;

    font-size:20px;

    line-height:1.35;

    margin-bottom:16px;

    font-weight:700;
  

}

/*=========================================
DESCRIPTION
=========================================*/

.gallery-overlay p{

    color:rgba(255,255,255,.82);

    font-size:15px;

    line-height:1.8;

}

/*=========================================
ARROW
=========================================*/

.gallery-arrow{

    position:absolute;

    top:22px;

    right:22px;

    width:56px;

    height:56px;

    border-radius:50%;

    background:#fff;

    color:#FFB703;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    box-shadow:

    0 15px 35px rgba(0,0,0,.12);

}

.gallery-arrow i{

    font-size:16px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1400px){

.gallery-grid{

    grid-template-columns:repeat(2,1fr);

}

.gallery-card,

.gallery-card.large-card{

    min-height:600px;

}

}

@media(max-width:992px){

#gallery{

    padding:40px 0;

}

.gallery-heading .section-title{

    font-size:2.4rem;

}

.gallery-grid{

    gap:20px;

}

}

@media(max-width:768px){

#gallery{

    padding:40px 0;

}

.gallery-heading{

    margin-bottom:50px;

}

.gallery-heading .section-title{

    font-size:2.1;

}

.gallery-heading .section-description{

    font-size:15px;

}

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-card,

.gallery-card.large-card{

    min-height:520px;

}

.gallery-overlay{

    padding:28px;

}

.gallery-overlay h3{

    font-size:18px;

}

}

@media(max-width:480px){

.gallery-heading .section-title{

    font-size:1.9rem;

}

.gallery-btn{

    width:100%;

    justify-content:center;

}

.gallery-card,

.gallery-card.large-card{

    min-height:420px;

    border-radius:24px;

}

.gallery-overlay{

    padding:22px;

}

.gallery-overlay h3{

    font-size:17px;

}

.gallery-overlay p{

    font-size:14px;

}

.gallery-arrow{

    width:46px;

    height:46px;

    top:16px;

    right:16px;

}

}
/*==================================================
PRODUCT GALLERY
PART 2B
Premium Hover + Glass + Responsive Polish
==================================================*/

/*=========================================
CARD HOVER
=========================================*/

.gallery-card{

    transition:all .45s ease;

    cursor:pointer;

    isolation:isolate;

}

.gallery-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 35px 80px rgba(15,35,68,.15);

}

/*=========================================
TOP BORDER
=========================================*/

.gallery-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    border-radius:20px;

    transition:.45s;

    z-index:5;

}

.gallery-card:hover::before{

    width:100%;

}

/*=========================================
IMAGE
=========================================*/

.gallery-image{

    overflow:hidden;

}

.gallery-image img{

    transition:1s ease;

}

.gallery-card:hover .gallery-image img{

    transform:scale(1.08);

}

/*=========================================
OVERLAY
=========================================*/

.gallery-overlay{

    transition:.45s ease;

}

.gallery-card:hover .gallery-overlay{

    padding-bottom:42px;


}

/*=========================================
CATEGORY
=========================================*/

.gallery-category{

    transition:.35s;

}

.gallery-card:hover .gallery-category{

    background:#FFB703;

    color:#fff;

}

/*=========================================
TITLE
=========================================*/

.gallery-overlay h3{

    transition:.35s;

}

.gallery-card:hover h3{

    color:#FFB703;

}

/*=========================================
DESCRIPTION
=========================================*/

.gallery-overlay p{

    transition:.35s;

}

.gallery-card:hover p{

    color:#ffffff;

}

/*=========================================
ARROW
=========================================*/

.gallery-arrow{

    transition:.35s;

}

.gallery-card:hover .gallery-arrow{

    background:#FFB703;

    color:#fff;

    transform:rotate(45deg);

}

/*=========================================
BUTTON
=========================================*/

.gallery-btn{

    transition:.35s;

}

.gallery-btn:hover{

    background:#0D5CAB;

    color:#fff;

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(13,92,171,.20);

}

.gallery-btn i{

    transition:.35s;

}

.gallery-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
BADGE
=========================================*/

.gallery-heading .section-badge{

    transition:.35s;

}

.gallery-heading .section-badge:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(13,92,171,.10);

}

/*=========================================
SHINE EFFECT
=========================================*/

.gallery-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.gallery-card .shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.gallery-card:hover .shine::before{

    left:180%;

}

/*=========================================
GLASS EFFECT
=========================================*/



/*=========================================
PERFORMANCE
=========================================*/

.gallery-card,
.gallery-image img,
.gallery-arrow,
.gallery-btn{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.gallery-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.gallery-card:hover{

    transform:none;

    box-shadow:

    0 15px 40px rgba(15,35,68,.08);

}

.gallery-card:hover .gallery-overlay{

    padding-bottom:28px;

}

.gallery-card:hover .gallery-arrow{

    transform:none;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.gallery-category{

    font-size:11px;

    padding:7px 14px;

}

.gallery-arrow{

    width:44px;

    height:44px;

}

.gallery-overlay h3{

    line-height:1.4;

}

.gallery-btn{

    padding:15px 22px;

    font-size:15px;

}

}















/*==================================================
ABOUT COMPANY
PART 2A
Layout + Cards + Product Range
==================================================*/

/*=========================================
SECTION
=========================================*/

#about-company{

    position:relative;

    padding:40px 0;

    background:#fff;

    overflow:hidden;

    z-index:1;

}

/*=========================================
BACKGROUND
=========================================*/

.about-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.about-shape.shape-1{

    width:520px;

    height:520px;

    top:-220px;

    left:-220px;

    background:

    radial-gradient(circle,
    rgba(13,92,171,.05),
    transparent 70%);

}

.about-shape.shape-2{

    width:420px;

    height:420px;

    right:-180px;

    bottom:-180px;

    background:

    radial-gradient(circle,
    rgba(255,183,3,.08),
    transparent 70%);

}

/*=========================================
HEADING
=========================================*/

.about-heading{

    margin-bottom:80px;

}

.about-heading .section-title{

    font-size:2.6rem;

    font-weight:700;

    color:#0E2344;

    line-height:1.1;

    margin-bottom:22px;

}

.about-heading .section-title span{

    display:block;

    color:#0D5CAB;

}

.about-heading .section-description{

    max-width:760px;

    margin:auto;

    font-size:15px;

    color:var( --text-color);

    line-height:1.6;

}

/*=========================================
WRAPPER
=========================================*/

.about-wrapper{

    display:grid;

    grid-template-columns:1.3fr .8fr;

    gap:60px;

    align-items:start;

    margin-bottom:100px;

}

/*=========================================
CONTENT
=========================================*/

.about-content h3{

    font-size:40px;

    color:#111827;

    margin-bottom:24px;

    line-height:1.3;

    font-weight:700;

}

.about-content p{

    font-size:17px;

    line-height:2;

    color:var( --text-color);

    margin-bottom:22px;

}

/*=========================================
LIST
=========================================*/

.about-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:40px 0;

}

.about-list li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#374151;

    font-size:16px;

    line-height:1.7;

}

.about-list i{

    color:#10B981;

    font-size:18px;

    margin-top:3px;

}

/*=========================================
BUTTONS
=========================================*/

.about-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.primary-btn{

    padding:16px 34px;

    border-radius:12px;

    background:#0D5CAB;

    color:#fff;

    text-decoration:none;

    font-weight:600;

}

.secondary-btn{

    padding:16px 34px;

    border-radius:12px;

    border:2px solid #0D5CAB;

    color:#0D5CAB;

    text-decoration:none;

    font-weight:600;

}

/*=========================================
RIGHT
=========================================*/

.about-info{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/*=========================================
INFO CARD
=========================================*/

.info-card{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:22px;

    padding:32px;

    box-shadow:

    0 15px 40px rgba(15,35,68,.05);

}

.info-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#F3F8FF;

    color:#0D5CAB;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:22px;

}

.info-card h4{

    font-size:24px;

    color:#111827;

    margin-bottom:15px;

}

.info-card p{

    font-size:16px;

    line-height:1.9;

    color:var( --text-color);

}

/*=========================================
PRODUCT RANGE
=========================================*/

.product-range{

    padding-top:40px;

    border-top:1px solid #E5E7EB;

}

.range-heading{

    text-align:center;

    margin-bottom:50px;

}

.range-heading h3{

    font-size:42px;

    color:#0E2344;

    margin-bottom:18px;

}

.range-heading p{

    max-width:700px;

    margin:auto;

    color:var( --text-color);

    line-height:1.9;

    font-size:17px;

}

/*=========================================
GRID
=========================================*/

.product-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

/*=========================================
PRODUCT CARD
=========================================*/

.product-card{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:20px;

    padding:35px;

    display:flex;

    align-items:center;

    gap:18px;

    text-decoration:none;

    box-shadow:

    0 10px 30px rgba(0,0,0,.05);

}

.product-card i{

    width:60px;

    height:60px;

    border-radius:16px;

    background:#F3F8FF;

    color:#0D5CAB;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

}

.product-card span{

    font-size:18px;

    font-weight:600;

    color:#111827;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.about-wrapper{

    grid-template-columns:1fr;

}

}

@media(max-width:992px){

#about-company{

    padding:40px 0;

}

.about-heading .section-title{

    font-size:2.4rem;

}

.about-content h3{

    font-size:34px;

}

.product-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

#about-company{

    padding:40px 0;

}

.about-heading .section-title{

    font-size:2rem;

}

.about-content h3{

    font-size:28px;

}

.about-list{

    grid-template-columns:1fr;

}

.product-grid{

    grid-template-columns:1fr;

}

.about-buttons{

    flex-direction:column;

}

.primary-btn,
.secondary-btn{

    width:100%;

    text-align:center;

}

}

@media(max-width:480px){

.about-heading .section-title{

    font-size:1.9rem;

}

.about-content p{

    font-size:15px;

}

.info-card{

    padding:24px;

}

.product-card{

    padding:24px;

}

.range-heading h3{

    font-size:30px;

}

}

/*==================================================
ABOUT COMPANY
PART 2B
Premium Hover + Glass + Polish
==================================================*/

/*=========================================
CONTENT
=========================================*/

.about-content{

    position:relative;

}

.about-content h3{

    transition:.35s ease;

}

.about-content:hover h3{

    color:#0D5CAB;

}

/*=========================================
BUTTONS
=========================================*/

.primary-btn,
.secondary-btn{

    position:relative;

    overflow:hidden;

    transition:.35s ease;

}

.primary-btn::before,
.secondary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.7s;

}

.primary-btn:hover::before,
.secondary-btn:hover::before{

    left:120%;

}

.primary-btn:hover{

    background:#084b8d;

    transform:translateY(-4px);

    box-shadow:

    0 20px 45px rgba(13,92,171,.25);

}

.secondary-btn:hover{

    background:#0D5CAB;

    color:#fff;

    transform:translateY(-4px);

}

/*=========================================
LIST
=========================================*/

.about-list li{

    transition:.35s;

}

.about-list li:hover{

    transform:translateX(8px);

    color:#0D5CAB;

}

.about-list li:hover i{

    color:#FFB703;

}

/*=========================================
INFO CARD
=========================================*/

.info-card{

    position:relative;

    overflow:hidden;

    transition:.4s ease;

}

.info-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:

    linear-gradient(

        180deg,

        #0D5CAB,

        #FFB703

    );

    transition:.4s;

}

.info-card::after{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:3px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.4s;

}

.info-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(15,35,68,.10);

}

.info-card:hover::before{

    height:100%;

}

.info-card:hover::after{

    width:100%;

}

.info-card:hover .info-icon{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-8deg);

}

.info-card:hover h4{

    color:#0D5CAB;

}

.info-icon{

    transition:.35s;

}

.info-card h4{

    transition:.35s;

}

/*=========================================
PRODUCT CARD
=========================================*/

.product-card{

    position:relative;

    overflow:hidden;

    transition:.4s ease;

}

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.04),

        transparent,

        rgba(255,183,3,.05)

    );

    opacity:0;

    transition:.4s;

}

.product-card:hover{

    transform:translateY(-10px);

    border-color:#0D5CAB;

    box-shadow:

    0 25px 60px rgba(15,35,68,.10);

}

.product-card:hover::before{

    opacity:1;

}

.product-card:hover i{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-10deg);

}

.product-card:hover span{

    color:#0D5CAB;

}

.product-card i{

    transition:.35s;

}

.product-card span{

    transition:.35s;

}

/*=========================================
HEADING
=========================================*/

.range-heading h3{

    transition:.35s;

}

.product-range:hover .range-heading h3{

    color:#0D5CAB;

}

/*=========================================
SECTION BADGE
=========================================*/

.about-heading .section-badge{

    transition:.35s;

}

.about-heading .section-badge:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(13,92,171,.12);

}

/*=========================================
SHINE EFFECT
=========================================*/

.info-card .shine,
.product-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.info-card .shine::before,
.product-card .shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.40),

        transparent

    );

    transition:1s;

}

.info-card:hover .shine::before,
.product-card:hover .shine::before{

    left:180%;

}

/*=========================================
READY
=========================================*/

.info-card,
.product-card,
.primary-btn,
.secondary-btn{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.info-card:hover,
.product-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.info-card:hover,
.product-card:hover{

    transform:none;

}

.about-list li:hover{

    transform:none;

}

.primary-btn:hover,
.secondary-btn:hover{

    transform:none;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.product-card{

    gap:15px;

}

.product-card span{

    font-size:16px;

}

.info-icon{

    width:60px;

    height:60px;

    font-size:22px;

}

}






/*==================================================
ACTIVE STATE
==================================================*/

.primary-btn.active{

    transform:translateY(-4px);

}

.secondary-btn.active{

    transform:translateY(-4px);

}

.info-card.active{

    transform:translateY(-10px);

}

.product-card.active{

    transform:translateY(-10px);

}



















































.complete-footer{
      background:#0F5563;
}


/*==================================================
FOOTER TABLE
==================================================*/

.footer-table-wrapper{

    overflow-x:auto;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.12);

}

.footer-table{

    width:100%;

    min-width:1200px;

    border-collapse:collapse;

}

.footer-table th{

    background:#F59E0B;

    color:#fff;

    padding:18px 15px;

    text-align:center;

    font-size:15px;

    font-weight:700;

    white-space:nowrap;

}
.footer-title{
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}
.footer-link i{
    margin-left: 20px;
    font-size: 10px;
    color: #e67538;

}
.footer-table td{

    background:#0F5563;

    color:#fff;

    text-align:center;

    padding:16px 14px;

    border:1px solid rgba(255,255,255,.12);

    font-size:14px;

    transition:.3s;

}

.footer-table tbody tr:hover td{

    background:#126474;

}

.footer-table td:hover{

    background:#17839b;

    color:#fff;

}

/*====================================*/

.footer-table-wrapper::-webkit-scrollbar{

    height:8px;

}

.footer-table-wrapper::-webkit-scrollbar-thumb{

    background:#F59E0B;

    border-radius:20px;

}

/*====================================*/

.footer-cta{

    display:flex;

    justify-content:center;

    margin-top:55px;

}

.footer-cta-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:#F59E0B;

    color:#fff;

    padding:18px 42px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 15px 40px rgba(245,158,11,.25);

}

.footer-cta-btn:hover{

    background:#EA580C;

    transform:translateY(-5px);

}

.footer-cta-btn i{

    transition:.35s;

}

.footer-cta-btn:hover i{

    transform:translateX(6px);

}

@media(max-width:992px){

.footer-table{

    min-width:1100px;

}

}

@media(max-width:768px){

.footer-cta-btn{

    width:100%;

    justify-content:center;

}

}
/*==================================================
FOOTER BOTTOM
==================================================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

    padding:28px 0;

    background:#0b4b58;

}

.footer-bottom-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    flex-wrap:wrap;

}

/*=========================================*/

.footer-copyright{

    color:rgba(255,255,255,.72);

    font-size:15px;

}

.footer-copyright strong{

    color:#fff;

}

/*=========================================*/

.footer-bottom-links{

    display:flex;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

}

.footer-bottom-links a{

    color:rgba(255,255,255,.72);

    transition:.35s;

    position:relative;

}

.footer-bottom-links a:hover{

    color:#F59E0B;

}

.footer-bottom-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#F59E0B;

    transition:.35s;

}

.footer-bottom-links a:hover::after{

    width:100%;

}

/*=========================================*/

.footer-credit{

    color:rgba(255,255,255,.72);

    font-size:15px;

}

.footer-credit a{

    color:#F59E0B;

    font-weight:600;

}

/*==================================================
BACK TO TOP
==================================================*/

#backToTop{

    position:fixed;

    right:30px;

    bottom:30px;

    width:55px;

    height:55px;

    border-radius:50%;

    border:none;

    background:#F59E0B;

    color:#fff;

    font-size:18px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transform:translateY(30px);

    transition:.35s;

    z-index:999;

    box-shadow:

    0 15px 40px rgba(245,158,11,.35);

}

#backToTop.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

#backToTop:hover{

    background:#EA580C;

    transform:translateY(-6px);

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.footer-bottom-wrapper{

    flex-direction:column;

    text-align:center;

}

.footer-bottom-links{

    justify-content:center;

}

}

@media(max-width:576px){

.footer-bottom-links{

    gap:16px;

    flex-direction:column;

}

.footer-credit{

    text-align:center;

}

#backToTop{

    right:20px;

    bottom:20px;

    width:48px;

    height:48px;

}

}






/*==================================================
PRODUCT HERO
PART 2A
LAYOUT + RESPONSIVE
==================================================*/

/*=========================================
SECTION
=========================================*/

.common-product-hero{

    position:relative;

    height:720px;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:#081B32;

}

/*=========================================
BACKGROUND
=========================================*/

.common-product-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:1;

}

.common-product-bg img{

    width:100%;

    height:100%;

    display:block;

    object-fit:fill;

    object-position:center center;

}

/*=========================================
OVERLAY
=========================================*/

.common-product-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        90deg,

        rgba(5,20,35,.92) 0%,

        rgba(5,20,35,.80) 35%,

        rgba(5,20,35,.45) 65%,

        rgba(5,20,35,.15) 100%

    );

}

/*=========================================
SHAPES
=========================================*/

.common-product-circle{

    position:absolute;

    border-radius:50%;

    z-index:2;

    pointer-events:none;

}

.common-circle-one{

    width:480px;

    height:480px;

    top:-220px;

    left:-220px;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.15),

        transparent 72%

    );

}

.common-circle-two{

    width:420px;

    height:420px;

    bottom:-220px;

    right:-150px;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.18),

        transparent 72%

    );

}

/*=========================================
WRAPPER
=========================================*/

.common-product-hero-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

/*=========================================
LEFT
=========================================*/

.common-product-left{

    max-width:760px;

}

/*=========================================
BREADCRUMB
=========================================*/

.common-product-breadcrumb{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:12px;

    list-style:none;

    margin:0 0 30px;

    padding:0;

}

.common-product-breadcrumb li{

    color:rgba(255,255,255,.75);

    font-size:15px;

}

.common-product-breadcrumb a{

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.common-product-breadcrumb a:hover{

    color:#FFB703;

}

/*=========================================
BADGE
=========================================*/

.common-product-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:13px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(16px);

    color:#fff;

    font-size:15px;

    font-weight:600;

    margin-bottom:30px;

}

.common-product-badge i{

    color:#FFB703;

}

/*=========================================
TITLE
=========================================*/

.common-product-title{

    font-size:64px;

    line-height:1.1;

    color:#fff;

    font-weight:700;

    margin-bottom:30px;

}

/*=========================================
DESCRIPTION
=========================================*/

.common-product-description{

    color:rgba(255,255,255,.88);

    font-size:19px;

    line-height:1.9;

    max-width:680px;

    margin-bottom:45px;

}

/*=========================================
BUTTONS
=========================================*/

.common-product-actions{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.common-product-btn,

.common-product-btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

}

.common-product-btn{

    background:#FFB703;

    color:#fff;

}

.common-product-btn-outline{

    border:2px solid rgba(255,255,255,.25);

    color:#fff;

    backdrop-filter:blur(15px);

}

/*=========================================
RIGHT
=========================================*/

.common-product-right{

    display:flex;

    flex-direction:column;

    gap:28px;

    justify-content:center;

    align-items:flex-end;

}

/*=========================================
MAIN CARD
=========================================*/

.common-product-info-card{

    width:100%;

    max-width:430px;

    padding:40px;

    border-radius:30px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.20);

    backdrop-filter:blur(22px);

}

.common-product-info-card span{

    display:inline-block;

    padding:10px 18px;

    border-radius:40px;

    background:#FFB703;

    color:#fff;

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

}

.common-product-info-card h3{

    color:#fff;

    font-size:34px;

    line-height:1.3;

    margin-bottom:25px;

}

.common-product-info-card ul{

    list-style:none;

    padding:0;

    margin:0;

}

.common-product-info-card li{

    display:flex;

    align-items:center;

    gap:12px;

    color:rgba(255,255,255,.90);

    margin-bottom:16px;

    line-height:1.8;

}

.common-product-info-card li i{

    color:#FFB703;

}

/*=========================================
FLOATING CARD
=========================================*/

.common-product-floating-card{

    display:flex;

    align-items:center;

    gap:18px;

    width:320px;

    padding:22px 24px;

    border-radius:22px;

    background:#fff;

    box-shadow:

    0 25px 70px rgba(0,0,0,.12);

}

.common-product-floating-card i{

    width:62px;

    height:62px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#EAF4FF;

    color:#0D5CAB;

    font-size:24px;

}

.common-product-floating-card strong{

    display:block;

    color:#0F172A;

    font-size:20px;

    margin-bottom:6px;

}

.common-product-floating-card span{

   var(--text-color)

    font-size:14px;

    line-height:1.7;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1200px){

.common-product-hero{

    height:650px;

}

.common-product-title{

    font-size:52px;

}

.common-product-hero-wrapper{

    gap:50px;

}

}

@media(max-width:991px){

.common-product-hero{

    height:620px;

}

.common-product-hero-wrapper{

    grid-template-columns:1fr;

}

.common-product-right{

    display:none;

}

.common-product-title{

    font-size:46px;

}

.common-product-description{

    max-width:100%;

}

.common-product-bg img{

    object-position:center;

}

}

@media(max-width:767px){

.common-product-hero{

    height:520px;

}

.common-product-left{

    text-align:center;

    margin:auto;

}

.common-product-breadcrumb{

    justify-content:center;

}

.common-product-actions{

    justify-content:center;

}

.common-product-title{

    font-size:34px;

}

.common-product-description{

    font-size:16px;

    line-height:1.8;

}

.common-product-btn,

.common-product-btn-outline{

    width:100%;

}

.common-product-bg img{

    object-fit:fill;

    background:#081B32;

}

}

@media(max-width:480px){

.common-product-hero{

    height:470px;

}

.common-product-title{

    font-size:28px;

}

.common-product-description{

    font-size:15px;

}

.common-product-badge{

    font-size:13px;

    padding:10px 18px;

}

}












































/*==================================================
PRODUCT OVERVIEW
PART 2A
LAYOUT + RESPONSIVE
==================================================*/

/*=========================================
SECTION
=========================================*/

.product-overview-section{

    position:relative;

    padding:50px 0;

     background:
    linear-gradient(
    180deg,
    #FFFFFF 0%,
    #F8FAFC 100%);

     overflow:hidden; 

}

.product-overview-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    top:-180px;

    right:-180px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(13,92,171,.06),
    transparent 70%);

}

.product-overview-section::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    left:-150px;

    bottom:-150px;

    border-radius:50%;

    background:

    radial-gradient(
    circle,
    rgba(255,183,3,.12),
    transparent 70%);

}

/*=========================================
WRAPPER
=========================================*/

.product-overview-wrapper{
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));

    gap: 40px;
    align-items: flex-start;

    width: 100%;
}

.product-overview-wrapper > *{
    min-width: 0;
}

/*=========================================
LEFT
=========================================*/

.product-overview-left{

    position:relative;

}

/*=========================================
IMAGE
=========================================*/

.product-main-image{

    position:relative;

    /* overflow:hidden; */

    border-radius:35px;
    

}

.product-main-image img{

    width:100%;
    object-fit: fill;
    display:block;

}

/*=========================================
QUALITY CARD
=========================================*/

.product-quality-card{

    position:absolute;

    left:-20px;

    bottom:40px;

    display:flex;

    align-items:center;

    gap:18px;

    width:auto;

    padding:22px;

    border-radius:24px;

    background:#0d5cab8a;

    color:#fff;

 

}

.product-quality-icon{

    width:35px;

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    font-size:17px;

}

.product-quality-card h4{

    font-size:20pxpx;

    margin-bottom:5px;

}

.product-quality-card span{

    font-size:14px;

    opacity:.95;

}

/*=========================================
EXPORT CARD
=========================================*/

.product-export-card{

    position:absolute;

    top:40px;

    right:-20px;

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 24px;

    background:#fff;

    border-radius:20px;

    box-shadow:

    0 18px 45px rgba(0,0,0,.10);

}

.product-export-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#EAF4FF;

    color:#0D5CAB;

    font-size:22px;

}

.product-export-card strong{

    display:block;

    font-size:18px;

    color:#0F172A;

    margin-bottom:4px;

}

.product-export-card p{

    margin:0;

    font-size:14px;

   color:var(--text-color);

}

/*=========================================
RIGHT
=========================================*/

.product-overview-right{

    max-width:680px;

}

.product-small-title{

    display:inline-block;

    margin-bottom:20px;

    color:#F59E0B;

    font-weight:700;

    font-size:14px;

    letter-spacing:1px;

}

.product-overview-right h2{

    font-size:2.5rem;

    line-height:1.1;

    color:#0F172A;

    margin-bottom:28px;
    font-weight: 700;

}

.product-overview-right p{

   color:var(--text-color);

    font-size:16px;

    line-height:1.6;

    margin-bottom:22px;
    text-align: justify;

}

/*=========================================
FEATURES
=========================================*/

.product-feature-list{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:25px;

    margin:40px 0;

}

.product-feature-item{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 5px;

    background:#fff;

    border:1px solid #E5EAF1;

    border-radius:50px;

    font-size:15px;
    font-weight:600;

    color:#000000;

}

.product-feature-item i{

    color:#F59E0B;

}

/*=========================================
STATS
=========================================*/

.product-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

    margin-bottom:40px;

}

.product-stat-box{

    padding:24px;

    text-align:center;

    background:#fff;

    border:1px solid #E5EAF1;

    border-radius:20px;

}

.product-stat-box h3{

    font-size:34px;

    color:#0D5CAB;

    margin-bottom:8px;

}

.product-stat-box span{

   color:var(--text-color);

    font-size:15px;

}

/*=========================================
BUTTONS
=========================================*/

.product-overview-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.product-primary-btn,

.product-secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.product-primary-btn{

    background:#F59E0B;

    color:#fff;

}

.product-secondary-btn{

    border:2px solid #0D5CAB;

    color:#0D5CAB;

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

.product-overview-wrapper{

    gap:60px;

}

.product-overview-right h2{

    font-size:44px;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.product-overview-section{

    padding:50px 0;

}

.product-overview-wrapper{

    grid-template-columns:1fr;

    gap:60px;

}

.product-overview-left{

    /* max-width:650px; */

    margin:auto;

}

.product-overview-right{

    max-width:100%;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){


.product-overview-right{
    order: 1;
}

.product-overview-left{
    order: 2;
}



.product-overview-section{

    padding:50px 0;

}

.product-overview-right{

    text-align:center;

}

.product-overview-right h2{

    font-size:34px;
    text-align: left;

}

.product-feature-list{

    grid-template-columns:repeat(2,1fr);

}

.product-stats{

    grid-template-columns:1fr;

}

.product-overview-buttons{

    justify-content:center;

}

.product-primary-btn,

.product-secondary-btn{

    width:100%;

}

.product-quality-card{

    position:relative;

    width:100%;

    left:0;

    bottom:0;

    margin-top:20px;

}

.product-export-card{

    position:relative;

    top:0;

    right:0;

    width:100%;

    margin-top:20px;

}
.product-overview-right p{
    text-align: justify;
}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.product-overview-right h2{

    font-size:28px;

}

.product-overview-right p{

    font-size:15px;

}

.product-main-image{

    border-radius:20px;

}

.product-feature-item{

    padding:14px 16px;

    border-radius:16px;

}

.product-quality-card{

    padding:18px;

}

.product-quality-card h4{

    font-size:28px;

}

.product-stat-box{

    padding:20px;

}

.product-stat-box h3{

    font-size:28px;

}

}

/*==================================================
PRODUCT OVERVIEW
PART 2B
PREMIUM STYLING
==================================================*/

/*=========================================
IMAGE
=========================================*/

.product-main-image{

    transition:.45s ease;



}

.product-main-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.03),

        transparent,

        rgba(245,158,11,.06)

    );

    z-index:2;

    pointer-events:none;

}

.product-main-image::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-100%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

    z-index:3;

}

.product-main-image:hover{

    transform:

    translateY(-10px)

    rotate(-1deg);

}

.product-main-image:hover img{

    transform:scale(1.06);

}

.product-main-image:hover::after{

    left:180%;

}

/*=========================================
QUALITY CARD
=========================================*/

.product-quality-card{

    overflow:hidden;

    transition:.4s;

}

.product-quality-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:#FFB703;

    transition:.4s;

}

.product-quality-card:hover{

    transform:

    translateY(-8px)

    translateX(8px);

}

.product-quality-card:hover::before{

    height:100%;

}

.product-quality-icon{

    transition:.35s;

}

.product-quality-card:hover

.product-quality-icon{

    background:#FFB703;

    transform:

    rotate(-8deg)

    scale(1.08);

}

/*=========================================
EXPORT CARD
=========================================*/

.product-export-card{

    transition:.4s;

}

.product-export-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.product-export-card:hover{

    transform:

    translateY(-8px);

}

.product-export-card:hover::before{

    width:100%;

}

.product-export-icon{

    transition:.35s;

}

.product-export-card:hover

.product-export-icon{

    background:#0D5CAB;

    color:#fff;

    transform:

    rotate(-8deg)

    scale(1.08);

}

/*=========================================
TITLE
=========================================*/

.product-small-title{

    position:relative;

}

.product-small-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:60px;

    height:3px;

    border-radius:10px;

    background:#FFB703;

}

/*=========================================
FEATURES
=========================================*/

.product-feature-item{

    transition:.35s;

    cursor:default;

}

.product-feature-item:hover{

    transform:translateX(8px);

    border-color:#0D5CAB;

    box-shadow:

    0 15px 35px rgba(13,92,171,.08);

}

.product-feature-item i{

    transition:.35s;

}

.product-feature-item:hover i{

    color:#0D5CAB;

    transform:scale(1.2);

}

/*=========================================
STATS
=========================================*/

.product-stat-box{

    transition:.35s;

}

.product-stat-box:hover{

    transform:translateY(-10px);

    border-color:#0D5CAB;

    box-shadow:

    0 20px 45px rgba(15,35,68,.08);

}

.product-stat-box h3{

    transition:.35s;

}

.product-stat-box:hover h3{

    color:#FFB703;

}

/*=========================================
BUTTONS
=========================================*/

.product-primary-btn,

.product-secondary-btn{

    position:relative;

    overflow:hidden;

}

.product-primary-btn::before,

.product-secondary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.product-primary-btn:hover::before,

.product-secondary-btn:hover::before{

    left:120%;

}

.product-primary-btn:hover{

    background:#E98C00;

    transform:translateY(-4px);

    box-shadow:

    0 20px 45px rgba(245,158,11,.30);

}

.product-secondary-btn:hover{

    background:#0D5CAB;

    color:#fff;

    transform:translateY(-4px);

}

.product-primary-btn i,

.product-secondary-btn i{

    transition:.35s;

}

.product-primary-btn:hover i,

.product-secondary-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
FLOATING
=========================================*/

.product-quality-card{

    animation:qualityFloat 5s ease-in-out infinite;

}

.product-export-card{

    animation:exportFloat 6s ease-in-out infinite;

}

@keyframes qualityFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes exportFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

}

/*=========================================
GSAP INITIAL STATE
=========================================*/

.product-overview-left,

.product-overview-right,

.product-feature-item,

.product-stat-box,

.product-quality-card,

.product-export-card{

    opacity:0;

}

.product-overview-left{

    transform:translateX(-120px);

}

.product-overview-right{

    transform:translateX(120px);

}

.product-feature-item{

    transform:translateY(40px);

}

.product-stat-box{

    transform:translateY(50px);

}

.product-quality-card{

    transform:translateY(80px);

}

.product-export-card{

    transform:translateY(-80px);

}

/*=========================================
READY
=========================================*/

.product-main-image,

.product-feature-item,

.product-stat-box,

.product-primary-btn,

.product-secondary-btn,

.product-quality-card,

.product-export-card{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.product-main-image:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.product-main-image:hover,

.product-feature-item:hover,

.product-stat-box:hover,

.product-primary-btn:hover,

.product-secondary-btn:hover,

.product-quality-card:hover,

.product-export-card:hover{

    transform:none;

}

.product-small-title::after{

    left:50%;

    transform:translateX(-50%);
    /* text-align: left; */

}

.product-quality-card,

.product-export-card{

    animation:none;

}

}








































/*=========================================
POPULAR PRODUCTS
=========================================*/

.common-product-list-section{

    padding:40px 0;
    margin: auto;
    background:#fff;
    /* border: 2px solid red; */

}

.common-product-list-heading{

    text-align:center;

    margin-bottom:60px;

}

.common-product-list-badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:#FFF5E5;

    color:#F59E0B;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.common-product-list-heading h2{

    font-size:2.5rem;
    font-weight: 700;

    color:#0F172A;

}

.common-product-list-grid{

    display:grid;

    grid-template-columns:repeat(6,1fr);

    gap:35px 25px;

    /* border: 2px solid red;
    margin: auto; */

}

.common-product-list-card{

    text-align:center;

}

.common-product-list-image{

    width:220px;

    height:190px;

    margin:auto;

    border-radius:20px;

    overflow:hidden;

    background:#fff;

    border:.1px solid #eac3c3;

    box-shadow:

    0 12px 35px rgba(15,35,68,.08);

    transition:.35s;

}

.common-product-list-image img{

    width:100%;

    height:100%;

    object-fit:fill;

    transition:.4s;

}

.common-product-list-card:hover .common-product-list-image{

    transform:translateY(-8px);

    box-shadow:

    0 20px 50px rgba(13,92,171,.15);

}

.common-product-list-card:hover img{

    transform:scale(1.08);

}

.common-product-list-card h4{

    margin-top:18px;

    font-size:19px;

    color:#0F172A;

    line-height:1.4;
    font-weight: 700;

}

/*============================
Laptop
============================*/

@media(max-width:1200px){

.common-product-list-grid{

    grid-template-columns:repeat(4,1fr);

}

}

/*============================
Tablet
============================*/

@media(max-width:991px){

.common-product-list-grid{

    grid-template-columns:repeat(3,1fr);

}

.common-product-list-image{

    width:145px;

    height:145px;

}

}

/*============================
Mobile
============================*/

@media(max-width:767px){

.common-product-list-section{

    padding:40px 0;

}

.common-product-list-heading h2{

    font-size:1.8rem;

}

.common-product-list-grid{

    grid-template-columns:repeat(2,1fr);

    gap:30px 18px;

}

.common-product-list-image{

    width:130px;

    height:130px;

}

.common-product-list-card h4{

    font-size:16px;

}

}

/*============================
Small Mobile
============================*/

@media(max-width:480px){

.common-product-list-grid{

    gap:25px 15px;

}

.common-product-list-image{

    width:105px;

    height:105px;

    border-width:4px;

}

.common-product-list-card h4{

    font-size:14px;

}

}

/*==================================================
EXPORT PROCESS
PART 2A
LAYOUT + RESPONSIVE CSS
==================================================*/

/*=========================================
SECTION
=========================================*/

.common-export-process-section{

    position:relative;

    padding:50px 0;

    background:#fff;

    overflow:hidden;

}

.common-export-process-section::before{

    content:"";

    position:absolute;

    left:-180px;

    top:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.05),

        transparent 70%

    );

}

.common-export-process-section::after{

    content:"";

    position:absolute;

    right:-180px;

    bottom:-180px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.10),

        transparent 70%

    );

}

/*=========================================
HEADING
=========================================*/

.common-export-process-heading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

/*=========================================
WRAPPER
=========================================*/

.common-export-process-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:20px;

    align-items:flex-start;

}

/*=========================================
TIMELINE
=========================================*/

.common-export-process-line{

    position:absolute;

    left:7%;

    right:7%;

    top:52px;

    height:3px;

    background:

    repeating-linear-gradient(

        to right,

        #BFD5EC 0,

        #BFD5EC 10px,

        transparent 10px,

        transparent 18px

    );

    z-index:0;

}

/*=========================================
CARD
=========================================*/

.common-export-process-card{

    position:relative;

    z-index:2;

    text-align:center;
    padding: 10px 0;

}

/*=========================================
ICON
=========================================*/

.common-export-process-icon{

    width:95px;

    height:95px;

    margin:0 auto 18px;

    border-radius:50%;

    background:#fff;

    border:3px solid #E6EEF7;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    color:#0D5CAB;

    box-shadow:

    0 10px 30px rgba(15,35,68,.08);

}

/*=========================================
NUMBER
=========================================*/

.common-export-process-number{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:32px;

    height:32px;

    border-radius:50%;

    background:#FF9800;

    color:#fff;

    font-size:14px;

    font-weight:700;

    margin-bottom:16px;

}

/*=========================================
TITLE
=========================================*/

.common-export-process-card h3{

    font-size:20px;

    color:#0F172A;

    margin-bottom:7px;

    font-weight:700;

}

/*=========================================
TEXT
=========================================*/

.common-export-process-card p{

   color:var(--text-color);

    line-height:1.2;

    font-size:13px;

    max-width:170px;

    margin:auto;

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

.common-export-process-wrapper{

    grid-template-columns:repeat(4,1fr);

    gap:40px 25px;

}

.common-export-process-line{

    display:none;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.common-export-process-section{

    padding:90px 0;

}

.common-export-process-wrapper{

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.common-export-process-card{

    padding:25px;

    border-radius:20px;

    background:#fff;

    border:1px solid #EEF3F8;

}

.common-export-process-icon{

    width:82px;

    height:82px;

    font-size:30px;

}

.common-export-process-card h3{

    font-size:20px;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-export-process-section{

    padding:70px 0;

}

.common-export-process-heading{

    margin-bottom:55px;

}

.common-export-process-wrapper{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.common-export-process-card{

    position:relative;

    display:flex;

    align-items:flex-start;

    text-align:left;

    gap:20px;

    padding:25px;

    border-radius:22px;

    border:1px solid #EEF3F8;

    background:#fff;

}

.common-export-process-icon{

    width:72px;

    height:72px;

    margin:0;

    flex-shrink:0;

    font-size:26px;

}

.common-export-process-number{

    position:absolute;

    right:10px;

    top:-5px;
    display: none;

}

.common-export-process-card h3{

    font-size:20px;

    margin-bottom:8px;

}

.common-export-process-card p{

    margin:0;
   
    max-width:100%;

    font-size:15px;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.common-export-process-card{

    padding:20px;

    gap:16px;

}

.common-export-process-icon{

    width:60px;

    height:60px;

    font-size:22px;

}

.common-export-process-card h3{

    font-size:18px;

}

.common-export-process-card p{

    font-size:14px;

}

.common-export-process-number{

    width:28px;

    height:28px;

    font-size:12px;

    left:48px;

}

}

/*==================================================
EXPORT PROCESS
PART 2B
ULTRA PREMIUM STYLING
==================================================*/

/*=========================================
CARD
=========================================*/

.common-export-process-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    transition:.45s ease;

}

.common-export-process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.common-export-process-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.03),

        rgba(255,183,3,.05)

    );

    opacity:0;

    transition:.35s;

    z-index:-1;

}

.common-export-process-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 80px rgba(15,35,68,.12);

}

.common-export-process-card:hover::before{

    width:100%;

}

.common-export-process-card:hover::after{

    opacity:1;

}

/*=========================================
SHINE EFFECT
=========================================*/

.common-export-process-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.common-export-process-shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-100%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:1s;

}

.common-export-process-card:hover

.common-export-process-shine::before{

    left:180%;

}

/*=========================================
ICON
=========================================*/

.common-export-process-icon{

    position:relative;

    transition:.4s;

}

.common-export-process-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:2px dashed rgba(13,92,171,.18);

    transition:.5s;

}

.common-export-process-card:hover

.common-export-process-icon{

    background:#0D5CAB;

    color:#fff;

    border-color:#0D5CAB;

    transform:

    rotate(-10deg)

    scale(1.08);

}

.common-export-process-card:hover

.common-export-process-icon::before{

    transform:rotate(180deg);

    border-color:rgba(255,183,3,.55);

}

/*=========================================
NUMBER
=========================================*/

.common-export-process-number{

    position:relative;

    z-index:5;

    transition:.35s;

}

.common-export-process-card:hover

.common-export-process-number{

    background:#0D5CAB;

    transform:scale(1.15);

}

/*=========================================
TITLE
=========================================*/

.common-export-process-card h3{

    transition:.35s;

}

.common-export-process-card:hover h3{

    color:#0D5CAB;

}

/*=========================================
TEXT
=========================================*/

.common-export-process-card p{

    transition:.35s;

}

.common-export-process-card:hover p{

    color:#475569;

}

/*=========================================
TIMELINE
=========================================*/

.common-export-process-line{

    overflow:hidden;

}

.common-export-process-line::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:100%;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    border-radius:20px;

}

/*=========================================
HEADING
=========================================*/

.common-export-process-heading{

    position:relative;

}

.common-export-process-heading::after{

    content:"";

    position:absolute;

    width:90px;

    height:4px;

    left:50%;

    bottom:-25px;

    transform:translateX(-50%);

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

}

/*=========================================
CARD GLOW
=========================================*/

.common-export-process-card:hover{

    background:

    linear-gradient(

        180deg,

        #ffffff,

        #fbfdff

    );

}

/*=========================================
READY
=========================================*/

.common-export-process-card,

.common-export-process-icon,

.common-export-process-number{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.common-export-process-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-export-process-card:hover{

    transform:none;

}

.common-export-process-card:hover

.common-export-process-icon{

    transform:scale(1.05);

}

}






























































/*==================================================
COMMON CONTACT SECTION
PART 2A
Layout + Responsive
==================================================*/

/*=========================================
SECTION
=========================================*/

.common-contact-section{

    position:relative;

    padding:40px 0;

    background:#F8F9FB;

    overflow:hidden;

}

.common-contact-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.common-contact-shape-one{

    width:450px;

    height:450px;

    top:-180px;

    right:-180px;

    background:

    radial-gradient(circle,

    rgba(13,92,171,.08),

    transparent 70%);

}

.common-contact-shape-two{

    width:350px;

    height:350px;

    left:-150px;

    bottom:-150px;

    background:

    radial-gradient(circle,

    rgba(255,183,3,.12),

    transparent 70%);

}

/*=========================================
HEADING
=========================================*/

.common-contact-heading{

    max-width:820px;

    margin:auto;

    text-align:center;

    margin-bottom:20px;

}

.common-contact-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:50px;

    background:#fff;

    border:1px solid rgba(13,92,171,.12);

    margin-bottom:25px;

    box-shadow:

    0 10px 30px rgba(15,35,68,.05);

}

.common-contact-badge img{

    width:22px;

}

.common-contact-badge span{

    color:#0D5CAB;

    font-weight:600;

}

.common-contact-title{

    font-size:2.7rem;

    line-height:1.1;

    color:#0E2344;

    margin-bottom:12px;
    font-weight: 600;

}

.common-contact-description{

    color:var( --text-color);

    line-height:1.5;

    font-size:17px;

     margin-bottom:32px;

}

/*=========================================
WRAPPER
=========================================*/

.common-contact-wrapper{

    display:grid;

    grid-template-columns:1.4fr .8fr;

    gap:40px;

    align-items:start;

}

/*=========================================
FORM BOX
=========================================*/

.common-contact-form-box{

    background:#fff;

    border-radius:28px;

    padding:45px;

    border:1px solid #EEF2F7;

    box-shadow:

    0 25px 60px rgba(15,35,68,.06);

}

.common-contact-form-header{

    margin-bottom:35px;

}

.common-contact-form-header span{

    display:inline-block;

    color:#FF9800;

    font-weight:600;

    margin-bottom:12px;

}

.common-contact-form-header h3{

    font-size:34px;

    color:#0E2344;

    margin-bottom:15px;

}

.common-contact-form-header p{

    color:var( --text-color);

    line-height:1.8;

}

/*=========================================
FORM GRID
=========================================*/

.common-contact-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.common-contact-full{

    grid-column:1/-1;

}

/*=========================================
FIELDS
=========================================*/

.common-contact-field{

    display:flex;

    flex-direction:column;

}

.common-contact-field label{

    font-size:15px;

    font-weight:600;

    color:#0E2344;

    margin-bottom:10px;

}

.common-contact-field input,

.common-contact-field textarea,

.common-contact-field select{

    width:100%;

    padding:16px 18px;

    border-radius:14px;

    border:1px solid #DCE4EC;

    background:#FAFCFD;

    font-size:15px;

    outline:none;

    transition:.35s;

    font-family:inherit;

}

.common-contact-field textarea{

    resize:vertical;

    min-height:170px;

}

/*=========================================
BUTTON
=========================================*/

.common-contact-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    margin-top:30px;

    padding:18px 38px;

    border:none;

    border-radius:50px;

    background:#0D5CAB;

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}

/*=========================================
SIDEBAR
=========================================*/

.common-contact-sidebar{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*=========================================
CARD
=========================================*/

.common-contact-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:24px;

    background:#fff;

    border-radius:22px;

    border:1px solid #EEF2F7;

    text-decoration:none;

    box-shadow:

    0 15px 40px rgba(15,35,68,.05);

}

.common-contact-card-icon{

    width:62px;

    height:62px;

    border-radius:18px;

    background:#F3F8FF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0D5CAB;

    font-size:22px;

    flex-shrink:0;

}

.common-contact-card-content h4{

    color:#0E2344;

    font-size:20px;

    margin-bottom:6px;

}

.common-contact-card-content p,

.common-contact-card-content span{

    color:var( --text-color);

    line-height:1.7;

}

/*=========================================
BUSINESS HOURS
=========================================*/

.common-contact-hours{

    background:#fff;

    border-radius:22px;

    padding:30px;

    border:1px solid #EEF2F7;

    box-shadow:

    0 15px 40px rgba(15,35,68,.05);

}

.common-contact-hours h4{

    color:#0E2344;

    margin-bottom:20px;

    font-size:24px;

}

.common-contact-hours ul{

    list-style:none;

}

.common-contact-hours li{

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:14px 0;

    border-bottom:1px solid #EEF2F7;

}

.common-contact-hours li:last-child{

    border:none;

}

.common-contact-hours span{

    color:var( --text-color);

}

.common-contact-hours strong{

    color:#0E2344;

}

/*=========================================
MAP BUTTON
=========================================*/

.common-contact-map-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px;

    border-radius:18px;

    background:#FFB703;

    color:#fff;

    text-decoration:none;

    font-weight:600;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.common-contact-wrapper{

    grid-template-columns:1fr;

}

}

@media(max-width:992px){

.common-contact-section{

    padding:40px 0;

}

.common-contact-title{

    font-size:2.4rem;

}

.common-contact-form-box{

    padding:35px;

}

}

@media(max-width:768px){

.common-contact-title{

    font-size:2rem;

}

.common-contact-grid{

    grid-template-columns:1fr;

}

.common-contact-full{

    grid-column:auto;

}

.common-contact-form-box{

    padding:28px;

}

.common-contact-btn{

    width:100%;

}

.common-contact-hours li{

    flex-direction:column;

    gap:5px;

}

}

@media(max-width:480px){

.common-contact-section{

    padding:40px 0;

}

.common-contact-title{

    font-size:1.9rem;

}

.common-contact-description{

    font-size:15px;

}

.common-contact-form-header h3{

    font-size:28px;

}

.common-contact-card{

    padding:20px;

}

.common-contact-card-icon{

    width:55px;

    height:55px;

    font-size:18px;

}

.common-contact-hours{

    padding:24px;

}

}
/*==================================================
COMMON CONTACT SECTION
PART 2B
Premium Effects + Glass UI + Hover
==================================================*/

/*=========================================
FORM BOX
=========================================*/

.common-contact-form-box{

    position:relative;

    overflow:hidden;

    transition:.45s ease;

}

.common-contact-form-box::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.common-contact-form-box:hover{

    transform:translateY(-8px);

    box-shadow:

    0 35px 80px rgba(15,35,68,.08);

}

.common-contact-form-box:hover::before{

    width:100%;

}

/*=========================================
FORM FIELDS
=========================================*/

.common-contact-field input,

.common-contact-field textarea,

.common-contact-field select{

    transition:.35s;

}

.common-contact-field input:focus,

.common-contact-field textarea:focus,

.common-contact-field select:focus{

    background:#fff;

    border-color:#0D5CAB;

    box-shadow:

    0 0 0 4px rgba(13,92,171,.08);

}

.common-contact-field input::placeholder,

.common-contact-field textarea::placeholder{

    color:#94A3B8;

}

/*=========================================
BUTTON
=========================================*/

.common-contact-btn{

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.common-contact-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.common-contact-btn:hover{

    background:#084C91;

    transform:translateY(-4px);

    box-shadow:

    0 20px 45px rgba(13,92,171,.25);

}

.common-contact-btn:hover::before{

    left:120%;

}

.common-contact-btn i{

    transition:.35s;

}

.common-contact-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
CONTACT CARD
=========================================*/

.common-contact-card{

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.common-contact-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:

    linear-gradient(

        180deg,

        #0D5CAB,

        #FFB703

    );

    transition:.4s;

}

.common-contact-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 25px 60px rgba(15,35,68,.08);

}

.common-contact-card:hover::before{

    height:100%;

}

.common-contact-card:hover .common-contact-card-icon{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-10deg);

}

.common-contact-card-icon{

    transition:.35s;

}

.common-contact-card-content h4{

    transition:.35s;

}

.common-contact-card:hover h4{

    color:#0D5CAB;

}

.common-contact-card:hover span,

.common-contact-card:hover p{

    color:#334155;

}

/*=========================================
BUSINESS HOURS
=========================================*/

.common-contact-hours{

    transition:.4s;

}

.common-contact-hours:hover{

    transform:translateY(-8px);

    box-shadow:

    0 25px 60px rgba(15,35,68,.08);

}

.common-contact-hours li{

    transition:.3s;

}

.common-contact-hours li:hover{

    padding-left:8px;

}

/*=========================================
MAP BUTTON
=========================================*/

.common-contact-map-btn{

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.common-contact-map-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.common-contact-map-btn:hover{

    background:#0D5CAB;

    transform:translateY(-4px);

    box-shadow:

    0 20px 45px rgba(13,92,171,.22);

}

.common-contact-map-btn:hover::before{

    left:120%;

}

/*=========================================
BADGE
=========================================*/

.common-contact-badge{

    transition:.35s;

}

.common-contact-badge:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(13,92,171,.12);

}

/*=========================================
SHINE EFFECT
=========================================*/

.common-contact-form-box .common-shine,

.common-contact-card .common-shine,

.common-contact-hours .common-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.common-contact-form-box .common-shine::before,

.common-contact-card .common-shine::before,

.common-contact-hours .common-shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.common-contact-form-box:hover .common-shine::before,

.common-contact-card:hover .common-shine::before,

.common-contact-hours:hover .common-shine::before{

    left:180%;

}

/*=========================================
READY
=========================================*/

.common-contact-form-box,

.common-contact-card,

.common-contact-hours,

.common-contact-btn,

.common-contact-map-btn{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.common-contact-form-box:hover,

.common-contact-card:hover,

.common-contact-hours:hover{

    transform:translateY(-5px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.common-contact-form-box:hover,

.common-contact-card:hover,

.common-contact-hours:hover,

.common-contact-btn:hover,

.common-contact-map-btn:hover{

    transform:none;

}

.common-contact-hours li:hover{

    padding-left:0;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.common-contact-btn,

.common-contact-map-btn{

    font-size:15px;

}

.common-contact-card-icon{

    border-radius:14px;

}

}






/*==================================================
COMMON CONTACT JS SUPPORT
==================================================*/

.common-contact-field.active label{

    color:#0D5CAB;

}

.common-contact-field.active input,

.common-contact-field.active textarea,

.common-contact-field.active select{

    border-color:#0D5CAB;

    box-shadow:

    0 0 0 4px rgba(13,92,171,.08);

}

.common-contact-card.active{

    transform:translateY(-8px);

}

.common-contact-hours.active{

    transform:translateY(-8px);

}

.common-contact-btn{

    position:relative;

    overflow:hidden;

}

.common-contact-map-btn{

    position:relative;

    overflow:hidden;

}

.common-contact-ripple{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    transform:translate(-50%,-50%) scale(0);

    animation:commonContactRipple .6s linear;

    pointer-events:none;

}

@keyframes commonContactRipple{

    to{

        transform:

        translate(-50%,-50%)

        scale(26);

        opacity:0;

    }

}

@media(max-width:768px){

.common-contact-card.active,

.common-contact-hours.active{

    transform:none;

}

}









/*==================================================
PRIVACY POLICY PAGE
PART 2A
Layout + Responsive
==================================================*/

/*=========================================
SECTION
=========================================*/

.privacy-policy-section{

    padding:40px 0;

    background:#F8F9FB;

}

/*=========================================
CONTAINER
=========================================*/

.privacy-wrapper{

    background:#fff;

    padding:60px;

    border-radius:20px;

    border:1px solid #E5E7EB;

}

/*=========================================
BREADCRUMB
=========================================*/

.privacy-breadcrumb{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:40px;

    font-size:15px;

    color:var( --text-color);

}

.privacy-breadcrumb a{

    color:#0D5CAB;

    text-decoration:none;

    font-weight:500;

}

.privacy-breadcrumb span:last-child{

    color:#0F172A;

}

/*=========================================
HEADING
=========================================*/

.privacy-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 60px;

}

.privacy-badge{

    display:inline-block;

    padding:10px 22px;

    background:#EAF4FF;

    color:#0D5CAB;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:18px;

}

.privacy-heading h1{

    font-size:48px;

    color:#0F172A;

    margin-bottom:20px;

    line-height:1.2;

}

.privacy-heading p{

    color:var( --text-color);

    font-size:17px;

    line-height:1.9;

}

.privacy-update{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:25px;

    padding:12px 22px;

    border-radius:12px;

    background:#F1F5F9;

    color:#334155;

    font-size:15px;

}

/*=========================================
CONTENT BLOCK
=========================================*/

.privacy-block{

    padding:35px 0;

    border-bottom:1px solid #E5E7EB;

}

.privacy-block:last-child{

    border-bottom:none;

}

.privacy-block h2{

    font-size:30px;

    color:#0F172A;

    margin-bottom:18px;

    line-height:1.3;

}

.privacy-block p{

    font-size:16px;

    color:#475569;

    line-height:2;

    margin-bottom:18px;

}

/*=========================================
LIST
=========================================*/

.privacy-block ul{

    padding-left:22px;

}

.privacy-block li{

    color:#475569;

    margin-bottom:12px;

    line-height:1.8;

}

/*=========================================
CONTACT BOX
=========================================*/

.privacy-contact-box{

    margin-top:30px;

    padding:30px;

    border-radius:16px;

    background:#F8FAFC;

    border:1px solid #E2E8F0;

}

.privacy-contact-box h4{

    font-size:26px;

    color:#0F172A;

    margin-bottom:15px;

}

.privacy-contact-box p{

    margin-bottom:10px;

}

.privacy-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    padding:15px 30px;

    background:#0D5CAB;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    transition:.3s;

}

/*=========================================
TABLE (Optional)
=========================================*/

.privacy-table{

    width:100%;

    border-collapse:collapse;

    margin-top:25px;

}

.privacy-table th,

.privacy-table td{

    padding:14px 16px;

    border:1px solid #E5E7EB;

    text-align:left;

}

.privacy-table th{

    background:#F8FAFC;

    color:#0F172A;

    font-weight:600;

}

.privacy-table td{

    color:#475569;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:992px){

.privacy-policy-section{

    padding:40px 0;

}

.privacy-wrapper{

    padding:40px;

}

.privacy-heading h1{

    font-size:40px;

}

.privacy-block h2{

    font-size:26px;

}

}

@media(max-width:768px){

.privacy-policy-section{

    padding:40px 0;

}

.privacy-wrapper{

    padding:30px;

}

.privacy-heading{

    margin-bottom:40px;

}

.privacy-heading h1{

    font-size:34px;

}

.privacy-heading p{

    font-size:16px;

}

.privacy-block{

    padding:28px 0;

}

.privacy-block h2{

    font-size:24px;

}

.privacy-block p,

.privacy-block li{

    font-size:15px;

}

.privacy-update{

    width:100%;

    justify-content:center;

}

.privacy-contact-box{

    padding:24px;

}

.privacy-btn{

    width:100%;

}

}

@media(max-width:480px){

.privacy-wrapper{

    padding:22px;

    border-radius:14px;

}

.privacy-heading h1{

    font-size:28px;

}

.privacy-block h2{

    font-size:21px;

}

.privacy-contact-box h4{

    font-size:22px;

}

.privacy-breadcrumb{

    flex-wrap:wrap;

    font-size:14px;

}

}

/*==================================================
VISION & MISSION
PART 2A
Layout + Responsive
==================================================*/

/*=========================================
SECTION
=========================================*/

.vision-section{

    position:relative;

    padding:40px 0;

    background:#F8FBFD;

    overflow:hidden;

}

.vision-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-220px;

    right:-180px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.05),

        transparent 70%

    );

}

.vision-section::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-150px;

    bottom:-150px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.10),

        transparent 70%

    );

}

/*=========================================
HEADING
=========================================*/

.vision-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.vision-heading .section-title{

    margin:20px 0;

}

.vision-heading .section-description{

    max-width:720px;

    margin:auto;

    line-height:1.9;

}

/*=========================================
WRAPPER
=========================================*/

.vision-wrapper{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    align-items:stretch;

}

/*=========================================
CARD
=========================================*/

.vision-card{

    position:relative;

    padding:55px;

    border-radius:34px;

    overflow:hidden;

    min-height:620px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}

/*=========================================
LEFT CARD
=========================================*/

.vision-left{

    background: #0F5563;

    color:#fff;

}

/*=========================================
RIGHT CARD
=========================================*/

.vision-right{

    background:#fff;

    border:1px solid #E8EEF5;

    color:#0F172A;
    box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

}

/*=========================================
ICON
=========================================*/

.vision-icon{

    width:85px;

    height:85px;

    border-radius:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:30px;

}

.vision-left .vision-icon{

    background:rgba(255,255,255,.15);

    color:#fff;

}

.vision-right .vision-icon{

    background:#EAF4FF;

    color:#0D5CAB;

}

/*=========================================
LABEL
=========================================*/

.vision-label{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:10px 20px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

}

.vision-left .vision-label{

    background:rgba(255,255,255,.15);

    color:#fff;

}

.vision-right .vision-label{

    background:#FFF5E5;

    color:#F59E0B;

}

/*=========================================
TITLE
=========================================*/

.vision-card h3{

    font-size:2rem;

    line-height:1.25;

    margin-bottom:22px;

    font-weight:700;

}

/*=========================================
PARAGRAPH
=========================================*/

.vision-card p{

    font-size:17px;

    line-height:2;

    margin-bottom:35px;

}

.vision-left p{

    color:var( --text-color)

}

.vision-right p{

    color:var( --text-color);

}

/*=========================================
LIST
=========================================*/

.vision-card ul{

    list-style:none;

    margin-top:auto;

    display:grid;

    gap:18px;

}

.vision-card li{

    display:flex;

    align-items:flex-start;

    gap:14px;

    font-size:17px;

    line-height:1.7;

}

.vision-left li{

    color:#fff;

}

.vision-right li{

    color:#334155;

}

.vision-card li i{

    margin-top:4px;

    flex-shrink:0;

}

.vision-left li i{

    color:#fff;

}

.vision-right li i{

    color:#0D5CAB;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.vision-card{

    padding:45px;

    min-height:auto;

}

.vision-card h3{

    font-size:2rem;

}

}

@media(max-width:991px){

.vision-section{

    padding:40px 0;

}

.vision-wrapper{

    grid-template-columns:1fr;

}

.vision-card{

    min-height:auto;

}

}

@media(max-width:768px){

.vision-section{

    padding:40px 0;

}

.vision-heading{
   text-align: left;
    margin-bottom:50px;

}

.vision-card{

    padding:35px;

    border-radius:26px;

}

.vision-icon{

    width:70px;

    height:70px;

    font-size:28px;

    border-radius:20px;

}

.vision-card h3{

    font-size:2rem;

}

.vision-card p{

    font-size:16px;

    line-height:1.8;

}

.vision-card li{

    font-size:15px;

}

}

@media(max-width:480px){

.vision-card{

    padding:28px 22px;

}

.vision-card h3{

    font-size:1.9rem;

}

.vision-card p{

    font-size:15px;

}

.vision-card li{

    font-size:14px;

    gap:10px;

}

.vision-label{

    font-size:13px;

}

}
/*==================================================
VISION & MISSION
PART 2B
Premium Styling + Hover Effects
==================================================*/

/*=========================================
CARD
=========================================*/

.vision-card{

    transition:.45s ease;

    box-shadow:

    0 20px 60px rgba(15,35,68,.06);

    isolation:isolate;

}

.vision-card::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.08),

        transparent 60%

    );

    pointer-events:none;

    z-index:1;

}

.vision-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 90px rgba(15,35,68,.12);

}

/*=========================================
TOP BORDER
=========================================*/

.vision-card::after{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.vision-card:hover::after{

    width:100%;

}

/*=========================================
ICON
=========================================*/

.vision-icon{

    transition:.4s;

}

.vision-card:hover .vision-icon{

    transform:rotate(-10deg) scale(1.08);

}

.vision-right:hover .vision-icon{

    background:#0D5CAB;

    color:#fff;

}

.vision-left:hover .vision-icon{

    background:rgba(255,255,255,.22);

}

/*=========================================
LABEL
=========================================*/

.vision-label{

    transition:.35s;

}

.vision-right:hover .vision-label{

    background:#0D5CAB;

    color:#fff;

}

.vision-left:hover .vision-label{

    background:rgba(255,255,255,.20);

}

/*=========================================
TITLE
=========================================*/

.vision-card h3{

    transition:.35s;

}

.vision-right:hover h3{

    color:#0D5CAB;

}

/*=========================================
LIST
=========================================*/

.vision-card li{

    transition:.3s;

}

.vision-card li:hover{

    transform:translateX(8px);

}

.vision-right li:hover{

    color:#0D5CAB;

}

.vision-card li i{

    transition:.3s;

}

.vision-card li:hover i{

    transform:scale(1.2);

}

/*=========================================
SHINE EFFECT
=========================================*/

.vision-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.vision-shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.vision-card:hover .vision-shine::before{

    left:180%;

}

/*=========================================
BACKGROUND CIRCLE
=========================================*/

.vision-card .vision-circle{

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    right:-90px;

    bottom:-90px;

    opacity:.08;

    transition:.5s;

    z-index:0;

}

.vision-left .vision-circle{

    background:#fff;

}

.vision-right .vision-circle{

    background:#0D5CAB;

}

.vision-card:hover .vision-circle{

    transform:scale(1.15);

}

/*=========================================
READY
=========================================*/

.vision-card,

.vision-icon{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:992px){

.vision-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.vision-card:hover{

    transform:none;

}

.vision-card li:hover{

    transform:none;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.vision-card{

    border-radius:22px;

}

}















/*==================================================
FOR BUYERS HERO
PART 2A
Layout + Responsive
==================================================*/

/*=========================================
SECTION
=========================================*/

.buyer-hero-section{

    position:relative;

    padding:40px 0;

    background:#F8FBFD;

    overflow:hidden;

}

.buyer-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.buyer-shape-one{

    width:520px;

    height:520px;

    top:-250px;

    right:-180px;

    background:

    radial-gradient(circle,

    rgba(13,92,171,.08),

    transparent 70%);

}

.buyer-shape-two{

    width:380px;

    height:380px;

    bottom:-180px;

    left:-120px;

    background:

    radial-gradient(circle,

    rgba(255,183,3,.10),

    transparent 70%);

}

/*=========================================
WRAPPER
=========================================*/

.buyer-hero-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

/*=========================================
LEFT CONTENT
=========================================*/

.buyer-hero-content{

    position:relative;

    z-index:2;

}

.buyer-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:50px;

    background:#fff;

    border:1px solid rgba(13,92,171,.10);

    box-shadow:

    0 15px 40px rgba(15,35,68,.05);

    margin-bottom:28px;

}

.buyer-hero-badge img{

    width:22px;

}

.buyer-hero-badge span{

    color:#0D5CAB;

    font-size:15px;

    font-weight:600;

}

.buyer-hero-title{

    font-size:2.7rem;

    line-height:1.11;

    color:#0F172A;

    margin-bottom:18px;

    font-weight:700;

}

.buyer-hero-description{

    font-size:18px;

    line-height:1.6;

    color:var( --text-color);

    margin-bottom:35px;
    
    text-align:justify;

}

/*=========================================
FEATURE LIST
=========================================*/

.buyer-feature-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:45px;

}

.buyer-feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#334155;

    font-size:16px;

    font-weight:500;

}

.buyer-feature-item i{

    color:#0D5CAB;

    font-size:18px;

}

/*=========================================
BUTTONS
=========================================*/

.buyer-hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.buyer-primary-btn,

.buyer-secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.buyer-primary-btn{

    background:#0D5CAB;

    color:#fff;

}

.buyer-secondary-btn{

    background:#fff;

    color:#0D5CAB;

    border:2px solid #0D5CAB;

}

/*=========================================
RIGHT SIDE
=========================================*/

.buyer-hero-right{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*=========================================
MAIN CARD
=========================================*/

.buyer-main-card{

    background:#fff;

    padding:40px;

    border-radius:28px;

    border:1px solid #E8EEF5;

    box-shadow:

    0 25px 60px rgba(15,35,68,.06);

}

.buyer-card-label{

    display:inline-block;

    padding:10px 20px;

    background:#FFF5E5;

    color:#FF9800;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

}

.buyer-main-card h3{

    font-size:34px;

    line-height:1.3;

    color:#0F172A;

    margin-bottom:20px;

}

.buyer-main-card p{

    color:var( --text-color);

    line-height:1.9;

    margin-bottom:30px;

}

/*=========================================
PRODUCT TAGS
=========================================*/

.buyer-product-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.buyer-product-tags span{

    padding:10px 18px;

    border-radius:30px;

    background:#F4F8FC;

    color:#0D5CAB;

    font-size:14px;

    font-weight:500;

}

/*=========================================
STATS
=========================================*/

.buyer-stats-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.buyer-stat-card{

    padding:28px;

    background:#fff;

    border-radius:22px;

    text-align:center;

    border:1px solid #E8EEF5;

    box-shadow:

    0 15px 35px rgba(15,35,68,.05);

}

.buyer-stat-card h4{

    font-size:34px;

    color:#0D5CAB;

    margin-bottom:12px;

}

.buyer-stat-card p{

    color:var( --text-color);

    line-height:1.7;

    font-size:15px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.buyer-hero-title{

    font-size:2.4rem;

}

.buyer-hero-wrapper{

    gap:45px;

}

}

@media(max-width:991px){

.buyer-hero-section{

    padding:30px 0;

}

.buyer-hero-wrapper{

    grid-template-columns:1fr;

}

.buyer-hero-title{

    font-size:2rem;

}

}

@media(max-width:768px){

.buyer-hero-section{

    padding:30px 0;

}

.buyer-feature-list{

    grid-template-columns:1fr;

}

.buyer-hero-buttons{

    flex-direction:column;

}

.buyer-primary-btn,

.buyer-secondary-btn{

    width:100%;

}

.buyer-main-card{

    padding:30px;

}

.buyer-main-card h3{

    font-size:28px;

}

}

@media(max-width:480px){

.buyer-hero-title{

    font-size:1.9rem;

}

.buyer-hero-description{

    font-size:15px;

}

.buyer-main-card{

    padding:24px;

}

.buyer-main-card h3{

    font-size:24px;

}

.buyer-stats-grid{

    grid-template-columns:1fr;

}

.buyer-stat-card{

    padding:22px;

}

.buyer-stat-card h4{

    font-size:28px;

}

}

/*==================================================
FOR BUYERS HERO
PART 2B
Premium Styling + Hover Effects
==================================================*/

/*=========================================
MAIN CARD
=========================================*/

.buyer-main-card{

    position:relative;

    overflow:hidden;

    transition:.45s ease;

}

.buyer-main-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.buyer-main-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 80px rgba(15,35,68,.10);

}

.buyer-main-card:hover::before{

    width:100%;

}

/*=========================================
SHINE EFFECT
=========================================*/

.buyer-main-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.buyer-main-card:hover::after{

    left:180%;

}

/*=========================================
BADGE
=========================================*/

.buyer-card-label{

    transition:.35s;

}

.buyer-main-card:hover .buyer-card-label{

    background:#0D5CAB;

    color:#fff;

}

/*=========================================
FEATURE LIST
=========================================*/

.buyer-feature-item{

    transition:.3s;

}

.buyer-feature-item:hover{

    transform:translateX(8px);

    color:#0D5CAB;

}

.buyer-feature-item i{

    transition:.3s;

}

.buyer-feature-item:hover i{

    transform:scale(1.25);

    color:#FFB703;

}

/*=========================================
BUTTONS
=========================================*/

.buyer-primary-btn,

.buyer-secondary-btn{

    position:relative;

    overflow:hidden;

}

.buyer-primary-btn::before,

.buyer-secondary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.buyer-primary-btn:hover::before,

.buyer-secondary-btn:hover::before{

    left:120%;

}

.buyer-primary-btn:hover{

    transform:translateY(-5px);

    background:#084C91;

    box-shadow:

    0 20px 45px rgba(13,92,171,.25);

}

.buyer-secondary-btn:hover{

    background:#0D5CAB;

    color:#fff;

    transform:translateY(-5px);

}

.buyer-primary-btn i,

.buyer-secondary-btn i{

    transition:.35s;

}

.buyer-primary-btn:hover i,

.buyer-secondary-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
PRODUCT TAGS
=========================================*/

.buyer-product-tags span{

    transition:.35s;

    cursor:default;

}

.buyer-product-tags span:hover{

    background:#0D5CAB;

    color:#fff;

    transform:translateY(-4px);

}

/*=========================================
STAT CARD
=========================================*/

.buyer-stat-card{

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.buyer-stat-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:

    linear-gradient(

        180deg,

        #0D5CAB,

        #FFB703

    );

    transition:.35s;

}

.buyer-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 25px 60px rgba(15,35,68,.08);

}

.buyer-stat-card:hover::before{

    height:100%;

}

.buyer-stat-card h4{

    transition:.35s;

}

.buyer-stat-card:hover h4{

    color:#FFB703;

}

/*=========================================
BADGE
=========================================*/

.buyer-hero-badge{

    transition:.35s;

}

.buyer-hero-badge:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 40px rgba(13,92,171,.10);

}

/*=========================================
TITLE
=========================================*/

.buyer-main-card h3{

    transition:.35s;

}

.buyer-main-card:hover h3{

    color:#0D5CAB;

}

/*=========================================
READY
=========================================*/

.buyer-main-card,

.buyer-stat-card,

.buyer-primary-btn,

.buyer-secondary-btn{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.buyer-main-card:hover,

.buyer-stat-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.buyer-main-card:hover,

.buyer-stat-card:hover,

.buyer-primary-btn:hover,

.buyer-secondary-btn:hover{

    transform:none;

}

.buyer-feature-item:hover{

    transform:none;

}

.buyer-product-tags span:hover{

    transform:none;

}

}



/*==================================================
FOR BUYERS
PART 4A
BUYER PROCESS CSS
==================================================*/

/*=========================================
SECTION
=========================================*/

.buyer-process-section{

    position:relative;

    padding:40px 0;

    background:#FFFFFF;

    overflow:hidden;

}

.buyer-process-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(13,92,171,.05),

    transparent 70%);

}

.buyer-process-section::after{

    content:"";

    position:absolute;

    bottom:-180px;

    right:-180px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,183,3,.10),

    transparent 70%);

}

/*=========================================
HEADING
=========================================*/

.buyer-process-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

/*=========================================
GRID
=========================================*/

.buyer-process-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    position:relative;

}

/*=========================================
CARD
=========================================*/

.buyer-process-card{

    position:relative;

    background:#fff;

    border:1px solid #E8EEF5;

    border-radius:28px;

    padding:40px 35px;

    transition:.35s;

box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

}

/*=========================================
NUMBER
=========================================*/

.buyer-process-number{

    position:absolute;

    top:25px;

    right:25px;

    font-size:48px;

    font-weight:700;

    color:rgba(13,92,171,.08);

    line-height:1;

}

/*=========================================
ICON
=========================================*/

.buyer-process-icon{

    width:82px;

    height:82px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EAF4FF;

    color:#0D5CAB;

    font-size:30px;

    margin-bottom:28px;

}

/*=========================================
TITLE
=========================================*/

.buyer-process-card h3{

    font-size:28px;

    color:#0F172A;

    margin-bottom:18px;

    line-height:1.3;

}

/*=========================================
TEXT
=========================================*/

.buyer-process-card p{

    color:var( --text-color);

    line-height:1.9;

    font-size:16px;

}

/*=========================================
CTA
=========================================*/

.buyer-process-cta{

    margin-top:80px;

    padding:45px 50px;

    border-radius:30px;

    background:#0D5CAB;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.buyer-process-cta-content{

    max-width:700px;

}

.buyer-process-cta-content h3{

    color:#fff;

    font-size:38px;

    margin-bottom:18px;

}

.buyer-process-cta-content p{

    color:rgba(255,255,255,.85);

    line-height:1.9;

}

.buyer-process-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    background:#FFB703;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-size:16px;

    font-weight:600;

    white-space:nowrap;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.buyer-process-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:991px){

.buyer-process-section{

    padding:40px 0;

}

.buyer-process-grid{

    gap:25px;

}

.buyer-process-card{

    padding:35px 30px;

}

.buyer-process-card h3{

    font-size:24px;

}

.buyer-process-cta{

    flex-direction:column;

    text-align:center;

}

.buyer-process-cta-content h3{

    font-size:32px;

}

}

@media(max-width:768px){

.buyer-process-section{

    padding:40px 0;

}

.buyer-process-grid{

    grid-template-columns:1fr;

}

.buyer-process-heading{

    margin-bottom:50px;

}

.buyer-process-card{

    padding:30px;

}

.buyer-process-icon{

    width:70px;

    height:70px;

    font-size:26px;

    border-radius:18px;

}

.buyer-process-card h3{

    font-size:1.4;

}

.buyer-process-card p{

    font-size:15px;

}

.buyer-process-cta{

    padding:35px 30px;

}

.buyer-process-cta-content h3{

    font-size:28px;

}

.buyer-process-btn{

    width:100%;

}

}

@media(max-width:480px){

.buyer-process-card{

    padding:25px;

}

.buyer-process-number{

    font-size:36px;

}

.buyer-process-icon{

    width:62px;

    height:62px;

    font-size:22px;

}

.buyer-process-card h3{

    font-size:20px;

}

.buyer-process-cta{

    padding:28px 22px;

    border-radius:22px;

}

.buyer-process-cta-content h3{

    font-size:24px;

}

.buyer-process-cta-content p{

    font-size:15px;

}

.buyer-process-btn{

    font-size:15px;

}

}

/*==================================================
FOR BUYERS
PART 4B
Premium Effects + Hover
==================================================*/

/*=========================================
PROCESS CARD
=========================================*/

.buyer-process-card{

    overflow:hidden;

    isolation:isolate;

}

.buyer-process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s ease;

}

.buyer-process-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.02),

        rgba(255,183,3,.04)

    );

    opacity:0;

    transition:.4s;

    z-index:-1;

}

.buyer-process-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 80px rgba(15,35,68,.10);

}

.buyer-process-card:hover::before{

    width:100%;

}

.buyer-process-card:hover::after{

    opacity:1;

}

/*=========================================
ICON
=========================================*/

.buyer-process-icon{

    transition:.4s ease;

}

.buyer-process-card:hover .buyer-process-icon{

    background:#0D5CAB;

    color:#fff;

    transform:

    rotate(-8deg)

    scale(1.08);

}

/*=========================================
NUMBER
=========================================*/

.buyer-process-number{

    transition:.35s;

}

.buyer-process-card:hover .buyer-process-number{

    color:rgba(255,183,3,.18);

    transform:scale(1.1);

}

/*=========================================
TITLE
=========================================*/

.buyer-process-card h3{

    transition:.35s;

}

.buyer-process-card:hover h3{

    color:#0D5CAB;

}

/*=========================================
PARAGRAPH
=========================================*/

.buyer-process-card p{

    transition:.35s;

}

.buyer-process-card:hover p{

    color:#475569;

}

/*=========================================
CTA
=========================================*/

.buyer-process-cta{

    position:relative;

    overflow:hidden;

}

.buyer-process-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.06),

        transparent

    );

    pointer-events:none;

}

.buyer-process-cta::after{

    content:"";

    position:absolute;

    right:-120px;

    top:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.08),

        transparent

    );

}

/*=========================================
CTA BUTTON
=========================================*/

.buyer-process-btn{

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.buyer-process-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.buyer-process-btn:hover{

    background:#fff;

    color:#0D5CAB;

    transform:translateY(-4px);

}

.buyer-process-btn:hover::before{

    left:120%;

}

.buyer-process-btn i{

    transition:.35s;

}

.buyer-process-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
SHINE EFFECT
=========================================*/

.buyer-process-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.buyer-process-shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.buyer-process-card:hover .buyer-process-shine::before{

    left:180%;

}

/*=========================================
READY
=========================================*/

.buyer-process-card,

.buyer-process-btn,

.buyer-process-icon{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.buyer-process-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.buyer-process-card:hover,

.buyer-process-btn:hover{

    transform:none;

}

}












/*==================================================
FOR BUYERS
PART 6A
BUYER BENEFITS CSS
==================================================*/

/*=========================================
SECTION
=========================================*/

.buyer-benefits-section{

    position:relative;

    padding:40px 0;

    background:#F8FBFD;

    overflow:hidden;

}

.buyer-benefits-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    top:-220px;

    left:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(13,92,171,.05),

    transparent 70%);

}

.buyer-benefits-section::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,183,3,.10),

    transparent 70%);

}

/*=========================================
HEADING
=========================================*/

.buyer-benefits-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

/*=========================================
WRAPPER
=========================================*/

.buyer-benefits-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:50px;

    align-items:start;

}

/*=========================================
LEFT CONTENT
=========================================*/

.buyer-benefits-content{

    position:relative;

}

.buyer-benefits-tag{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    background:#FFF5E5;

    color:#F59E0B;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:24px;

}

.buyer-benefits-content h3{

    font-size:2.4rem;

    line-height:1.1;

    color:#0F172A;

    margin-bottom:25px;

    font-weight: 700;

}

.buyer-benefits-content p{

    color:var( --text-color);

    font-size:17px;

    line-height:2;

    margin-bottom:22px;

}

/*=========================================
HIGHLIGHT BOX
=========================================*/

.buyer-highlight-box{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:32px;

    margin:40px 0;

    background:#fff;

    border-radius:24px;

    border:1px solid #E8EEF5;

box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

}

.buyer-highlight-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0D5CAB;

    color:#fff;

    font-size:28px;

    flex-shrink:0;

}

.buyer-highlight-box h4{

    font-size:24px;

    color:#0F172A;

    margin-bottom:12px;

}

.buyer-highlight-box p{

    margin:0;

    color:var( --text-color);

    line-height:1.8;

}

/*=========================================
BUTTON
=========================================*/

.buyer-benefits-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 36px;

    border-radius:50px;

    background:#0D5CAB;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

}

/*=========================================
RIGHT SIDE
=========================================*/

.buyer-benefits-features{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*=========================================
FEATURE CARD
=========================================*/

.buyer-benefit-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:28px;

    background:#fff;

    border-radius:22px;

    border:1px solid #E8EEF5;

  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;

}

.buyer-benefit-icon{

    width:68px;

    height:68px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EAF4FF;

    color:#0D5CAB;

    font-size:26px;

    flex-shrink:0;

}

.buyer-benefit-card h4{

    font-size:22px;

    color:#0F172A;

    margin-bottom:10px;

}

.buyer-benefit-card p{

    color:var( --text-color);

    line-height:1.8;

    font-size:15px;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.buyer-benefits-content h3{

    font-size:2.4rem;

}

}

@media(max-width:991px){

.buyer-benefits-section{

    padding:40px 0;

}

.buyer-benefits-wrapper{

    grid-template-columns:1fr;

}

.buyer-benefits-content{

    margin-bottom:10px;

}

}

@media(max-width:768px){

.buyer-benefits-section{

    padding:40px 0;

}

.buyer-benefits-heading{

    margin-bottom:50px;

}

.buyer-benefits-content h3{

    font-size:1.8rem;

}

.buyer-benefits-content p{

    font-size:16px;

}

.buyer-highlight-box{

    flex-direction:column;

    padding:28px;

}

.buyer-highlight-icon{

    width:65px;

    height:65px;

    font-size:24px;

}

.buyer-benefit-card{

    padding:24px;

}

.buyer-benefit-card h4{

    font-size:20px;

}

}

@media(max-width:480px){

.buyer-benefits-content h3{

    font-size:1.7rem;

}

.buyer-benefits-content p{

    font-size:15px;

}

.buyer-highlight-box{

    padding:22px;

    border-radius:18px;

}

.buyer-benefits-btn{

    width:100%;

}

.buyer-benefit-card{

    flex-direction:column;

    gap:18px;

}

.buyer-benefit-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    font-size:22px;

}

.buyer-benefit-card h4{

    font-size:19px;

}

.buyer-benefit-card p{

    font-size:14px;

}

}


/*==================================================
FOR BUYERS
PART 6B
Premium Effects + Hover
==================================================*/

/*=========================================
CONTENT
=========================================*/

.buyer-benefits-content{

    position:relative;

}

.buyer-benefits-content::before{

    content:"";

    position:absolute;

    left:-25px;

    top:0;

    width:4px;

    height:120px;

    border-radius:20px;

    background:

    linear-gradient(

        180deg,

        #0D5CAB,

        #FFB703

    );

}

/*=========================================
TAG
=========================================*/

.buyer-benefits-tag{

    transition:.35s;

}

.buyer-benefits-tag:hover{

    background:#0D5CAB;

    color:#fff;

}

/*=========================================
HIGHLIGHT BOX
=========================================*/

.buyer-highlight-box{

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.buyer-highlight-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.03),

        rgba(255,183,3,.05)

    );

    opacity:0;

    transition:.35s;

}

.buyer-highlight-box::after{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.4s;

}

.buyer-highlight-box:hover{

    transform:translateY(-8px);

    box-shadow:

    0 30px 70px rgba(15,35,68,.10);

}

.buyer-highlight-box:hover::before{

    opacity:1;

}

.buyer-highlight-box:hover::after{

    width:100%;

}

/*=========================================
ICON
=========================================*/

.buyer-highlight-icon,

.buyer-benefit-icon{

    transition:.35s;

}

.buyer-highlight-box:hover .buyer-highlight-icon{

    background:#FFB703;

    transform:

    rotate(-8deg)

    scale(1.08);

}

.buyer-benefit-card:hover .buyer-benefit-icon{

    background:#0D5CAB;

    color:#fff;

    transform:

    rotate(-8deg)

    scale(1.08);

}

/*=========================================
FEATURE CARD
=========================================*/

.buyer-benefit-card{

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.buyer-benefit-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:

    linear-gradient(

        180deg,

        #0D5CAB,

        #FFB703

    );

    transition:.4s;

}

.buyer-benefit-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.02),

        rgba(255,183,3,.05)

    );

    opacity:0;

    transition:.35s;

    z-index:0;

}

.buyer-benefit-card>*{

    position:relative;

    z-index:2;

}

.buyer-benefit-card:hover{

    transform:translateX(12px);

    box-shadow:

    0 28px 70px rgba(15,35,68,.08);

}

.buyer-benefit-card:hover::before{

    height:100%;

}

.buyer-benefit-card:hover::after{

    opacity:1;

}

.buyer-benefit-card h4{

    transition:.35s;

}

.buyer-benefit-card:hover h4{

    color:#0D5CAB;

}

/*=========================================
BUTTON
=========================================*/

.buyer-benefits-btn{

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.buyer-benefits-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.buyer-benefits-btn:hover{

    background:#084C91;

    transform:translateY(-5px);

    box-shadow:

    0 22px 50px rgba(13,92,171,.25);

}

.buyer-benefits-btn:hover::before{

    left:120%;

}

.buyer-benefits-btn i{

    transition:.35s;

}

.buyer-benefits-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
SHINE
=========================================*/

.buyer-benefit-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.buyer-benefit-shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.buyer-benefit-card:hover .buyer-benefit-shine::before,

.buyer-highlight-box:hover .buyer-benefit-shine::before{

    left:180%;

}

/*=========================================
READY
=========================================*/

.buyer-highlight-box,

.buyer-benefit-card,

.buyer-benefits-btn{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.buyer-benefits-content::before{

    display:none;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.buyer-highlight-box:hover,

.buyer-benefit-card:hover,

.buyer-benefits-btn:hover{

    transform:none;

}

}

























/*==================================================
FOR SUPPLIERS
PART 2A
HERO CSS
==================================================*/

/*=========================================
SECTION
=========================================*/

.supplier-hero-section{

    position:relative;

    padding:30px 0;

    background:#F8FBFD;

    overflow:hidden;

}

.supplier-hero-shape{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}

.supplier-shape-one{

    width:500px;

    height:500px;

    top:-220px;

    left:-180px;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.10),

        transparent 70%

    );

}

.supplier-shape-two{

    width:420px;

    height:420px;

    bottom:-180px;

    right:-120px;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.08),

        transparent 70%

    );

}

/*=========================================
WRAPPER
=========================================*/

.supplier-hero-wrapper{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

/*=========================================
LEFT
=========================================*/

.supplier-hero-content{

    position:relative;

    z-index:2;

}

.supplier-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    background:#fff;

    border:1px solid #E8EEF5;

    border-radius:50px;

    box-shadow:

    0 15px 40px rgba(15,35,68,.05);

    margin-bottom:28px;

}

.supplier-hero-badge img{

    width:22px;

}

.supplier-hero-badge span{

    color:#0D5CAB;

    font-size:15px;

    font-weight:600;

}

.supplier-hero-title{

    font-size:2.6rem;

    line-height:1.15;

    color:#0F172A;

    margin-bottom:28px;

    font-weight:700;

}

.supplier-hero-description{

    font-size:18px;

    line-height:1.9;
    text-align: justify;

    color:var( --text-color);

    margin-bottom:40px;

}

/*=========================================
FEATURES
=========================================*/

.supplier-hero-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin-bottom:45px;

}

.supplier-feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    color:#334155;

    font-size:16px;

    font-weight:500;

}

.supplier-feature-item i{

    color:#FFB703;

    font-size:18px;

}

/*=========================================
BUTTONS
=========================================*/

.supplier-hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

.supplier-primary-btn,

.supplier-secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.supplier-primary-btn{

    background:#0D5CAB;

    color:#fff;

}

.supplier-secondary-btn{

    background:#fff;

    color:#0D5CAB;

    border:2px solid #0D5CAB;

}

/*=========================================
RIGHT
=========================================*/

.supplier-hero-right{

    display:flex;

    flex-direction:column;

    gap:28px;

}

/*=========================================
MAIN CARD
=========================================*/

.supplier-main-card{

    background:#fff;

    padding:42px;

    border-radius:30px;

    border:1px solid #E8EEF5;

    box-shadow:

    0 20px 55px rgba(15,35,68,.06);

}

.supplier-card-tag{

    display:inline-block;

    padding:10px 20px;

    background:#FFF5E5;

    color:#F59E0B;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

    margin-bottom:24px;

}

.supplier-main-card h3{

    font-size:36px;

    color:#0F172A;

    line-height:1.3;

    margin-bottom:22px;

}

.supplier-main-card p{

    color:var( --text-color);

    line-height:1.9;

    margin-bottom:30px;

}

/*=========================================
SERVICE LIST
=========================================*/

.supplier-service-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:16px;

}

.supplier-service-list div{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px;

    background:#F8FBFD;

    border-radius:14px;

    font-size:15px;

    color:#334155;

    font-weight:500;

}

.supplier-service-list i{

    color:#0D5CAB;

}

/*=========================================
STATS
=========================================*/

.supplier-stats-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.supplier-stat-card{

    padding:28px;

    background:#fff;

    text-align:center;

    border-radius:22px;

    border:1px solid #E8EEF5;

    box-shadow:

    0 15px 35px rgba(15,35,68,.05);

}

.supplier-stat-card h4{

    font-size:34px;

    color:#0D5CAB;

    margin-bottom:10px;

}

.supplier-stat-card span{

    color:var( --text-color);

    font-size:15px;

    line-height:1.7;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.supplier-hero-title{

    font-size:2.4rem;

}

.supplier-hero-wrapper{

    gap:50px;

}

}

@media(max-width:991px){

.supplier-hero-section{

    padding:40px 0;

}

.supplier-hero-wrapper{

    grid-template-columns:1fr;

}

.supplier-hero-title{

    font-size:2rem;

}

}

@media(max-width:768px){

.supplier-hero-section{

    padding:40px 0;

}

.supplier-hero-features{

    grid-template-columns:1fr;

}

.supplier-hero-buttons{

    flex-direction:column;

}

.supplier-primary-btn,

.supplier-secondary-btn{

    width:100%;

}

.supplier-main-card{

    padding:30px;

}

.supplier-main-card h3{

    font-size:28px;

}

.supplier-service-list{

    grid-template-columns:1fr;

}

}

@media(max-width:480px){

.supplier-hero-title{

    font-size:1.9rem;

}

.supplier-hero-description{

    font-size:15px;

}

.supplier-main-card{

    padding:24px;

}

.supplier-main-card h3{

    font-size:24px;

}

.supplier-stats-grid{

    grid-template-columns:1fr;

}

.supplier-stat-card{

    padding:22px;

}

.supplier-stat-card h4{

    font-size:28px;

}

}



/*==================================================
FOR SUPPLIERS
PART 2B
Premium Styling + Hover Effects
==================================================*/

/*=========================================
BADGE
=========================================*/

.supplier-hero-badge{

    transition:.35s ease;

}

.supplier-hero-badge:hover{

    transform:translateY(-4px);

    box-shadow:

    0 18px 45px rgba(13,92,171,.10);

}

/*=========================================
MAIN CARD
=========================================*/

.supplier-main-card{

    position:relative;

    overflow:hidden;

    transition:.45s ease;

}

.supplier-main-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.supplier-main-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.supplier-main-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 85px rgba(15,35,68,.10);

}

.supplier-main-card:hover::before{

    width:100%;

}

.supplier-main-card:hover::after{

    left:180%;

}

/*=========================================
CARD TAG
=========================================*/

.supplier-card-tag{

    transition:.35s;

}

.supplier-main-card:hover .supplier-card-tag{

    background:#0D5CAB;

    color:#fff;

}

/*=========================================
TITLE
=========================================*/

.supplier-main-card h3{

    transition:.35s;

}

.supplier-main-card:hover h3{

    color:#0D5CAB;

}

/*=========================================
SERVICE BOX
=========================================*/

.supplier-service-list div{

    transition:.35s;

}

.supplier-service-list div:hover{

    background:#0D5CAB;

    color:#fff;

    transform:translateY(-4px);

}

.supplier-service-list div:hover i{

    color:#FFB703;

}

/*=========================================
FEATURE LIST
=========================================*/

.supplier-feature-item{

    transition:.3s;

}

.supplier-feature-item:hover{

    color:#0D5CAB;

    transform:translateX(8px);

}

.supplier-feature-item i{

    transition:.3s;

}

.supplier-feature-item:hover i{

    color:#FFB703;

    transform:scale(1.2);

}

/*=========================================
BUTTONS
=========================================*/

.supplier-primary-btn,

.supplier-secondary-btn{

    position:relative;

    overflow:hidden;

}

.supplier-primary-btn::before,

.supplier-secondary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.supplier-primary-btn:hover::before,

.supplier-secondary-btn:hover::before{

    left:120%;

}

.supplier-primary-btn:hover{

    background:#084C91;

    transform:translateY(-5px);

    box-shadow:

    0 22px 55px rgba(13,92,171,.25);

}

.supplier-secondary-btn:hover{

    background:#0D5CAB;

    color:#fff;

    transform:translateY(-5px);

}

.supplier-primary-btn i,

.supplier-secondary-btn i{

    transition:.35s;

}

.supplier-primary-btn:hover i,

.supplier-secondary-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
STAT CARD
=========================================*/

.supplier-stat-card{

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.supplier-stat-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:

    linear-gradient(

        180deg,

        #0D5CAB,

        #FFB703

    );

    transition:.35s;

}

.supplier-stat-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 25px 60px rgba(15,35,68,.08);

}

.supplier-stat-card:hover::before{

    height:100%;

}

.supplier-stat-card h4{

    transition:.35s;

}

.supplier-stat-card:hover h4{

    color:#FFB703;

}

/*=========================================
READY
=========================================*/

.supplier-main-card,

.supplier-stat-card,

.supplier-primary-btn,

.supplier-secondary-btn{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.supplier-main-card:hover,

.supplier-stat-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.supplier-main-card:hover,

.supplier-stat-card:hover,

.supplier-primary-btn:hover,

.supplier-secondary-btn:hover{

    transform:none;

}

.supplier-feature-item:hover,

.supplier-service-list div:hover{

    transform:none;

}

}



/*==================================================
FOR SUPPLIERS
PART 4A
BECOME SUPPLIER CSS
==================================================*/

/*=========================================
SECTION
=========================================*/

.supplier-become-section{

    position:relative;

    padding:30px 0;

    background:#FFFFFF;

    overflow:hidden;

}

.supplier-become-section::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.05),

        transparent 70%

    );

}

.supplier-become-section::after{

    content:"";

    position:absolute;

    bottom:-160px;

    left:-160px;

    width:350px;

    height:350px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.10),

        transparent 70%

    );

}

/*=========================================
HEADING
=========================================*/

.supplier-become-heading{

    max-width:780px;

    margin:0 auto 70px;

    text-align:center;

}

/*=========================================
WRAPPER
=========================================*/

.supplier-become-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:55px;

    align-items:start;

}

/*=========================================
LEFT
=========================================*/

.supplier-become-content{

    position:relative;

}

.supplier-content-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:#FFF5E5;

    color:#F59E0B;

    border-radius:40px;

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

}

.supplier-become-content h3{

    font-size:46px;

    line-height:1.25;

    color:#0F172A;

    margin-bottom:24px;

}

.supplier-become-content p{

    color:var( --text-color);

    line-height:2;

    font-size:17px;

    margin-bottom:25px;

}

/*=========================================
BENEFITS
=========================================*/

.supplier-benefit-list{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    margin:35px 0;

}

.supplier-benefit-item{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:#334155;

    font-size:16px;

    line-height:1.7;

}

.supplier-benefit-item i{

    color:#0D5CAB;

    margin-top:4px;

    flex-shrink:0;

}

/*=========================================
HIGHLIGHT
=========================================*/

.supplier-highlight-card{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:30px;

    background:#F8FBFD;

    border:1px solid #E8EEF5;

    border-radius:24px;

    margin-top:20px;

}

.supplier-highlight-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#0D5CAB;

    color:#fff;

    font-size:26px;

    flex-shrink:0;

}

.supplier-highlight-card h4{

    font-size:24px;

    color:#0F172A;

    margin-bottom:10px;

}

.supplier-highlight-card p{

    margin:0;

    font-size:15px;

    line-height:1.8;

}

/*=========================================
FORM
=========================================*/

.supplier-form-box{

    background:#fff;

    border:1px solid #E8EEF5;

    border-radius:30px;

    padding:40px;

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

}

.supplier-form-box h3{

    font-size:34px;

    color:#0F172A;

    margin-bottom:15px;

}

.supplier-form-box>p{

    color:var( --text-color);

    line-height:1.8;

    margin-bottom:35px;

}

/*=========================================
FORM GRID
=========================================*/

.supplier-form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.full-width{

    grid-column:1/-1;

}

/*=========================================
FORM GROUP
=========================================*/

.supplier-form-group{

    display:flex;

    flex-direction:column;

}

.supplier-form-group label{

    font-size:15px;

    font-weight:600;

    color:#334155;

    margin-bottom:10px;

}

.supplier-form-group input,

.supplier-form-group select,

.supplier-form-group textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #D9E3EC;

    border-radius:14px;

    background:#fff;

    font-size:15px;

    color:#334155;

    outline:none;

    transition:.3s;

    resize:none;

}

.supplier-form-group textarea{

    min-height:140px;

}

/*=========================================
CHECKBOX
=========================================*/

.supplier-checkbox{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin:30px 0;

    cursor:pointer;

}

.supplier-checkbox input{

    margin-top:5px;

    accent-color:#0D5CAB;

}

.supplier-checkbox span{

    color:var( --text-color);

    line-height:1.8;

    font-size:15px;

}

/*=========================================
BUTTON
=========================================*/

.supplier-register-btn{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px;

    border:none;

    border-radius:50px;

    background:#0D5CAB;

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.supplier-become-content h3{

    font-size:40px;

}

}

@media(max-width:991px){

.supplier-become-section{

    padding:40px 0;

}

.supplier-become-wrapper{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.supplier-become-section{

    padding:40px 0;

}

.supplier-become-heading{

    margin-bottom:50px;

}

.supplier-become-content h3{

    font-size:34px;

}

.supplier-benefit-list{

    grid-template-columns:1fr;

}

.supplier-form-box{

    padding:30px;

}

.supplier-form-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:480px){

.supplier-become-content h3{

    font-size:28px;

}

.supplier-become-content p{

    font-size:15px;

}

.supplier-highlight-card{

    flex-direction:column;

    padding:24px;

}

.supplier-highlight-icon{

    width:60px;

    height:60px;

    font-size:22px;

}

.supplier-form-box{

    padding:22px;

    border-radius:22px;

}

.supplier-form-box h3{

    font-size:28px;

}

.supplier-checkbox span{

    font-size:14px;

}

}


/*==================================================
FOR SUPPLIERS
PART 4B
PREMIUM STYLING
==================================================*/

/*=========================================
CONTENT LEFT BORDER
=========================================*/

.supplier-become-content{

    position:relative;

}

.supplier-become-content::before{

    content:"";

    position:absolute;

    left:-24px;

    top:0;

    width:4px;

    height:120px;

    border-radius:20px;

    background:

    linear-gradient(

        180deg,

        #0D5CAB,

        #FFB703

    );

}

/*=========================================
TAG
=========================================*/

.supplier-content-tag{

    transition:.35s;

}

.supplier-content-tag:hover{

    background:#0D5CAB;

    color:#fff;

}

/*=========================================
BENEFITS
=========================================*/

.supplier-benefit-item{

    transition:.35s;

}

.supplier-benefit-item:hover{

    transform:translateX(8px);

    color:#0D5CAB;

}

.supplier-benefit-item i{

    transition:.35s;

}

.supplier-benefit-item:hover i{

    color:#FFB703;

    transform:scale(1.2);

}

/*=========================================
HIGHLIGHT CARD
=========================================*/

.supplier-highlight-card{

    position:relative;

    overflow:hidden;

    transition:.4s;

}

.supplier-highlight-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:30px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.supplier-highlight-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.03),

        rgba(255,183,3,.05)

    );

    opacity:0;

    transition:.35s;

}

.supplier-highlight-card>*{

    position:relative;

    z-index:2;

}

.supplier-highlight-card:hover{

    transform:translateY(-8px);

    box-shadow:

    0 30px 70px rgba(15,35,68,.08);

}

.supplier-highlight-card:hover::before{

    width:100%;

}

.supplier-highlight-card:hover::after{

    opacity:1;

}

.supplier-highlight-card:hover .supplier-highlight-icon{

    background:#FFB703;

    transform:

    rotate(-8deg)

    scale(1.08);

}

/*=========================================
HIGHLIGHT ICON
=========================================*/

.supplier-highlight-icon{

    transition:.35s;

}

/*=========================================
FORM BOX
=========================================*/

.supplier-form-box{

    position:relative;

    overflow:hidden;

    transition:.45s;

}

.supplier-form-box::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.supplier-form-box::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.supplier-form-box:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 80px rgba(15,35,68,.10);

}

.supplier-form-box:hover::before{

    width:100%;

}

.supplier-form-box:hover::after{

    left:180%;

}

/*=========================================
INPUTS
=========================================*/

.supplier-form-group input,

.supplier-form-group select,

.supplier-form-group textarea{

    transition:.35s;

}

.supplier-form-group input:focus,

.supplier-form-group select:focus,

.supplier-form-group textarea:focus{

    border-color:#0D5CAB;

    box-shadow:

    0 0 0 4px rgba(13,92,171,.08);

}

/*=========================================
BUTTON
=========================================*/

.supplier-register-btn{

    position:relative;

    overflow:hidden;

}

.supplier-register-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.supplier-register-btn:hover{

    background:#084C91;

    transform:translateY(-5px);

    box-shadow:

    0 25px 60px rgba(13,92,171,.25);

}

.supplier-register-btn:hover::before{

    left:120%;

}

.supplier-register-btn i{

    transition:.35s;

}

.supplier-register-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
CHECKBOX
=========================================*/

.supplier-checkbox{

    transition:.35s;

}

.supplier-checkbox:hover span{

    color:#334155;

}

/*=========================================
READY
=========================================*/

.supplier-form-box,

.supplier-highlight-card,

.supplier-register-btn{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.supplier-become-content::before{

    display:none;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.supplier-highlight-card:hover,

.supplier-form-box:hover,

.supplier-register-btn:hover{

    transform:none;

}

.supplier-benefit-item:hover{

    transform:none;

}

}




















/*==================================================
FOR SUPPLIERS
PART 6A
SUPPLIER BENEFITS CSS
==================================================*/

/*=========================================
SECTION
=========================================*/

.supplier-benefits-section{

    position:relative;

    padding:40px 0;

    background:#F8FBFD;

    overflow:hidden;

}

.supplier-benefits-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.05),

        transparent 70%

    );

}

.supplier-benefits-section::after{

    content:"";

    position:absolute;

    bottom:-150px;

    right:-150px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.10),

        transparent 70%

    );

}

/*=========================================
HEADING
=========================================*/

.supplier-benefits-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

/*=========================================
GRID
=========================================*/

.supplier-benefits-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

}

/*=========================================
CARD
=========================================*/

.supplier-benefit-card{

    display:flex;

    align-items:flex-start;

    gap:24px;

    padding:34px;

    background:#fff;

    border:1px solid #E8EEF5;

    border-radius:24px;

    box-shadow:

    0 15px 40px rgba(15,35,68,.05);

}

/*=========================================
ICON
=========================================*/

.supplier-benefit-icon{

    width:75px;

    height:75px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    background:#EAF4FF;

    color:#0D5CAB;

    font-size:30px;

    flex-shrink:0;

}

/*=========================================
CONTENT
=========================================*/

.supplier-benefit-content{

    flex:1;

}

.supplier-benefit-content h3{

    font-size:26px;

    color:#0F172A;

    margin-bottom:14px;

    line-height:1.3;

}

.supplier-benefit-content p{

    color:var( --text-color);

    font-size:16px;

    line-height:1.9;

}

/*=========================================
BOTTOM CTA
=========================================*/

.supplier-benefits-footer{

    margin-top:80px;

    background:#0D5CAB;

    border-radius:30px;

    padding:45px 50px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

}

.supplier-footer-content{

    max-width:700px;

}

.supplier-footer-content h3{

    color:#fff;

    font-size:38px;

    margin-bottom:18px;

}

.supplier-footer-content p{

    color:rgba(255,255,255,.85);

    line-height:1.9;

}

.supplier-footer-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

    background:#FFB703;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    white-space:nowrap;

    transition:.35s;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.supplier-benefit-content h3{

    font-size:24px;

}

}

@media(max-width:991px){

.supplier-benefits-section{

    padding:40px 0;

}

.supplier-benefits-grid{

    grid-template-columns:1fr;

}

.supplier-benefits-footer{

    flex-direction:column;

    text-align:center;

}

.supplier-footer-content h3{

    font-size:32px;

}

}

@media(max-width:768px){

.supplier-benefits-section{

    padding:40px 0;

}

.supplier-benefits-heading{

    margin-bottom:50px;

}

.supplier-benefit-card{

    padding:28px;

    gap:20px;

}

.supplier-benefit-icon{

    width:65px;

    height:65px;

    font-size:26px;

    border-radius:18px;

}

.supplier-benefit-content h3{

    font-size:22px;

}

.supplier-benefit-content p{

    font-size:15px;

}

.supplier-benefits-footer{

    padding:35px 30px;

}

.supplier-footer-content h3{

    font-size:28px;

}

.supplier-footer-btn{

    width:100%;

}

}

@media(max-width:480px){

.supplier-benefits-section{

    padding:40px 0;

}

.supplier-benefit-card{

    flex-direction:column;

    padding:24px;

}

.supplier-benefit-icon{

    width:60px;

    height:60px;

    font-size:22px;

}

.supplier-benefit-content h3{

    font-size:20px;

}

.supplier-benefit-content p{

    font-size:14px;

}

.supplier-benefits-footer{

    padding:28px 22px;

    border-radius:22px;

}

.supplier-footer-content h3{

    font-size:24px;

}

.supplier-footer-content p{

    font-size:15px;

}

.supplier-footer-btn{

    font-size:15px;

}

}

/*==================================================
FOR SUPPLIERS
PART 6B
PREMIUM STYLING
==================================================*/

/*=========================================
SECTION
=========================================*/

.supplier-benefits-section{

    position:relative;

}

/*=========================================
BENEFIT CARD
=========================================*/

.supplier-benefit-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    transition:.45s ease;

}

.supplier-benefit-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.supplier-benefit-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.02),

        rgba(255,183,3,.05)

    );

    opacity:0;

    transition:.35s;

    z-index:-1;

}

.supplier-benefit-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 80px rgba(15,35,68,.10);

}

.supplier-benefit-card:hover::before{

    width:100%;

}

.supplier-benefit-card:hover::after{

    opacity:1;

}

/*=========================================
SHINE EFFECT
=========================================*/

.supplier-benefit-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.supplier-benefit-shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.supplier-benefit-card:hover .supplier-benefit-shine::before{

    left:180%;

}

/*=========================================
ICON
=========================================*/

.supplier-benefit-icon{

    transition:.35s ease;

}

.supplier-benefit-card:hover .supplier-benefit-icon{

    background:#0D5CAB;

    color:#fff;

    transform:

    rotate(-8deg)

    scale(1.08);

}

/*=========================================
TITLE
=========================================*/

.supplier-benefit-content h3{

    transition:.35s;

}

.supplier-benefit-card:hover h3{

    color:#0D5CAB;

}

/*=========================================
PARAGRAPH
=========================================*/

.supplier-benefit-content p{

    transition:.35s;

}

.supplier-benefit-card:hover p{

    color:#475569;

}

/*=========================================
CTA
=========================================*/

.supplier-benefits-footer{

    position:relative;

    overflow:hidden;

}

.supplier-benefits-footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent

    );

    pointer-events:none;

}

.supplier-benefits-footer::after{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.08),

        transparent

    );

}

/*=========================================
CTA BUTTON
=========================================*/

.supplier-footer-btn{

    position:relative;

    overflow:hidden;

}

.supplier-footer-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.supplier-footer-btn:hover{

    background:#fff;

    color:#0D5CAB;

    transform:translateY(-4px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.15);

}

.supplier-footer-btn:hover::before{

    left:120%;

}

.supplier-footer-btn i{

    transition:.35s;

}

.supplier-footer-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
READY
=========================================*/

.supplier-benefit-card,

.supplier-footer-btn,

.supplier-benefit-icon{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.supplier-benefit-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.supplier-benefit-card:hover,

.supplier-footer-btn:hover{

    transform:none;

}

}




/*==================================================
FOR SUPPLIERS
PART 8A
SUPPLIER PROCESS CSS
==================================================*/

/*=========================================
SECTION
=========================================*/

.supplier-process-section{

    position:relative;

    padding:40px 0;

    background:#FFFFFF;

    overflow:hidden;

}

.supplier-process-section::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(13,92,171,.05),

        transparent 70%

    );

}

.supplier-process-section::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-180px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,183,3,.10),

        transparent 70%

    );

}

/*=========================================
HEADING
=========================================*/

.supplier-process-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

/*=========================================
GRID
=========================================*/

.supplier-process-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-bottom:80px;

}

/*=========================================
CARD
=========================================*/

.supplier-process-card{

    position:relative;

    background:#fff;

    border:1px solid #E8EEF5;

    border-radius:28px;

    padding:40px 35px;

    box-shadow:

    0 18px 45px rgba(15,35,68,.05);

}

/*=========================================
STEP NUMBER
=========================================*/

.supplier-process-number{

    position:absolute;

    top:24px;

    right:24px;

    font-size:48px;

    font-weight:700;

    color:rgba(13,92,171,.08);

    line-height:1;

}

/*=========================================
ICON
=========================================*/

.supplier-process-icon{

    width:82px;

    height:82px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EAF4FF;

    color:#0D5CAB;

    border-radius:22px;

    font-size:30px;

    margin-bottom:28px;

}

/*=========================================
TITLE
=========================================*/

.supplier-process-card h3{

    font-size:28px;

    color:#0F172A;

    margin-bottom:16px;

    line-height:1.3;

}

/*=========================================
TEXT
=========================================*/

.supplier-process-card p{

    color:var( --text-color);

    line-height:1.9;

    font-size:16px;

}

/*=========================================
SUMMARY
=========================================*/

.supplier-process-summary{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:40px;

    background:#0D5CAB;

    border-radius:30px;

    padding:50px;

    align-items:center;

}

.supplier-summary-left span{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:rgba(255,255,255,.12);

    color:#fff;

    font-size:14px;

    margin-bottom:20px;

}

.supplier-summary-left h3{

    font-size:38px;

    color:#fff;

    line-height:1.25;

    margin-bottom:20px;

}

.supplier-summary-left p{

    color:rgba(255,255,255,.85);

    line-height:1.9;

}

/*=========================================
RIGHT
=========================================*/

.supplier-summary-right ul{

    list-style:none;

    margin:0 0 30px;

    padding:0;

}

.supplier-summary-right li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    margin-bottom:18px;

    color:#fff;

    line-height:1.8;

}

.supplier-summary-right li i{

    color:#FFB703;

    margin-top:5px;

}

/*=========================================
BUTTON
=========================================*/

.supplier-process-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

    background:#FFB703;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

}

/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.supplier-process-grid{

    grid-template-columns:repeat(2,1fr);

}

.supplier-summary-left h3{

    font-size:34px;

}

}

@media(max-width:991px){

.supplier-process-section{

    padding:40px 0;

}

.supplier-process-grid{

    grid-template-columns:repeat(2,1fr);

    gap:24px;

}

.supplier-process-summary{

    grid-template-columns:1fr;

    text-align:center;

}

.supplier-summary-right li{

    justify-content:center;

}

}

@media(max-width:768px){

.supplier-process-section{

    padding:40px 0;

}

.supplier-process-heading{

    margin-bottom:50px;

}

.supplier-process-grid{

    grid-template-columns:1fr;

}

.supplier-process-card{

    padding:30px;

}

.supplier-process-icon{

    width:70px;

    height:70px;

    font-size:26px;

    border-radius:18px;

}

.supplier-process-card h3{

    font-size:24px;

}

.supplier-process-card p{

    font-size:15px;

}

.supplier-process-summary{

    padding:35px 30px;

}

.supplier-summary-left h3{

    font-size:30px;

}

.supplier-process-btn{

    width:100%;

}

}

@media(max-width:480px){

.supplier-process-card{

    padding:25px;

}

.supplier-process-number{

    font-size:36px;

}

.supplier-process-icon{

    width:60px;

    height:60px;

    font-size:22px;

}

.supplier-process-card h3{

    font-size:21px;

}

.supplier-process-summary{

    padding:28px 22px;

    border-radius:22px;

}

.supplier-summary-left h3{

    font-size:24px;

}

.supplier-summary-left p,

.supplier-summary-right li{

    font-size:15px;

}

.supplier-process-btn{

    font-size:15px;

}

}

/*==================================================
FOR SUPPLIERS
PART 8B
PREMIUM STYLING
==================================================*/

/*=========================================
PROCESS CARD
=========================================*/

.supplier-process-card{

    position:relative;

    overflow:hidden;

    isolation:isolate;

    transition:.45s ease;

}

.supplier-process-card::before{

    content:"";

    position:absolute;

    top:0;

    left:50%;

    transform:translateX(-50%);

    width:0;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

        90deg,

        #0D5CAB,

        #FFB703

    );

    transition:.45s;

}

.supplier-process-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(13,92,171,.02),

        rgba(255,183,3,.05)

    );

    opacity:0;

    transition:.35s;

    z-index:-1;

}

.supplier-process-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 35px 80px rgba(15,35,68,.10);

}

.supplier-process-card:hover::before{

    width:100%;

}

.supplier-process-card:hover::after{

    opacity:1;

}

/*=========================================
SHINE EFFECT
=========================================*/

.supplier-process-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.supplier-process-shine::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-90%;

    width:60%;

    height:260%;

    transform:rotate(25deg);

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:1s;

}

.supplier-process-card:hover .supplier-process-shine::before{

    left:180%;

}

/*=========================================
ICON
=========================================*/

.supplier-process-icon{

    transition:.35s ease;

}

.supplier-process-card:hover .supplier-process-icon{

    background:#0D5CAB;

    color:#fff;

    transform:

    rotate(-8deg)

    scale(1.08);

}

/*=========================================
STEP NUMBER
=========================================*/

.supplier-process-number{

    transition:.35s;

}

.supplier-process-card:hover .supplier-process-number{

    color:rgba(255,183,3,.18);

    transform:scale(1.08);

}

/*=========================================
TITLE
=========================================*/

.supplier-process-card h3{

    transition:.35s;

}

.supplier-process-card:hover h3{

    color:#0D5CAB;

}

/*=========================================
PARAGRAPH
=========================================*/

.supplier-process-card p{

    transition:.35s;

}

.supplier-process-card:hover p{

    color:#475569;

}

/*=========================================
SUMMARY PANEL
=========================================*/

.supplier-process-summary{

    position:relative;

    overflow:hidden;

}

.supplier-process-summary::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.05),

        transparent

    );

    pointer-events:none;

}

.supplier-process-summary::after{

    content:"";

    position:absolute;

    right:-120px;

    top:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.08),

        transparent

    );

}

/*=========================================
CHECKLIST
=========================================*/

.supplier-summary-right li{

    transition:.35s;

}

.supplier-summary-right li:hover{

    transform:translateX(8px);

}

.supplier-summary-right li i{

    transition:.35s;

}

.supplier-summary-right li:hover i{

    color:#fff;

    transform:scale(1.15);

}

/*=========================================
BUTTON
=========================================*/

.supplier-process-btn{

    position:relative;

    overflow:hidden;

    transition:.35s;

}

.supplier-process-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.8s;

}

.supplier-process-btn:hover{

    background:#fff;

    color:#0D5CAB;

    transform:translateY(-4px);

    box-shadow:

    0 20px 45px rgba(0,0,0,.15);

}

.supplier-process-btn:hover::before{

    left:120%;

}

.supplier-process-btn i{

    transition:.35s;

}

.supplier-process-btn:hover i{

    transform:translateX(6px);

}

/*=========================================
READY
=========================================*/

.supplier-process-card,

.supplier-process-btn,

.supplier-process-icon{

    will-change:transform;

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.supplier-process-card:hover{

    transform:translateY(-6px);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:768px){

.supplier-process-card:hover,

.supplier-process-btn:hover{

    transform:none;

}

.supplier-summary-right li:hover{

    transform:none;

}

}

























































/*=========================================
PRIVACY POLICY
=========================================*/

.privacy-section{

    padding:50px 0;

    background:#fff;

}

.privacy-header{

    text-align:center;

    margin-bottom:60px;

}

.privacy-content{

    max-width:900px;

    margin:auto;

}

.privacy-content h2{

    font-size:1.6rem;

    color:#0F172A;

    margin:45px 0 20px;

    font-weight:700;

}

.privacy-content p{

    color:#000000;

    line-height:2;

    margin-bottom:20px;

    font-size:16px;

}

.privacy-content ul{

    margin:20px 0 35px 22px;

}

.privacy-content li{

    color:#000000;

    line-height:2;

    margin-bottom:8px;

}

.privacy-content strong{

    color:#0D5CAB;

}

@media(max-width:768px){

.privacy-section{

    padding:70px 0;

}

.privacy-content h2{

    font-size:1.4rem;

}

}

@media(max-width:480px){

.privacy-content h2{

    font-size:1.3rem;

}

.privacy-content p,

.privacy-content li{

    font-size:15px;

}

}








































/*==================================================
CERTIFICATE SECTION
PART 2A
LAYOUT + RESPONSIVE CSS
==================================================*/

/*=========================================
SECTION
=========================================*/

.common-certificate-section{

    position:relative;

    padding:110px 0;

    background:#F8FBFD;

    overflow:hidden;

}

.common-certificate-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    left:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(13,92,171,.06),
    transparent 70%);

}

.common-certificate-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,183,3,.10),
    transparent 70%);

}

/*=========================================
HEADING
=========================================*/

.common-certificate-heading{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

/*=========================================
FEATURED
=========================================*/

.common-certificate-featured{

    display:grid;

    grid-template-columns:480px 1fr;

    gap:70px;

    align-items:center;

    margin-bottom:90px;

}

.common-certificate-featured-image{

    position:relative;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    padding:18px;

    border:1px solid #E6EEF7;

}

.common-certificate-featured-image img{

    width:100%;

    display:block;

    border-radius:18px;

}

.common-certificate-featured-content span{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:50px;

    background:#EEF6FF;

    color:#0D5CAB;

    font-weight:600;

    margin-bottom:22px;

}

.common-certificate-featured-content h3{

    font-size:2.4rem;

    line-height:1.1;

    margin-bottom:22px;

    color:#0F172A;
    font-weight:700;

}

.common-certificate-featured-content p{

    color:#000000;

    line-height:1.9;

    margin-bottom:35px;

}

.common-certificate-featured-content ul{

    list-style:none;

    padding:0;

    margin:0;

}

.common-certificate-featured-content li{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    color:#334155;

}

.common-certificate-featured-content li i{

    color:#16A34A;

}

/*=========================================
GRID
=========================================*/

.common-certificate-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    margin-bottom:90px;

}

/*=========================================
CARD
=========================================*/

.common-certificate-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #E6EEF7;

}

.common-certificate-image{

    padding:18px;

}

.common-certificate-image img{

    width:100%;

    display:block;

    border-radius:18px;

}

.common-certificate-content{

    padding:0 28px 30px;

}

.common-certificate-content h4{

    font-size:1.7rem;
    font-weight:600;

    color:#0F172A;

    /*margin-bottom:12px;*/

}

.common-certificate-content p{

    color:#000000;

    line-height:1.8;

}

/*=========================================
BOTTOM
=========================================*/

.common-certificate-bottom{

    display:grid;

    grid-template-columns:1fr 420px;

    gap:60px;

    align-items:center;

    margin-bottom:90px;

}

.common-certificate-bottom-content h3{

    font-size:2.1rem;
    font-weight:700;

    margin-bottom:22px;

    color:#0F172A;

}

.common-certificate-bottom-content p{

    line-height:1.6;

    color:#000000;
    text-align:justify;

}

.common-certificate-points{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

.common-certificate-point{

    display:flex;

    align-items:center;

    gap:18px;

    padding:18px 22px;

    background:#fff;

    border-radius:18px;

    border:1px solid #E6EEF7;

}

.common-certificate-point i{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#EEF6FF;

    color:#0D5CAB;

    display:flex;

    align-items:center;

    justify-content:center;

}

.common-certificate-point span{

    font-weight:600;

    color:#1E293B;

}

/*=========================================
CTA
=========================================*/

.common-certificate-cta{

    padding:70px 50px;

    background:#0D5CAB;

    border-radius:28px;

    text-align:center;

}

.common-certificate-cta h3{

    font-size:42px;

    color:#fff;

    margin-bottom:18px;

}

.common-certificate-cta p{

    max-width:700px;

    margin:0 auto 35px;

    color:rgba(255,255,255,.82);

    line-height:1.9;

}

.common-certificate-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 38px;

    border-radius:50px;

    background:#FFB703;

    color:#fff;

    text-decoration:none;

    font-weight:600;

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

.common-certificate-featured{

    grid-template-columns:420px 1fr;

    gap:50px;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.common-certificate-section{

    padding:90px 0;

}

.common-certificate-featured{

    grid-template-columns:1fr;

}

.common-certificate-featured-image{

    max-width:600px;

    margin:auto;

}

.common-certificate-grid{

    grid-template-columns:repeat(2,1fr);

}

.common-certificate-bottom{

    grid-template-columns:1fr;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-certificate-section{

    padding:70px 0;

}

.common-certificate-heading{

    margin-bottom:60px;

}

.common-certificate-featured{

    gap:40px;

    margin-bottom:70px;

}

.common-certificate-featured-content{

    text-align:center;

}

.common-certificate-featured-content h3{

    font-size:25pxpx;
    font-weight:700;

}

.common-certificate-featured-content li{

    justify-content:center;

}

.common-certificate-grid{

    grid-template-columns:1fr;

    gap:28px;

    margin-bottom:70px;

}

.common-certificate-content{

    text-align:center;

}

.common-certificate-bottom{

    gap:40px;

    margin-bottom:70px;

}

.common-certificate-bottom-content{

    text-align:center;

}

.common-certificate-cta{

    padding:45px 25px;

}

.common-certificate-cta h3{

    font-size:30px;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.common-certificate-featured-content h3{

    font-size:22px;

}

.common-certificate-content{

    padding:0 20px 25px;

}

.common-certificate-content h4{

    font-size:1.5;

}

.common-certificate-bottom-content h3{

    font-size:28px;

}

.common-certificate-point{

    padding:16px;

}

.common-certificate-point i{

    width:45px;

    height:45px;

}

.common-certificate-cta h3{

    font-size:26px;

}

.common-certificate-btn{

    width:100%;

    justify-content:center;

}

}

/*==================================================
CERTIFICATE SECTION
PART 2B
PREMIUM STYLING
==================================================*/

/*=========================================
FEATURED IMAGE
=========================================*/

.common-certificate-featured-image{

    box-shadow:
    0 25px 70px rgba(15,35,68,.08);

    transition:.45s ease;

}

.common-certificate-featured-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        135deg,
        rgba(13,92,171,.04),
        rgba(255,183,3,.05)
    );

    opacity:0;

    transition:.4s;

    z-index:2;

    pointer-events:none;

}

.common-certificate-featured-image:hover{

    transform:translateY(-10px);

    box-shadow:
    0 35px 90px rgba(15,35,68,.15);

}

.common-certificate-featured-image:hover::before{

    opacity:1;

}

.common-certificate-featured-image img{

    transition:.6s ease;

}

.common-certificate-featured-image:hover img{

    transform:scale(1.04);

}

/*=========================================
FEATURED CONTENT
=========================================*/

.common-certificate-featured-content span{

    position:relative;

    overflow:hidden;

}

.common-certificate-featured-content span::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.7),
        transparent
    );

    transform:translateX(-120%);

}

.common-certificate-featured:hover
.common-certificate-featured-content span::before{

    transition:.8s;

    transform:translateX(120%);

}

/*=========================================
CARDS
=========================================*/

.common-certificate-card{

    position:relative;

    isolation:isolate;

    transition:.45s ease;

    box-shadow:
    0 12px 35px rgba(15,35,68,.05);

}

.common-certificate-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:

    linear-gradient(
        90deg,
        #0D5CAB,
        #FFB703
    );

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.common-certificate-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 30px 80px rgba(15,35,68,.12);

}

.common-certificate-card:hover::before{

    transform:scaleX(1);

}

/*=========================================
IMAGE
=========================================*/

.common-certificate-image{

    overflow:hidden;

}

.common-certificate-image img{

    transition:.7s ease;

}

.common-certificate-card:hover img{

    transform:scale(1.06);

}

/*=========================================
SHINE
=========================================*/

.common-certificate-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.common-certificate-card .shine::before{

    content:"";

    position:absolute;

    left:-120%;

    top:-40%;

    width:45%;

    height:220%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.45),
        transparent
    );

    transform:rotate(22deg);

}

.common-certificate-card:hover .shine::before{

    left:170%;

    transition:1s;

}

/*=========================================
CONTENT
=========================================*/

.common-certificate-content h4{

    transition:.35s;

}

.common-certificate-card:hover h4{

    color:#0D5CAB;

}

.common-certificate-content p{

    transition:.35s;

}

/*=========================================
POINTS
=========================================*/

.common-certificate-point{

    transition:.35s ease;

}

.common-certificate-point:hover{

    transform:translateX(8px);

    box-shadow:
    0 15px 35px rgba(13,92,171,.08);

}

.common-certificate-point i{

    transition:.35s;

}

.common-certificate-point:hover i{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-12deg) scale(1.08);

}

/*=========================================
CTA
=========================================*/

.common-certificate-cta{

    position:relative;

    overflow:hidden;

}

.common-certificate-cta::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    right:-180px;

    top:-180px;

    background:

    radial-gradient(
        circle,
        rgba(255,255,255,.08),
        transparent 70%
    );

}

.common-certificate-btn{

    transition:.35s ease;

    box-shadow:
    0 12px 30px rgba(255,183,3,.35);

}

.common-certificate-btn:hover{

    transform:translateY(-5px);

    background:#FFA000;

    box-shadow:
    0 20px 45px rgba(255,183,3,.45);

}

/*=========================================
BACKGROUND SHAPES
=========================================*/

.common-certificate-section::before{

    animation:certificateShapeOne 9s ease-in-out infinite;

}

.common-certificate-section::after{

    animation:certificateShapeTwo 11s ease-in-out infinite;

}

@keyframes certificateShapeOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(30px);

    }

}

@keyframes certificateShapeTwo{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-35px);

    }

}

/*=========================================
FLOATING FEATURED
=========================================*/

.common-certificate-featured-image{

    animation:certificateFloat 6s ease-in-out infinite;

}

@keyframes certificateFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*=========================================
READY FOR GSAP
=========================================*/

.common-certificate-heading,
.common-certificate-featured,
.common-certificate-card,
.common-certificate-point,
.common-certificate-cta{

    will-change:transform,opacity;

    backface-visibility:hidden;

    transform:translateZ(0);

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-certificate-card:hover{

    transform:translateY(-6px);

}

.common-certificate-point:hover{

    transform:none;

}

.common-certificate-featured-image{

    animation:none;

}

}/*=========================================
WATERMARK
=========================================*/

.common-certificate-watermark{

    position:absolute;

    top:60px;

    left:-30px;

    font-size:140px;

    font-weight:900;

    letter-spacing:8px;

    color:#0D5CAB;

    opacity:.035;

    user-select:none;

    pointer-events:none;

    text-transform:uppercase;

    line-height:1;

    z-index:0;

}

.common-certificate-watermark-two{

    position:absolute;

    right:-20px;

    bottom:120px;

    font-size:120px;

    font-weight:900;

    letter-spacing:10px;

    color:#FFB703;

    opacity:.035;

    transform:rotate(-90deg);

    transform-origin:right bottom;

    user-select:none;

    pointer-events:none;

    text-transform:uppercase;

    z-index:0;

}

.common-certificate-section>.container{

    position:relative;

    z-index:5;

}.common-certificate-section::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(circle at 1px 1px,

    rgba(13,92,171,.06) 1px,

    transparent 0);

    background-size:34px 34px;

    opacity:.35;

    pointer-events:none;

}






















/*==================================================
ABOUT HERO
PART 2A
LAYOUT + RESPONSIVE CSS
==================================================*/

/*=========================================
HERO
=========================================*/

.common-about-hero{

    position:relative;

    overflow:hidden;

    min-height:850px;

    display:flex;

    align-items:center;

    padding:120px 0 70px;

    isolation:isolate;

}

/*=========================================
BACKGROUND
=========================================*/

.common-about-hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:fill;

    z-index:-3;

}

/*=========================================
OVERLAY
=========================================*/

.common-about-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(5,24,48,.88) 0%,

        rgba(5,24,48,.70) 42%,

        rgba(5,24,48,.45) 65%,

        rgba(5,24,48,.18) 100%

    );

    z-index:-2;

}

/*=========================================
WATERMARK
=========================================*/

.common-about-watermark{

    position:absolute;

    top:70px;

    left:-40px;

    font-size:150px;

    font-weight:900;

    color:#fff;

    opacity:.04;

    line-height:1;

    letter-spacing:10px;

    user-select:none;

    pointer-events:none;

    z-index:-1;

}

.common-about-watermark-two{

    position:absolute;

    right:-80px;

    bottom:120px;

    font-size:120px;

    font-weight:900;

    color:#FFB703;

    opacity:.05;

    transform:rotate(-90deg);

    letter-spacing:8px;

    user-select:none;

    pointer-events:none;

    z-index:-1;

}

/*=========================================
WRAPPER
=========================================*/

.common-about-hero-wrapper{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:70px;

    align-items:center;

}

/*=========================================
LEFT CONTENT
=========================================*/

.common-about-content{

    color:#fff;

}

/*=========================================
BREADCRUMB
=========================================*/

.common-about-breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:28px;

}

.common-about-breadcrumb li{

    list-style:none;

    color:rgba(255,255,255,.75);

}

.common-about-breadcrumb a{

    color:#fff;

    text-decoration:none;

}

/*=========================================
BADGE
=========================================*/

.common-about-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    color:#fff;

    margin-bottom:28px;

}

.common-about-badge i{

    color:#FFB703;

}

/*=========================================
TITLE
=========================================*/

.common-about-content h1{

    font-size:66px;

    line-height:1.12;

    font-weight:800;

    color:#fff;

    margin-bottom:28px;

}

.common-about-content h1 span{

    display:block;

    color:#FFB703;

}

/*=========================================
TEXT
=========================================*/

.common-about-content p{

    max-width:700px;

    line-height:2;

    font-size:17px;

    color:rgba(255,255,255,.86);

    margin-bottom:40px;

}

/*=========================================
BUTTONS
=========================================*/

.common-about-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.common-about-btn,

.common-about-outline-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

}

.common-about-btn{

    background:#FFB703;

    color:#fff;

}

.common-about-outline-btn{

    border:2px solid rgba(255,255,255,.3);

    color:#fff;

}

/*=========================================
RIGHT SIDE
=========================================*/

.common-about-side{

    display:flex;

    flex-direction:column;

    gap:30px;

}

/*=========================================
COMPANY CARD
=========================================*/

.common-about-company-card{

    padding:40px;

    border-radius:28px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(18px);

}

.common-about-company-card span{

    display:inline-block;

    color:#FFB703;

    margin-bottom:16px;

    font-weight:600;

}

.common-about-company-card h3{

    color:#fff;

    font-size:36px;

    margin-bottom:18px;

}

.common-about-company-card p{

    color:rgba(255,255,255,.82);

    line-height:1.9;

}

/*=========================================
STATS
=========================================*/

.common-about-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.common-about-stat-card{

    padding:30px;

    border-radius:24px;

    background:rgba(255,255,255,.10);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.16);

    text-align:center;

}

.common-about-stat-card h2{

    font-size:44px;

    color:#FFB703;

    margin-bottom:10px;

}

.common-about-stat-card span{

    color:#fff;

    line-height:1.7;

}

/*=========================================
TRUST BAR
=========================================*/

.common-about-trust-bar{

    margin-top:80px;

    background:#fff;

    border-radius:24px;

    padding:28px;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.common-about-trust-item{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    text-align:center;

}

.common-about-trust-item i{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#EEF5FF;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#0D5CAB;

}

.common-about-trust-item span{

    color:#1E293B;

    font-weight:600;

}

/*=========================================
SCROLL
=========================================*/

.common-about-scroll{

    position:absolute;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:14px;

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

.common-about-content h1{

    font-size:58px;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.common-about-hero{

    min-height:auto;

    padding:120px 0 80px;

}

.common-about-hero-wrapper{

    grid-template-columns:1fr;

}

.common-about-content{

    text-align:center;

}

.common-about-content p{

    margin-inline:auto;

}

.common-about-buttons{

    justify-content:center;

}

.common-about-company-card{

    text-align:center;

}

.common-about-trust-bar{

    grid-template-columns:repeat(2,1fr);

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-about-hero{

    padding:100px 0 70px;

}

.common-about-content h1{

    font-size:38px;

}

.common-about-content p{

    font-size:15px;

}

.common-about-company-card{

    padding:28px;

}

.common-about-company-card h3{

    font-size:28px;

}

.common-about-stats{

    grid-template-columns:1fr;

}

.common-about-trust-bar{

    grid-template-columns:1fr;

    padding:22px;

}

.common-about-watermark,

.common-about-watermark-two{

    display:none;

}

.common-about-buttons{

    flex-direction:column;

}

.common-about-btn,

.common-about-outline-btn{

    width:100%;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.common-about-content h1{

    font-size:32px;

}

.common-about-badge{

    font-size:13px;

    padding:10px 18px;

}

.common-about-company-card h3{

    font-size:24px;

}

.common-about-stat-card h2{

    font-size:36px;

}

}






/*==================================================
ABOUT HERO
PART 2B
ULTRA PREMIUM STYLING
==================================================*/

/*=========================================
NOISE TEXTURE
=========================================*/

.common-about-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);

    background-size:28px 28px;

    opacity:.18;

    pointer-events:none;

    z-index:-1;

}

/*=========================================
BLUE GLOW
=========================================*/

.common-about-hero::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(13,92,171,.30),

    transparent 72%);

    left:-260px;

    top:-220px;

    filter:blur(90px);

    animation:aboutGlowOne 8s ease-in-out infinite;

    z-index:-1;

}

@keyframes aboutGlowOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(40px);

    }

}

/*=========================================
ORANGE GLOW
=========================================*/

.common-about-overlay::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    right:-160px;

    bottom:-180px;

    background:

    radial-gradient(circle,

    rgba(255,183,3,.28),

    transparent 72%);

    filter:blur(80px);

    animation:aboutGlowTwo 10s ease-in-out infinite;

}

@keyframes aboutGlowTwo{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-45px);

    }

}

/*=========================================
GLASS EFFECT
=========================================*/

.common-about-company-card,

.common-about-stat-card{

    position:relative;

    overflow:hidden;

    box-shadow:

    0 20px 55px rgba(0,0,0,.18);

}

/*=========================================
GLASS SHINE
=========================================*/

.common-about-company-card::before,

.common-about-stat-card::before{

    content:"";

    position:absolute;

    left:-140%;

    top:-40%;

    width:50%;

    height:220%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.40),

    transparent);

    transform:rotate(25deg);

}

.common-about-company-card:hover::before,

.common-about-stat-card:hover::before{

    left:170%;

    transition:1.1s;

}

/*=========================================
CARD HOVER
=========================================*/

.common-about-company-card{

    transition:.45s;

}

.common-about-company-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,183,3,.45);

    box-shadow:

    0 35px 90px rgba(0,0,0,.28);

}

.common-about-stat-card{

    transition:.4s;

}

.common-about-stat-card:hover{

    transform:translateY(-10px);

    background:

    rgba(255,255,255,.16);

}

/*=========================================
TITLE
=========================================*/

.common-about-content h1{

    text-shadow:

    0 10px 35px rgba(0,0,0,.45);

}

/*=========================================
TITLE SPAN
=========================================*/

.common-about-content h1 span{

    background:

    linear-gradient(

    90deg,

    #FFB703,

    #FFD54F,

    #FFB703);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*=========================================
BADGE
=========================================*/

.common-about-badge{

    backdrop-filter:blur(25px);

    transition:.35s;

}

.common-about-badge:hover{

    background:rgba(255,255,255,.20);

    transform:translateY(-4px);

}

/*=========================================
BUTTON
=========================================*/

.common-about-btn{

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:

    0 15px 40px rgba(255,183,3,.35);

}

.common-about-btn::before{

    content:"";

    position:absolute;

    left:-130%;

    top:0;

    width:45%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.55),

    transparent);

    transform:skewX(-25deg);

}

.common-about-btn:hover{

    transform:translateY(-5px);

}

.common-about-btn:hover::before{

    left:170%;

    transition:.8s;

}

/*=========================================
OUTLINE BUTTON
=========================================*/

.common-about-outline-btn{

    transition:.35s;

}

.common-about-outline-btn:hover{

    background:#fff;

    color:#0D5CAB;

    transform:translateY(-5px);

}

/*=========================================
TRUST BAR
=========================================*/

.common-about-trust-bar{

    position:relative;

    overflow:hidden;

}

.common-about-trust-bar::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(13,92,171,.03),

    rgba(255,183,3,.05));

    pointer-events:none;

}

.common-about-trust-item{

    transition:.35s;

}

.common-about-trust-item:hover{

    transform:translateY(-8px);

}

.common-about-trust-item i{

    transition:.35s;

}

.common-about-trust-item:hover i{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-12deg) scale(1.08);

}

/*=========================================
STAT NUMBER
=========================================*/

.common-about-stat-card h2{

    text-shadow:

    0 10px 25px rgba(255,183,3,.30);

}

/*=========================================
SCROLL
=========================================*/

.common-about-scroll{

    animation:scrollBounce 2.2s infinite;

}

@keyframes scrollBounce{

    0%,100%{

        transform:

        translateX(-50%)

        translateY(0);

    }

    50%{

        transform:

        translateX(-50%)

        translateY(12px);

    }

}

/*=========================================
WATERMARK
=========================================*/

.common-about-watermark,

.common-about-watermark-two{

    animation:watermarkFloat 12s linear infinite;

}

@keyframes watermarkFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(18px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================
IMAGE PARALLAX READY
=========================================*/

.common-about-hero-bg{

    will-change:transform;

}

/*=========================================
GSAP READY
=========================================*/

.common-about-content,

.common-about-company-card,

.common-about-stat-card,

.common-about-trust-item,

.common-about-scroll{

    will-change:

    transform,

    opacity;

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-about-company-card:hover,

.common-about-stat-card:hover,

.common-about-trust-item:hover{

    transform:none;

}

.common-about-hero::after{

    width:420px;

    height:420px;

}

.common-about-overlay::before{

    width:320px;

    height:320px;

}

}



















/*==================================================
ABOUT STORY
PART A
LAYOUT + RESPONSIVE
==================================================*/

.common-about-story-section{

    position:relative;

    padding:60px 0 20px 0;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbfd 100%);

}

/*======================================
CONTAINER
======================================*/

.common-about-story-section .container{

    position:relative;

    z-index:5;

}

/*======================================
HEADING
======================================*/

.common-about-story-heading{

    max-width:850px;

    margin:0 auto 90px;

    text-align:center;

}

/*======================================
WRAPPER
======================================*/

.common-about-story-wrapper{

    display:grid;

    grid-template-columns:560px 1fr;

    gap:90px;

    align-items:center;

}

/*======================================
LEFT SIDE
======================================*/

.common-about-story-images{

    position:relative;

}

/*======================================
MAIN IMAGE
======================================*/

.common-about-story-main{

    position:relative;

    border-radius:32px;

    overflow:hidden;

    padding:16px;

    background:#fff;

}

.common-about-story-main img{

    width:100%;

    display:block;

    border-radius:22px;

}

/*======================================
SMALL IMAGE
======================================*/

.common-about-story-small{

    position:absolute;

    width:220px;

    right:-35px;

    bottom:50px;

    padding:10px;

    border-radius:22px;

    background:#fff;

}

.common-about-story-small img{

    width:100%;

    display:block;

    border-radius:16px;

}

/*======================================
EXPERIENCE
======================================*/

.common-about-story-experience{

    position:absolute;

    left:-45px;

    top:55px;

    width:250px;

    padding:20px;

    border-radius:22px;

    background:#0D5CAB;

    color:#fff;

}

.common-about-story-experience h3{

    font-size:17px;
     font-weight: 700;
    margin-bottom:8px;

}

.common-about-story-experience span{

    display:block;
 font-size:14px;
    line-height:1.8;

    color:rgba(255,255,255,.85);

}

/*======================================
RIGHT
======================================*/

.common-about-story-content{

    position:relative;

}

/*======================================
SUBTITLE
======================================*/

.common-about-story-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    border-radius:40px;

    background:#eef6ff;

    color:#0D5CAB;

    font-weight:600;

    margin-bottom:22px;

}

/*======================================
TITLE
======================================*/

.common-about-story-content h3{

    font-size:2.3rem;

    line-height:1.25;

    color:#0f172a;

    margin-bottom:20px;
    font-weight: 700;

}

/*======================================
TEXT
======================================*/

.common-about-story-content>p{

    color:#000000;

    line-height: 1.6;

    margin-bottom:22px;
    text-align: justify;

}

/*======================================
TIMELINE
======================================*/

.common-about-story-timeline{

    display:flex;

    flex-direction:column;

    gap:28px;

    margin-top:45px;

}

/*======================================
ITEM
======================================*/

.common-about-story-item{

    display:flex;

    align-items:flex-start;

    gap:22px;

    

}

/*======================================
ICON
======================================*/

.common-about-story-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF6FF;

    color:#0D5CAB;

    font-size:28px;

}

.common-about-story-item h4{

    font-size:20px;

    color:#0f172a;

    margin-bottom:10px;
    font-weight: 600;

}

.common-about-story-item p{

    margin:0;

    color:#000000;

    line-height:1.5;

}

/*======================================
BUTTON
======================================*/

.common-about-story-btns{

    margin-top:45px;

}

.common-about-story-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 34px;

    border-radius:60px;

    text-decoration:none;

    background:#0D5CAB;

    color:#fff;

    font-weight:600;

}

/*======================================
LAPTOP
======================================*/

@media(max-width:1200px){

.common-about-story-wrapper{

    grid-template-columns:480px 1fr;

    gap:70px;

}

.common-about-story-content h3{

    font-size:2.2rem;

}

}

/*======================================
TABLET
======================================*/

@media(max-width:991px){

.common-about-story-section{

    padding:40px 0;

}

.common-about-story-wrapper{

    grid-template-columns:1fr;

    gap:70px;

}

.common-about-story-images{

    max-width:650px;

    margin:auto;

}

.common-about-story-content{

    text-align:center;

}

.common-about-story-content>p{

    max-width:720px;

    margin-inline:auto;

}

.common-about-story-item{

    text-align:left;

}

.common-about-story-btns{

    display:flex;

    justify-content:center;

}

}

/*======================================
MOBILE
======================================*/

@media(max-width:767px){
.common-about-story-item::before{
    display: none;

}


.common-about-story-experience{
    display: none;
}
.common-about-story-section{

    padding:40px 0;

}

.common-about-story-heading{

    margin-bottom:60px;

}

.common-about-story-content h3{

    font-size:1.9rem;
    text-align: left;

}

.common-about-story-small{

    position:relative;

    width:170px;

    right:auto;

    bottom:auto;

    margin:-45px auto 0;

}

.common-about-story-experience{

    position:relative;

    left:auto;

    top:auto;

    width:100%;

    margin-top:25px;

}

.common-about-story-item{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.common-about-story-btn{

    width:100%;

}

}

/*======================================
SMALL MOBILE
======================================*/

@media(max-width:480px){

.common-about-story-content h3{

    font-size:1.8rem;

}

.common-about-story-main{

    padding:10px;

}

.common-about-story-small{

    width:140px;

}

.common-about-story-icon{

    width:60px;

    height:60px;

    min-width:60px;

    font-size:22px;

}

.common-about-story-item h4{

    font-size:21px;

}

.common-about-story-experience{

    padding:22px;

}

}

/*==================================================
ABOUT STORY
PART B
ULTRA PREMIUM STYLING
==================================================*/

/*=========================================
WATERMARK
=========================================*/

.common-about-story-section::before{

    content:"OUR STORY";

    position:absolute;

    top:40px;

    left:-20px;

    font-size:150px;

    font-weight:900;

    letter-spacing:8px;

    color:#0D5CAB;

    opacity:.03;

    line-height:1;

    pointer-events:none;

    user-select:none;

}

.common-about-story-section::after{

    content:"TRANSTAKE";

    position:absolute;

    right:-120px;

    bottom:140px;

    transform:rotate(-90deg);

    font-size:120px;

    font-weight:900;

    letter-spacing:10px;

    color:#FFB703;

    opacity:.04;

    pointer-events:none;

    user-select:none;

}

/*=========================================
BACKGROUND SHAPES
=========================================*/

.common-about-story-section{

    isolation:isolate;

}

.common-about-story-section .container::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-220px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(13,92,171,.08),

    transparent 70%);

    filter:blur(30px);

    animation:storyGlowOne 8s ease-in-out infinite;

    z-index:-1;

}

.common-about-story-section .container::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    right:-150px;

    bottom:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(255,183,3,.10),

    transparent 70%);

    filter:blur(25px);

    animation:storyGlowTwo 10s ease-in-out infinite;

    z-index:-1;

}

/*=========================================
MAIN IMAGE
=========================================*/

.common-about-story-main{

    transition:.5s;

    box-shadow:

    0 25px 70px rgba(15,35,68,.08);

}

.common-about-story-main:hover{

    transform:

    translateY(-12px)

    rotate(-1deg);

    box-shadow:

    0 45px 100px rgba(15,35,68,.18);

}

.common-about-story-main img{

    transition:.8s;

}

.common-about-story-main:hover img{

    transform:scale(1.06);

}

/*=========================================
IMAGE OVERLAY
=========================================*/

.common-about-story-main::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(13,92,171,.05),

    rgba(255,183,3,.08));

    opacity:0;

    transition:.4s;

    z-index:2;

}

.common-about-story-main:hover::before{

    opacity:1;

}

/*=========================================
SHINE
=========================================*/

.common-about-story-main .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:5;

    pointer-events:none;

}

.common-about-story-main .shine::before{

    content:"";

    position:absolute;

    top:-50%;

    left:-120%;

    width:45%;

    height:220%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.55),

    transparent);

    transform:rotate(25deg);

}

.common-about-story-main:hover .shine::before{

    left:180%;

    transition:1s;

}

/*=========================================
SMALL IMAGE
=========================================*/

.common-about-story-small{

    transition:.45s;

    box-shadow:

    0 18px 45px rgba(15,35,68,.10);

}

.common-about-story-small:hover{

    transform:

    translateY(-12px)

    rotate(4deg);

}

.common-about-story-small img{

    transition:.6s;

}

.common-about-story-small:hover img{

    transform:scale(1.08);

}

/*=========================================
EXPERIENCE CARD
=========================================*/

.common-about-story-experience{

    overflow:hidden;

    transition:.45s;

}

.common-about-story-experience::before{

    content:"";

    position:absolute;

    top:-30%;

    left:-130%;

    width:45%;

    height:220%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.35),

    transparent);

    transform:rotate(25deg);

}

.common-about-story-experience:hover{

    transform:translateY(-10px);

}

.common-about-story-experience:hover::before{

    left:170%;

    transition:1s;

}

/*=========================================
SUBTITLE
=========================================*/

.common-about-story-subtitle{

    position:relative;

    overflow:hidden;

}

.common-about-story-subtitle::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.7),

    transparent);

    transform:translateX(-120%);

}

.common-about-story-content:hover

.common-about-story-subtitle::before{

    transform:translateX(120%);

    transition:.8s;

}

/*=========================================
TITLE
=========================================*/

.common-about-story-content h3::after{

    content:"";

    display:block;

    width:120px;

    height:5px;

    margin-top:18px;

    border-radius:50px;

    background:

    linear-gradient(

    90deg,

    #0D5CAB,

    #FFB703);

}

/*=========================================
TIMELINE
=========================================*/

.common-about-story-item{

    position:relative;

    transition:.4s;

}

.common-about-story-item::before{

    content:"";

    position:absolute;

    left:35px;

    top:72px;

    width:2px;

    height:calc(100% + 28px);

    background:

    linear-gradient(

    #0D5CAB,

    rgba(13,92,171,.08));

}

.common-about-story-item:last-child::before{

    display:none;

}

.common-about-story-item:hover{

    transform:translateX(10px);

}

/*=========================================
ICON
=========================================*/

.common-about-story-icon{

    position:relative;

    transition:.4s;

}

.common-about-story-icon::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:24px;

    border:2px dashed rgba(13,92,171,.20);

    animation:rotateBorder 12s linear infinite;

}

.common-about-story-item:hover .common-about-story-icon{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-8deg);

}

/*=========================================
BUTTON
=========================================*/

.common-about-story-btn{

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:

    0 18px 45px rgba(13,92,171,.25);

}

.common-about-story-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.5),

    transparent);

    transform:skewX(-25deg);

}

.common-about-story-btn:hover{

    transform:translateY(-6px);

    box-shadow:

    0 25px 55px rgba(13,92,171,.35);

}

.common-about-story-btn:hover::before{

    left:170%;

    transition:.8s;

}

/*=========================================
NOISE TEXTURE
=========================================*/

.common-about-story-main::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(

    rgba(255,255,255,.06) 1px,

    transparent 1px);

    background-size:22px 22px;

    pointer-events:none;

    opacity:.25;

}

/*=========================================
ANIMATIONS
=========================================*/

@keyframes storyGlowOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(35px);

    }

}

@keyframes storyGlowTwo{

    0%,100%{

        transform:translateX(0);

    }

    50%{

        transform:translateX(-35px);

    }

}

@keyframes rotateBorder{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================
FLOAT
=========================================*/

.common-about-story-main{

    animation:storyFloat 6s ease-in-out infinite;

}

@keyframes storyFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

/*=========================================
GSAP READY
=========================================*/

.common-about-story-heading,
.common-about-story-main,
.common-about-story-small,
.common-about-story-content,
.common-about-story-item,
.common-about-story-btn{

    will-change:transform,opacity;

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-about-story-main{

    animation:none;

}

.common-about-story-item:hover{

    transform:none;

}

.common-about-story-small:hover{

    transform:none;

}

.common-about-story-section::before,

.common-about-story-section::after{

    display:none;

}

}



/*==================================================
WHO WE ARE
PART A
LAYOUT + RESPONSIVE
==================================================*/

/*=========================================
SECTION
=========================================*/

.common-about-who-section{

    position:relative;

    overflow:hidden;

    padding:50px 0;

    background:
    linear-gradient(
    180deg,
    #F8FBFD 0%,
    #ffffff 100%);

}

/*=========================================
CONTAINER
=========================================*/

.common-about-who-section .container{

    position:relative;

    z-index:5;

}

/*=========================================
HEADING
=========================================*/

.common-about-who-heading{

    max-width:820px;

    margin:0 auto 90px;

    text-align:center;

}

/*=========================================
WRAPPER
=========================================*/

.common-about-who-wrapper{

    display:grid;

    grid-template-columns:1fr 540px;

    gap:90px;

    align-items:center;

}

/*=========================================
LEFT CONTENT
=========================================*/

.common-about-who-content{

    position:relative;

}

/*=========================================
SUBTITLE
=========================================*/

.common-about-who-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:50px;

    background:#EEF6FF;

    color:#0D5CAB;

    font-weight:600;

    margin-bottom:24px;

}

/*=========================================
TITLE
=========================================*/

.common-about-who-content h3{

    font-size:2.4rem;

    line-height:1.1;

    color:#0F172A;
font-weight: 700;
    margin-bottom:28px;

}

/*=========================================
TEXT
=========================================*/

.common-about-who-content>p{

    color:#000000;

    line-height:1.5;
text-align: justify;
    margin-bottom:20px;

}

/*=========================================
GRID
=========================================*/

.common-about-who-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:24px;

    margin:25px 0;

}

/*=========================================
CARD
=========================================*/

.common-about-who-card{

    position:relative;

    padding:20px;

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid #E8EEF5;

}



/*=========================================
ICON
=========================================*/

.common-about-who-icon{

    width:40px;

    height:40px;

    border-radius:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EEF6FF;

    color:#0D5CAB;

    font-size:18px;

    margin-bottom:22px;

}

.common-about-who-card h4{

    font-size:18px;

    color:#0F172A;
    font-weight: 600;

    /* margin-bottom:12px; */

}

.common-about-who-card p{

    color:#000000;

    line-height:1.4;

    margin:0;

}

/*=========================================
BUTTON
=========================================*/

.common-about-who-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 36px;

    border-radius:60px;

    background:#0D5CAB;

    color:#fff;

    text-decoration:none;

    font-weight:600;

}

/*=========================================
IMAGE
=========================================*/

.common-about-who-image{

    position:relative;

    border-radius:32px;

    overflow:hidden;

    background:#fff;

    padding:16px;

}

.common-about-who-image img{

    width:100%;

    display:block;

    border-radius:22px;

}

/*=========================================
FLOATING CARD
=========================================*/

.common-about-floating-card{

    position:absolute;

    left:-35px;

    bottom:60px;

    display:flex;

    align-items:center;

    gap:18px;

    width:290px;

    padding:24px;

    border-radius:22px;

    background:#fff;

}

.common-about-floating-card i{

    width:60px;

    height:60px;

    min-width:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EEF6FF;

    color:#0D5CAB;

    font-size:24px;

}

.common-about-floating-card h4{

    font-size:22px;

    color:#0F172A;

    margin-bottom:6px;

}

.common-about-floating-card span{

    color:#000000;

    font-size:15px;

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

.common-about-who-wrapper{

    gap:60px;

    grid-template-columns:1fr 470px;

}

.common-about-who-content h3{

    font-size:2.1rem;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.common-about-who-section{

    padding:50px 0;

}

.common-about-who-wrapper{

    grid-template-columns:1fr;

    gap:70px;

}

.common-about-who-image{

    order:-1;

    max-width:650px;

    margin:auto;

}

.common-about-who-content{

    text-align:center;

}

.common-about-who-content>p{

    max-width:720px;

    margin-inline:auto;

}

.common-about-who-grid{

    text-align:left;

}

.common-about-who-btn{

    margin:auto;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-about-who-section{

    padding:50px 0;

}

.common-about-who-heading{

    margin-bottom:60px;

}

.common-about-who-content h3{

    font-size:1.8rem;

}

.common-about-who-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.common-about-who-card:nth-child(2),

.common-about-who-card:nth-child(3){

    margin-top:0;

}

.common-about-floating-card{

    position:relative;

    left:auto;

    bottom:auto;

    width:100%;

    margin-top:25px;
    display: none;

}

.common-about-who-btn{

    width:100%;

}

.common-about-who-content{

    text-align:center;

}

.common-about-who-card{

    text-align:center;

}

.common-about-who-icon{

    margin-inline:auto;

}

.common-about-who-watermark,

.common-about-who-watermark-two{

    display:none;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.common-about-who-content h3{

    font-size:1.8rem;

}

.common-about-who-image{

    padding:10px;

}

.common-about-who-card{

    padding:24px;

}

.common-about-who-icon{

    width:60px;

    height:60px;

    font-size:24px;

}

.common-about-floating-card{

    padding:20px;

}

.common-about-floating-card h4{

    font-size:20px;

}

}


/*==================================================
WHO WE ARE
PART B
ULTRA PREMIUM STYLING
==================================================*/

/*=========================================
SECTION GLOW
=========================================*/

.common-about-who-section::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    left:-260px;

    top:-200px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,92,171,.10),
    transparent 72%);

    filter:blur(40px);

    animation:whoGlowOne 9s ease-in-out infinite;

}

.common-about-who-section::after{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    right:-180px;

    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,183,3,.12),
    transparent 72%);

    filter:blur(35px);

    animation:whoGlowTwo 11s ease-in-out infinite;

}

/*=========================================
WATERMARK
=========================================*/

.common-about-who-watermark{

    position:absolute;

    left:-20px;

    top:60px;

    font-size:170px;

    font-weight:900;

    color:#0D5CAB;

    opacity:.03;

    line-height:1;

    letter-spacing:8px;

    pointer-events:none;

    user-select:none;

}

.common-about-who-watermark-two{

    position:absolute;

    right:-110px;

    bottom:150px;

    transform:rotate(-90deg);

    font-size:130px;

    font-weight:900;

    color:#FFB703;

    opacity:.04;

    letter-spacing:10px;

    pointer-events:none;

    user-select:none;

}

/*=========================================
IMAGE BOX
=========================================*/

.common-about-who-image{

    box-shadow:

    0 30px 80px rgba(15,35,68,.10);

    transition:.5s;

}

.common-about-who-image:hover{

    transform:

    translateY(-12px)

    rotate(-1deg);

    box-shadow:

    0 45px 100px rgba(15,35,68,.18);

}

.common-about-who-image img{

    transition:.8s;

}

.common-about-who-image:hover img{

    transform:scale(1.06);

}

/*=========================================
IMAGE OVERLAY
=========================================*/

.common-about-who-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(135deg,

    rgba(13,92,171,.05),

    rgba(255,183,3,.08));

    opacity:0;

    transition:.45s;

    z-index:2;

}

.common-about-who-image:hover::before{

    opacity:1;

}

/*=========================================
SHINE
=========================================*/

.common-about-who-image .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:5;

}

.common-about-who-image .shine::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-130%;

    width:45%;

    height:220%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.55),

    transparent);

    transform:rotate(25deg);

}

.common-about-who-image:hover .shine::before{

    left:180%;

    transition:1s;

}

/*=========================================
FLOAT CARD
=========================================*/

.common-about-floating-card{

    overflow:hidden;

    box-shadow:

    0 25px 70px rgba(15,35,68,.14);

    transition:.45s;

}

.common-about-floating-card::before{

    content:"";

    position:absolute;

    left:-120%;

    top:-30%;

    width:45%;

    height:220%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.45),

    transparent);

    transform:rotate(25deg);

}

.common-about-floating-card:hover{

    transform:translateY(-8px);

}

.common-about-floating-card:hover::before{

    left:180%;

    transition:1s;

}

/*=========================================
SUBTITLE
=========================================*/

.common-about-who-subtitle{

    position:relative;

    overflow:hidden;

}

.common-about-who-subtitle::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.7),

    transparent);

    transform:translateX(-120%);

}

.common-about-who-content:hover

.common-about-who-subtitle::before{

    transform:translateX(120%);

    transition:.8s;

}

/*=========================================
TITLE
=========================================*/

.common-about-who-content h3::after{

    content:"";

    display:block;

    width:120px;

    height:5px;

    margin-top:20px;

    border-radius:50px;

    background:

    linear-gradient(

    90deg,

    #0D5CAB,

    #FFB703);

}

/*=========================================
CARDS
=========================================*/

.common-about-who-card{

    transition:.45s;

    box-shadow:

    0 18px 45px rgba(15,35,68,.06);

}

.common-about-who-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:

    linear-gradient(

    180deg,

    #0D5CAB,

    #FFB703);

    transition:.4s;

}

.common-about-who-card:hover{

    transform:

    translateY(-12px);

    box-shadow:

    0 30px 70px rgba(15,35,68,.14);

}

.common-about-who-card:hover::before{

    height:100%;

}

/*=========================================
CARD SHINE
=========================================*/

.common-about-who-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.common-about-who-card .shine::before{

    content:"";

    position:absolute;

    left:-140%;

    top:-40%;

    width:40%;

    height:220%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.55),

    transparent);

    transform:rotate(25deg);

}

.common-about-who-card:hover .shine::before{

    left:180%;

    transition:1s;

}

/*=========================================
ICON
=========================================*/

.common-about-who-icon{

    position:relative;

    transition:.35s;

}

.common-about-who-icon::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:24px;

    border:2px dashed rgba(13,92,171,.18);

    animation:rotateWho 12s linear infinite;

}

.common-about-who-card:hover .common-about-who-icon{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-10deg);

}

/*=========================================
BUTTON
=========================================*/

.common-about-who-btn{

    position:relative;

    overflow:hidden;

    box-shadow:

    0 18px 50px rgba(13,92,171,.28);

    transition:.35s;

}

.common-about-who-btn::before{

    content:"";

    position:absolute;

    left:-130%;

    top:0;

    width:45%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.55),

    transparent);

    transform:skewX(-25deg);

}

.common-about-who-btn:hover{

    transform:translateY(-6px);

}

.common-about-who-btn:hover::before{

    left:170%;

    transition:.8s;

}

/*=========================================
NOISE
=========================================*/

.common-about-who-image::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

    radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);

    background-size:22px 22px;

    pointer-events:none;

    opacity:.25;

}

/*=========================================
FLOAT
=========================================*/

.common-about-who-image{

    animation:whoFloat 6s ease-in-out infinite;

}

@keyframes whoFloat{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/*=========================================
BACKGROUND ANIMATION
=========================================*/

@keyframes whoGlowOne{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(35px);

}

}

@keyframes whoGlowTwo{

0%,100%{

transform:translateX(0);

}

50%{

transform:translateX(-35px);

}

}

@keyframes rotateWho{

from{

transform:rotate(0);

}

to{

transform:rotate(360deg);

}

}

/*=========================================
GSAP READY
=========================================*/

.common-about-who-heading,
.common-about-who-content,
.common-about-who-card,
.common-about-who-image,
.common-about-floating-card,
.common-about-who-btn{

will-change:transform,opacity;

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-about-who-image{

animation:none;

}

.common-about-who-card:hover,

.common-about-floating-card:hover,

.common-about-who-image:hover{

transform:none;

}

.common-about-who-watermark,

.common-about-who-watermark-two{

display:none;

}

}



/*==================================================
VISION • MISSION
PART 2A
LAYOUT + RESPONSIVE
==================================================*/

/*=========================================
SECTION
=========================================*/

.common-about-purpose-section{

    position:relative;

    overflow:hidden;

    padding:60px 0 70px 0;

    background:linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbfd 100%);

}

/*=========================================
CONTAINER
=========================================*/

.common-about-purpose-section .container{

    position:relative;

    z-index:5;

}

/*=========================================
WATERMARK
=========================================*/

.common-about-purpose-watermark{

    position:absolute;

    top:60px;

    left:-40px;

    font-size:170px;

    font-weight:900;

    line-height:1;

    letter-spacing:8px;

    color:#0D5CAB;

    opacity:.03;

    user-select:none;

    pointer-events:none;

}

.common-about-purpose-watermark-two{

    position:absolute;

    right:-120px;

    bottom:150px;

    transform:rotate(-90deg);

    font-size:130px;

    font-weight:900;

    letter-spacing:8px;

    color:#FFB703;

    opacity:.04;

    user-select:none;

    pointer-events:none;

}

/*=========================================
HEADING
=========================================*/

.common-about-purpose-heading{

    max-width:850px;

    margin:0 auto 90px;

    text-align:center;

}

/*=========================================
WRAPPER
=========================================*/

.common-about-purpose-wrapper{

    display:grid;

    grid-template-columns:1fr 280px 1fr;

    gap:45px;

    align-items:center;

    margin-bottom:90px;

}

/*=========================================
CARDS
=========================================*/

.common-about-purpose-card{

    position:relative;

    padding:45px;

    background:#fff;

    border-radius:30px;

    border:1px solid #E8EEF5;

}

.common-purpose-left{

    text-align:right;

}

.common-purpose-right{

    text-align:left;

}

/*=========================================
ICON
=========================================*/

.common-about-purpose-icon{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:24px;

    background:#EEF6FF;

    color:#0D5CAB;

    font-size:32px;

    margin-bottom:28px;

}

.common-purpose-left

.common-about-purpose-icon{

    margin-left:auto;

}

/*=========================================
LABEL
=========================================*/

.common-about-purpose-card span{

    display:inline-block;

    padding:10px 20px;

    border-radius:40px;

    background:#EEF6FF;

    color:#0D5CAB;

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

}

/*=========================================
TITLE
=========================================*/

.common-about-purpose-card h3{

    font-size:1.8rem;

    line-height:1.1;

    color:#0F172A;

    margin-bottom:22px;
    font-weight: 700;

}

/*=========================================
TEXT
=========================================*/

.common-about-purpose-card p{

    color:#000000;

    line-height:1.5;
    text-align: justify;

}

/*=========================================
CENTER
=========================================*/

.common-about-purpose-center{

    position:relative;

    text-align:center;

}

.common-about-purpose-circle{

    width:220px;

    height:220px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    border:2px dashed #D5E7FA;

}

.common-about-purpose-inner{

    width:150px;

    height:150px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#0D5CAB;

}

.common-about-purpose-inner img{

    width:65px;

}

.common-about-purpose-center h4{

    margin-top:28px;

    font-size:28px;

    color:#0F172A;

}

.common-about-purpose-center p{

    margin-top:12px;

    color:#000000;

}

/*=========================================
VALUES
=========================================*/

.common-about-values-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

/*=========================================
VALUE CARD
=========================================*/

.common-about-value-card{

    position:relative;

    padding:25px;

    background:#fff;

    border-radius:26px;

    border:1px solid #E8EEF5;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

}

.common-about-value-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:#EEF6FF;

    color:#0D5CAB;

    font-size:28px;

    margin-bottom:24px;

}

.common-about-value-card h4{

    font-size:1.6rem;
    font-weight: 600;
    color:#0F172A;
    line-height: 1;


    margin-bottom:6px;

}

.common-about-value-card p{

    color:#000000;

    line-height:1.4;
    text-align: justify;

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

.common-about-purpose-wrapper{

grid-template-columns:1fr 220px 1fr;

gap:30px;

}

.common-about-purpose-card{

padding:35px;

}

.common-about-purpose-card h3{

font-size:1.9rem;

}

.common-about-values-grid{

grid-template-columns:repeat(2,1fr);

}

.common-about-purpose-circle{

width:190px;

height:190px;

}

.common-about-purpose-inner{

width:130px;

height:130px;

}

}

/*=========================================
TABLET
=========================================*/

@media(max-width:991px){

.common-about-purpose-section{

padding:40px 0;

}

.common-about-purpose-wrapper{

grid-template-columns:1fr;

gap:45px;

}

.common-purpose-left,

.common-purpose-right{

text-align:center;

}

.common-about-purpose-icon{

margin-inline:auto;

}

.common-about-purpose-center{

order:-1;

}

.common-about-values-grid{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:767px){

.common-about-purpose-section{

padding:40px 0;

}

.common-about-purpose-heading{

margin-bottom:60px;

}

.common-about-purpose-card{

padding:28px;

text-align:center;

}

.common-about-purpose-card h3{
text-align: left;
font-size:1.8rem;

}

.common-about-purpose-circle{

width:170px;

height:170px;

}

.common-about-purpose-inner{

width:115px;

height:115px;

}

.common-about-purpose-inner img{

width:50px;

}

.common-about-values-grid{

grid-template-columns:1fr;

}

.common-about-purpose-watermark,

.common-about-purpose-watermark-two{

display:none;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media(max-width:480px){

.common-about-purpose-card{

padding:24px;

}

.common-about-purpose-icon{

width:65px;

height:65px;

font-size:24px;

}

.common-about-purpose-card h3{

font-size:1.7rem;

}

.common-about-value-card{

padding:24px;

}

.common-about-value-icon{

width:60px;

height:60px;

font-size:22px;

}

.common-about-value-card h4{

font-size:1.6rem;

}

}

/*==================================================
VISION • MISSION
PART 2B
ULTRA PREMIUM STYLING
==================================================*/

/*=========================================
SECTION GLOW
=========================================*/

.common-about-purpose-section::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    left:-280px;

    top:-260px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(13,92,171,.12),
    transparent 72%);

    filter:blur(40px);

    animation:purposeGlowOne 10s ease-in-out infinite;

}

.common-about-purpose-section::after{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-220px;

    bottom:-220px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,183,3,.14),
    transparent 72%);

    filter:blur(35px);

    animation:purposeGlowTwo 12s ease-in-out infinite;

}

/*=========================================
WATERMARK
=========================================*/

.common-about-purpose-watermark{

    animation:purposeWatermark 15s ease-in-out infinite;

}

.common-about-purpose-watermark-two{

    animation:purposeWatermarkTwo 18s ease-in-out infinite;

}

/*=========================================
VISION & MISSION CARDS
=========================================*/

.common-about-purpose-card{

    overflow:hidden;

    transition:.45s;

    box-shadow:

    0 18px 45px rgba(15,35,68,.06);

}

.common-about-purpose-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:0;

    background:

    linear-gradient(
    180deg,
    #0D5CAB,
    #FFB703);

    transition:.45s;

}

.common-about-purpose-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    135deg,
    rgba(13,92,171,.03),
    rgba(255,183,3,.05));

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.common-about-purpose-card:hover{

    transform:

    translateY(-15px);

    box-shadow:

    0 35px 80px rgba(15,35,68,.15);

}

.common-about-purpose-card:hover::before{

    height:100%;

}

.common-about-purpose-card:hover::after{

    opacity:1;

}

/*=========================================
CARD SHINE
=========================================*/

.common-about-purpose-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.common-about-purpose-card .shine::before{

    content:"";

    position:absolute;

    left:-130%;

    top:-40%;

    width:40%;

    height:220%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.6),
    transparent);

    transform:rotate(25deg);

}

.common-about-purpose-card:hover .shine::before{

    left:180%;

    transition:1s;

}

/*=========================================
ICONS
=========================================*/

.common-about-purpose-icon{

    position:relative;

    transition:.4s;

}

.common-about-purpose-icon::before{

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:28px;

    border:2px dashed rgba(13,92,171,.18);

    animation:purposeRotate 14s linear infinite;

}

.common-about-purpose-card:hover

.common-about-purpose-icon{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-10deg);

}

/*=========================================
TITLE
=========================================*/

.common-about-purpose-card h3{

    position:relative;

}

.common-about-purpose-card h3::after{

    content:"";

    display:block;

    width:90px;

    height:5px;

    border-radius:50px;

    margin-top:18px;

    background:

    linear-gradient(
    90deg,
    #0D5CAB,
    #FFB703);

}

.common-purpose-left h3::after{

    margin-left:auto;

}

/*=========================================
CENTER CIRCLE
=========================================*/

.common-about-purpose-circle{

    position:relative;

    box-shadow:

    0 20px 60px rgba(15,35,68,.08);

}

.common-about-purpose-circle::before{

    content:"";

    position:absolute;

    inset:-20px;

    border-radius:50%;

    border:2px dashed rgba(13,92,171,.18);

    animation:purposeRotate 18s linear infinite;

}

.common-about-purpose-circle::after{

    content:"";

    position:absolute;

    inset:-45px;

    border-radius:50%;

    border:1px solid rgba(13,92,171,.10);

}

.common-about-purpose-inner{

    box-shadow:

    0 20px 50px rgba(13,92,171,.35);

    transition:.4s;

}

.common-about-purpose-center:hover

.common-about-purpose-inner{

    transform:scale(1.08);

}

/*=========================================
CONNECTING LINE
=========================================*/

.common-about-purpose-center{

    position:relative;

}

.common-about-purpose-center::before{

    content:"";

    position:absolute;

    width:90px;

    height:2px;

    background:

    linear-gradient(
    90deg,
    #0D5CAB,
    transparent);

    left:-90px;

    top:110px;

}

.common-about-purpose-center::after{

    content:"";

    position:absolute;

    width:90px;

    height:2px;

    background:

    linear-gradient(
    90deg,
    transparent,
    #FFB703);

    right:-90px;

    top:110px;

}

/*=========================================
VALUE CARDS
=========================================*/

.common-about-value-card{

    overflow:hidden;

    transition:.4s;

    box-shadow:

    0 18px 45px rgba(15,35,68,.06);

}

.common-about-value-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:

    linear-gradient(
    180deg,
    #0D5CAB,
    #FFB703);

    transition:.4s;

}

.common-about-value-card:hover{

    transform:translateY(-12px);

    box-shadow:

    0 30px 70px rgba(15,35,68,.14);

}

.common-about-value-card:hover::before{

    height:100%;

}

/*=========================================
VALUE SHINE
=========================================*/

.common-about-value-card .shine{

    position:absolute;

    inset:0;

    overflow:hidden;

}

.common-about-value-card .shine::before{

    content:"";

    position:absolute;

    left:-140%;

    top:-40%;

    width:40%;

    height:220%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.6),
    transparent);

    transform:rotate(25deg);

}

.common-about-value-card:hover .shine::before{

    left:180%;

    transition:1s;

}

/*=========================================
VALUE ICON
=========================================*/

.common-about-value-icon{

    position:relative;

    transition:.35s;

}

.common-about-value-icon::before{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:24px;

    border:2px dashed rgba(13,92,171,.18);

    animation:purposeRotate 15s linear infinite;

}

.common-about-value-card:hover

.common-about-value-icon{

    background:#0D5CAB;

    color:#fff;

    transform:rotate(-8deg);

}

/*=========================================
NOISE
=========================================*/

.common-about-purpose-card::selection,

.common-about-value-card::selection{

    background:transparent;

}

.common-about-purpose-card{

    background-image:

    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:24px 24px;

}

/*=========================================
ANIMATION
=========================================*/

@keyframes purposeGlowOne{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(40px);

}

}

@keyframes purposeGlowTwo{

0%,100%{

transform:translateX(0);

}

50%{

transform:translateX(-40px);

}

}

@keyframes purposeRotate{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes purposeWatermark{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(25px);

}

}

@keyframes purposeWatermarkTwo{

0%,100%{

transform:rotate(-90deg) translateY(0);

}

50%{

transform:rotate(-90deg) translateY(20px);

}

}

/*=========================================
GSAP READY
=========================================*/

.common-about-purpose-heading,
.common-about-purpose-card,
.common-about-purpose-center,
.common-about-value-card{

will-change:transform,opacity;

}

/*=========================================
MOBILE
=========================================*/

@media(max-width:991px){

.common-about-purpose-center::before,

.common-about-purpose-center::after{

display:none;

}

}

@media(max-width:767px){

.common-about-purpose-card:hover,

.common-about-value-card:hover{

transform:none;

}

.common-about-purpose-watermark,

.common-about-purpose-watermark-two{

display:none;

}

}