.about-banner {
  padding: 80px 0;

  position: relative;
  --primary: #021f61;
  --primary-dark: #01184d;

  --secondary: #fcc101;

  --heading: #ffffff;

  --text: #d9e2f3;

  --white: #ffffff;

  --border: rgba(255, 255, 255, 0.12);

  --shadow: 0 18px 60px rgba(0, 0, 0, 0.12);

  --transition: 0.35s ease;

  --radius: 18px;
}

.about-banner__wrapper {
  position: relative;

  overflow: hidden;

  border-radius: 28px;

  box-shadow: var(--shadow);

  background: #fff;
}

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

.about-banner__content {
  position: relative;

  z-index: 5;

  height: 100%;

  background: linear-gradient(135deg, #021f61 0%, #02154d 100%);

  padding: 55px 48px 22px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

/*==================================================
    SUBTITLE
==================================================*/

.about-banner__subtitle {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 18px;
}

.about-banner__subtitle-line {
  width: 34px;

  height: 2px;

  background: var(--secondary);
}

.about-banner__subtitle-text {
  color: var(--secondary);

  font-size: 14px;

  letter-spacing: 1.8px;

  font-weight: 700;
}

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

.about-banner__title {
  color: #fff;

  font-size: 58px;

  line-height: 1.08;

  font-weight: 700;

  margin-bottom: 28px;
}

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

.about-banner__description {
  max-width: 520px;

  margin-bottom: 42px;
}

.about-banner__description p {
  color: var(--text);

  font-size: 20px;

  line-height: 1.9;

  margin: 0;
}

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

.about-banner__features {
  display: grid;

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

  gap: 16px;
}

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

.about-feature {
  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 14px;

  padding: 18px 18px;

  transition: var(--transition);

  display: flex;

  gap: 14px;

  align-items: flex-start;

  min-height: 108px;
}

.about-feature:hover {
  background: rgba(255, 255, 255, 0.08);

  transform: translateY(-6px);

  border-color: rgba(252, 193, 1, 0.35);
}

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

.about-feature__icon {
  flex-shrink: 0;
}

.about-feature__icon i {
  font-size: 34px;

  color: var(--secondary);
}

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

.about-feature__content {
  flex: 1;
}

.about-feature__content h4 {
  color: #fff;

  font-size: 34px;

  line-height: 1;

  font-weight: 700;

  margin-bottom: 10px;
}

.about-feature__content span {
  display: block;

  color: #d5dff2;

  font-size: 16px;

  line-height: 1.5;
}

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

.about-feature:hover h4 {
  color: var(--secondary);
}

.about-feature:hover i {
  transform: scale(1.08);
}

.about-feature__icon i {
  transition: 0.35s;
}

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

@media (max-width: 1400px) {
  .about-banner__title {
    font-size: 52px;
  }

  .about-banner__description p {
    font-size: 18px;
  }

  .about-feature__content h4 {
    font-size: 28px;
  }
}

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

@media (max-width: 1199px) {
  .about-banner__content {
    padding: 50px 40px;
  }

  .about-banner__title {
    font-size: 46px;
  }

  .about-banner__features {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

@media (max-width: 991px) {
  .about-banner {
    padding: 60px 0;
  }

  .about-banner__content {
    padding: 45px 35px;
  }

  .about-banner__title {
    font-size: 42px;
  }

  .about-banner__description {
    max-width: 100%;
  }

  .about-banner__description p {
    font-size: 17px;
  }
}

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

@media (max-width: 767px) {
  .about-banner__content {
    padding: 40px 28px;
  }

  .about-banner__title {
    font-size: 34px;
  }

  .about-banner__features {
    grid-template-columns: 1fr;

    gap: 14px;
  }

  .about-feature {
    min-height: auto;
  }
}

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

@media (max-width: 480px) {
  .about-banner {
    padding: 30px 0;
  }

  .about-banner__content {
    padding: 30px 22px;
  }

  .about-banner__title {
    font-size: 28px;
  }

  .about-banner__description p {
    font-size: 15px;
  }

  .about-feature {
    padding: 16px;
  }

  .about-feature__icon i {
    font-size: 28px;
  }

  .about-feature__content h4 {
    font-size: 28px;
  }

  .about-feature__content span {
    font-size: 14px;
  }
}


/*==================================================
    RIGHT MEDIA PANEL
==================================================*/

.about-banner__media{

    position:relative;

    height:100%;

    min-height:720px;

    overflow:hidden;

    background:#dfe7f3;

}

/*=========================================
    Background Image
=========================================*/

.about-banner__background{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:1;

}

/*=========================================
    Dark Overlay
=========================================*/

.about-banner__overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to right,

        rgba(2,31,97,.08),

        rgba(2,31,97,0)

    );

    z-index:2;

}

/*=========================================
    Foreground Equipment Image
=========================================*/

.about-banner__equipment{

    position:absolute;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

    width:78%;

    max-width:720px;

    z-index:3;

    pointer-events:none;

}

/*=========================================
    Optional Logo
=========================================*/

.about-banner__logo{

    position:absolute;

    top:35px;

    right:45px;

    z-index:5;

}

.about-banner__logo img{

    width:220px;

}

/*==================================================
    DIAGONAL DIVIDER
==================================================*/

.about-banner__wrapper::before{

    content:"";

    position:absolute;

    left:47.6%;

    top:-120px;

    width:3px;

    height:130%;

    background:#FCC101;

    transform:rotate(-14deg);

    z-index:30;

    transform-origin:center;

    box-shadow:

    0 0 12px rgba(252,193,1,.35);

}

/*==================================================
    LEFT PANEL SHADOW
==================================================*/

.about-banner__content::after{

    content:"";

    position:absolute;

    right:-120px;

    top:0;

    width:260px;

    height:100%;

    background:

    linear-gradient(

        to right,

        rgba(0,0,0,.12),

        rgba(0,0,0,0)

    );

    z-index:-1;

}

/*==================================================
    DECORATIVE GLOW
==================================================*/

.about-banner__content::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    background:

    radial-gradient(

        rgba(255,255,255,.05),

        transparent 70%

    );

    left:-160px;

    bottom:-180px;

    border-radius:50%;

    pointer-events:none;

}

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

.about-banner__equipment{

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

}

@keyframes equipmentFloat{

    0%{

        transform:translateX(-50%) translateY(0px);

    }

    50%{

        transform:translateX(-50%) translateY(-10px);

    }

    100%{

        transform:translateX(-50%) translateY(0px);

    }

}

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

.about-banner__wrapper:hover .about-banner__background{

    transform:scale(1.04);

}

.about-banner__background{

    transition:6s linear;

}

/*==================================================
    LARGE DESKTOP
==================================================*/

@media(max-width:1600px){

.about-banner__media{

min-height:650px;

}

.about-banner__equipment{

width:82%;

}

.about-banner__wrapper::before{

left:47.8%;

}

}

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

@media(max-width:1400px){

.about-banner__media{

min-height:600px;

}

.about-banner__equipment{

width:88%;

}

.about-banner__logo img{

width:180px;

}

}

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

@media(max-width:1199px){

.about-banner__wrapper::before{

left:49.2%;

}

.about-banner__media{

min-height:520px;

}

.about-banner__equipment{

width:92%;

}

}

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

@media(max-width:991px){

.about-banner__wrapper{

border-radius:22px;

}

.about-banner__wrapper::before{

display:none;

}

.about-banner__media{

min-height:500px;

}

.about-banner__equipment{

width:82%;

}

.about-banner__logo{

right:25px;

top:20px;

}

.about-banner__logo img{

width:150px;

}

}

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

@media(max-width:767px){

.about-banner__media{

min-height:420px;

}

.about-banner__equipment{

width:90%;

}

.about-banner__logo{

display:none;

}

.about-banner__content::after{

display:none;

}

}

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

@media(max-width:576px){

.about-banner__media{

min-height:340px;

}

.about-banner__equipment{

width:96%;

}

.about-banner__background{

object-position:60% center;

}

}

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

@media(max-width:400px){

.about-banner__media{

min-height:290px;

}

.about-banner__equipment{

width:100%;

}

}

/*==================================================
    OPTIONAL ENTRANCE ANIMATION
==================================================*/

.about-banner__content{

animation:fadeLeft .8s ease;

}

.about-banner__media{

animation:fadeRight .8s ease;

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

/*==================================================
    UTILITIES
==================================================*/

.about-banner--shadow{

box-shadow:0 25px 70px rgba(0,0,0,.12);

}

.about-banner--rounded{

border-radius:28px;

}

.about-banner--overflow{

overflow:hidden;

}

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

/*==================================================
    ROOT VARIABLES
==================================================*/


.story-section{

    padding:90px 0;

    position:relative;

      --primary:#021F61;
    --secondary:#FCC101;

    --heading:#0D2C6C;
    --text:#4C556B;

    --white:#ffffff;

    --border:#E8EDF6;

    --transition:.35s ease;

    --shadow:0 15px 45px rgba(15,40,90,.06);

}

.story-section::before{

    content:"";

    position:absolute;

    left:-120px;

    top:-120px;

    width:280px;

    height:280px;

    border-radius:50%;

    background:radial-gradient(rgba(252,193,1,.08),transparent);

}

.story-section::after{

    content:"";

    position:absolute;

    right:-140px;

    bottom:-140px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(rgba(2,31,97,.05),transparent);

}

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

.story-section__content{

    max-width:500px;

}

.story-section__subtitle{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.story-section__line{

    width:34px;

    height:2px;

    background:var(--secondary);

}

.story-section__label{

    color:var(--secondary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

}

.story-section__title{

    font-size:54px;

    line-height:1.15;

    color:var(--heading);

    font-weight:700;

    margin-bottom:28px;

}

.story-section__description{

    margin-bottom:20px;

}

.story-section__description p{

    margin-bottom:18px;

    color:var(--text);

    font-size:16px;

    line-height:1.7;

}

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

.story-section__button{

    display:inline-flex;

    align-items:center;

    gap:14px;

    background:var(--secondary);

    color:var(--primary);

    font-weight:700;

    padding:18px 28px;

    border-radius:8px;

    transition:var(--transition);

}

.story-section__button i{

    font-size:18px;

    transition:.3s;

}

.story-section__button:hover{

    background:#e8b000;

    color:var(--primary);

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(252,193,1,.35);

}

.story-section__button:hover i{

    transform:translateX(5px);

}

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

.story-timeline{

    position:relative;

    padding-left:85px;

}

.story-timeline__line{

    position:absolute;

    left:33px;

    top:12px;

    width:2px;

    height:calc(100% - 24px);

    background:#E2E8F2;

}

/* .story-timeline__line::before,

.story-timeline__line::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--secondary);

} */

.story-timeline__line::before{

    top:0;

}

.story-timeline__line::after{

    bottom:0;

}

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

.story-timeline__item{

    position:relative;

    display:flex;

    gap:28px;

    margin-bottom:30px;

}

.story-timeline__item:last-child{

    margin-bottom:0;

}

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

.story-timeline__icon{

    width:64px;

    height:64px;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    position:absolute;

    left:-85px;

    top:0;

    transition:var(--transition);

}

.story-timeline__icon i{

    color:#fff;

    font-size:24px;

}

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

.story-timeline__content{

    padding-top:4px;

}

.story-timeline__content h4{

    color:var(--heading);

    font-size:26px;

    font-weight:700;

    margin-bottom:8px;

}

.story-timeline__content p{

    margin:0;

    font-size:16px;

    line-height:1.6;

    color:var(--text);

}

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

.story-timeline__item:hover .story-timeline__icon{

    background:var(--secondary);

    transform:scale(1.08);

}

.story-timeline__item:hover .story-timeline__icon i{

    color:var(--primary);

}

.story-timeline__item:hover h4{

    color:var(--primary);

}

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

@media(max-width:1400px){

.story-section__title{

font-size:40px;

}

.story-timeline__content h4{

font-size:22px;

}

}

@media(max-width:1199px){

.story-section{

padding:70px 0;

}

.story-section__title{

font-size:40px;

}

.story-section__description p{

font-size:17px;

}

.story-timeline{

padding-left:75px;

}

.story-timeline__icon{

left:-75px;

width:56px;

height:56px;

}

}

@media(max-width:991px){

.story-section{

padding:60px 0;

}

.story-section__content{

max-width:100%;

margin-bottom:45px;

}

.story-timeline{

padding-left:70px;

}

.story-timeline__icon{

left:-70px;

}

}

@media(max-width:767px){

.story-section__title{

font-size:32px;

}

.story-section__description p{

font-size:16px;

line-height:1.8;

}

.story-timeline{

padding-left:60px;

}

.story-timeline__icon{

width:50px;

height:50px;

left:-60px;

}

.story-timeline__icon i{

font-size:20px;

}

.story-timeline__content h4{

font-size:20px;

}

.story-timeline__content p{

font-size:15px;

}

.story-section__button{

width:100%;

justify-content:center;

}

}

@media(max-width:480px){

.story-section{

padding:45px 0;

}

.story-section__title{

font-size:28px;

}

.story-timeline{

padding-left:0;

}

.story-timeline__line{

display:none;

}

.story-timeline__item{

padding-left:65px;

}

.story-timeline__icon{

left:0;

}

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


.core-values{

    padding:90px 0;

    position:relative;

    --primary:#021F61;
    --secondary:#FCC101;

    --heading:#082A67;
    --text:#58627A;

    --white:#ffffff;

    --border:#E7EDF5;

    --background:#F7F9FC;

    --shadow:0 12px 40px rgba(12,34,75,.06);

    --transition:.35s ease;

    --radius:18px;

}

.core-values::before{

    content:"";

    position:absolute;

    top:-140px;

    left:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(rgba(252,193,1,.08),transparent);

}

.core-values::after{

    content:"";

    position:absolute;

    right:-120px;

    bottom:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(rgba(2,31,97,.05),transparent);

}

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

.core-values__wrapper{

    position:relative;

    background:var(--white);

    border-radius:22px;

    box-shadow:var(--shadow);

    border:1px solid var(--border);

    padding:40px 10px 20px;

}

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

.core-values__heading{

    position:absolute;

    left:50%;

    top:-14px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:14px;

    background:var(--white);

    padding:0 20px;

}

.core-values__heading-line{

    width:42px;

    height:2px;

    background:#9DB3DB;

}

.core-values__heading-text{

    color:var(--secondary);

    font-size:15px;

    font-weight:700;

    letter-spacing:1.5px;

    white-space:nowrap;

}

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

.core-values__grid{

    display:grid;

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

    gap:0;

}

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

.core-value{

    position:relative;

    padding:18px 24px;

    text-align:center;

    transition:var(--transition);

}

.core-value:not(.core-value--last)::after{

    content:"";

    position:absolute;

    right:0;

    top:12px;

    width:1px;

    height:calc(100% - 24px);

    background:var(--border);

}

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

.core-value__icon{

    width:78px;

    height:78px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

    transition:var(--transition);

}

.core-value__icon i{

    font-size:48px;

}

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

.core-value__title{

    color:var(--heading);

    font-size:24px;

    font-weight:700;

    margin-bottom:12px;

}

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

.core-value__description{

    margin:0 auto;

    max-width:190px;

    color:var(--text);

    font-size:16px;

    line-height:1.4;

}

/*==================================================
    HOVER EFFECT
==================================================*/

.core-value:hover{

    transform:translateY(-8px);

}

.core-value:hover .core-value__icon{

    transform:scale(1.08);

    color:var(--secondary);

}

.core-value:hover .core-value__title{

    color:var(--primary);

}

.core-value:hover .core-value__description{

    color:#475066;

}

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

@media(max-width:1400px){

.core-value__title{

font-size:22px;

}

.core-value__description{

font-size:16px;

}

}

@media(max-width:1199px){

.core-values__grid{

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

gap:25px;

}

.core-value::after{

display:none;

}

.core-values__wrapper{

padding:60px 35px 35px;

}

}

@media(max-width:991px){

.core-values{

padding:70px 0;

}

.core-values__grid{

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

}

.core-value{

padding:20px;

border:1px solid var(--border);

border-radius:16px;

}

}

@media(max-width:767px){

.core-values{

padding:60px 0;

}

.core-values__wrapper{

padding:55px 25px 25px;

}

.core-values__heading{

padding:0 14px;

}

.core-values__heading-text{

font-size:13px;

}

.core-values__heading-line{

width:28px;

}

.core-values__grid{

grid-template-columns:1fr;

gap:18px;

}

.core-value{

padding:28px 22px;

}

.core-value__icon{

width:64px;

height:64px;

margin-bottom:18px;

}

.core-value__icon i{

font-size:40px;

}

.core-value__title{

font-size:21px;

}

.core-value__description{

font-size:15px;

max-width:100%;

}

}

@media(max-width:480px){

.core-values{

padding:45px 0;

}

.core-values__wrapper{

padding:50px 18px 20px;

border-radius:18px;

}

.core-values__heading{

gap:10px;

}

.core-values__heading-line{

width:20px;

}

.core-values__heading-text{

font-size:12px;

letter-spacing:1px;

}

.core-value{

padding:22px 18px;

}

.core-value__icon{

width:58px;

height:58px;

}

.core-value__icon i{

font-size:34px;

}

.core-value__title{

font-size:20px;

}

.core-value__description{

font-size:14px;

line-height:1.6;

}

}

/*==================================================
    UTILITIES
==================================================*/

.core-values--shadow{

box-shadow:0 20px 55px rgba(2,31,97,.08);

}

.core-values--rounded{

border-radius:22px;

}

.core-values--light{

background:#fff;

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


/* ---------------------------------------------------------------------------------------------------- */
/*==================================================
    ROOT VARIABLES
==================================================*/



.why-choose{

    padding:90px 0;

    position:relative;

    overflow:hidden;

     --primary:#021F61;
    --secondary:#FCC101;

    --heading:#0C2B68;
    --text:#4F5C75;

    --white:#ffffff;

    --border:#E8EDF5;

    --background:#F7F9FC;

    --shadow:0 15px 45px rgba(2,31,97,.08);

    --transition:.35s ease;

    --radius:22px;

}

.why-choose::before{

    content:"";

    position:absolute;

    left:-140px;

    top:-120px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(rgba(252,193,1,.08),transparent);

}

.why-choose::after{

    content:"";

    position:absolute;

    right:-140px;

    bottom:-140px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:radial-gradient(rgba(2,31,97,.05),transparent);

}

.why-choose__wrapper{

    position:relative;

    z-index:2;

}

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

.why-choose__content{

    max-width:700px;

}

/*==================================================
    SUBTITLE
==================================================*/

.why-choose__subtitle{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

}

.why-choose__subtitle-line{

    width:34px;

    height:2px;

    background:var(--primary);

}

.why-choose__subtitle-text{

    color:var(--secondary);

    font-size:14px;

    font-weight:700;

    letter-spacing:1.5px;

}

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

.why-choose__title{

    color:var(--heading);

    font-size:56px;

    line-height:1.15;

    font-weight:700;

    margin-bottom:40px;

}

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

.why-choose__features{

    display:grid;

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

    gap:30px 26px;

}

/*==================================================
    FEATURE
==================================================*/

.why-feature{

    display:flex;

    align-items:flex-start;

    gap:18px;

    transition:var(--transition);

}

.why-feature:hover{

    transform:translateY(-6px);

}

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

.why-feature__icon{

    width:60px;

    height:60px;

    flex-shrink:0;

    border-radius:50%;

    background:var(--primary);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:var(--transition);

}

.why-feature__icon i{

    color:#fff;

    font-size:24px;

}

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

.why-feature__content{

    flex:1;

}

.why-feature__title{

    color:var(--heading);

    font-size:22px;

    font-weight:700;

    margin-bottom:10px;

}

.why-feature__description{

    margin:0;

    color:var(--text);

    font-size:15px;

    line-height:1.5;

}

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

.why-feature:hover .why-feature__icon{

    background:var(--secondary);

    transform:scale(1.08);

}

.why-feature:hover .why-feature__icon i{

    color:var(--primary);

}

.why-feature:hover .why-feature__title{

    color:var(--primary);

}

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

.why-choose__media{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    box-shadow:var(--shadow);

    height:100%;

}

.why-choose__image{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.2s ease;

}

.why-choose__media:hover .why-choose__image{

    transform:scale(1.05);

}

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

@media(max-width:1400px){

.why-choose__title{

font-size:40px;

}

}

@media(max-width:1199px){

.why-choose{

padding:80px 0;

}

.why-choose__title{

font-size:42px;

}

.why-feature__title{

font-size:20px;

}

.why-feature__description{

font-size:16px;

}

}

@media(max-width:991px){

.why-choose{

padding:70px 0;

}

.why-choose__content{

max-width:100%;

margin-bottom:20px;

}

.why-choose__title{

font-size:38px;

}

.why-choose__media{

margin-top:15px;

}

}

@media(max-width:767px){

.why-choose{

padding:60px 0;

}

.why-choose__subtitle{

margin-bottom:15px;

}

.why-choose__title{

font-size:32px;

margin-bottom:30px;

}

.why-choose__features{

grid-template-columns:1fr;

gap:22px;

}

.why-feature{

padding-bottom:18px;

border-bottom:1px solid var(--border);

}

.why-feature:last-child{

border-bottom:none;

padding-bottom:0;

}

}

@media(max-width:575px){

.why-choose{

padding:45px 0;

}

.why-choose__title{

font-size:28px;

}

.why-feature{

gap:15px;

}

.why-feature__icon{

width:52px;

height:52px;

}

.why-feature__icon i{

font-size:20px;

}

.why-feature__title{

font-size:18px;

}

.why-feature__description{

font-size:15px;

line-height:1.7;

}

.why-choose__media{

border-radius:16px;

}

}

/*==================================================
    UTILITIES
==================================================*/

.why-choose--shadow{

box-shadow:0 20px 60px rgba(2,31,97,.10);

}

.why-choose--rounded{

border-radius:var(--radius);

}

.transition{

transition:var(--transition);

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


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



.certification{

    padding:90px 0;

    position:relative;

    --primary:#021F61;
    --secondary:#FCC101;

    --heading:#082B69;
    --text:#56637C;

    --white:#ffffff;

    --border:#E8EDF5;

    --section-bg:#F7F9FC;

    --shadow:0 15px 45px rgba(12,34,75,.06);

    --transition:.35s ease;

    --radius:20px;

}

.certification::before{

    content:"";

    position:absolute;

    left:-150px;

    top:-140px;

    width:320px;

    height:320px;

    border-radius:50%;

    background:radial-gradient(rgba(252,193,1,.08),transparent);

}

.certification::after{

    content:"";

    position:absolute;

    right:-140px;

    bottom:-120px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:radial-gradient(rgba(2,31,97,.05),transparent);

}

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

.certification__wrapper{

    position:relative;

    background:#fff;

    border:1px solid var(--border);

    border-radius:22px;

    box-shadow:var(--shadow);

    padding:60px 30px 32px;

}

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

.certification__heading{

    position:absolute;

    left:50%;

    top:-14px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:14px;

    background:#fff;

    padding:0 18px;

}

.certification__heading-line{

    width:40px;

    height:2px;

    background:#93ABD8;

}

.certification__heading-text{

    color:var(--primary);

    font-size:16px;

    font-weight:700;

    letter-spacing:.8px;

    white-space:nowrap;

}

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

.certification__grid{

    display:grid;

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

    gap:0;

}

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

.certification-card{

    position:relative;

    text-align:center;

    padding:8px 20px;

    transition:var(--transition);

}

.certification-card:not(.certification-card--last)::after{

    content:"";

    position:absolute;

    right:0;

    top:10px;

    width:1px;

    height:calc(100% - 20px);

    background:var(--border);

}

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

.certification-card__image{

    height:90px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:18px;

}

.certification-card__image img{

    max-width:90px;

    max-height:90px;

    width:auto;

    object-fit:contain;

    transition:var(--transition);

}

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

.certification-card__title{

    font-size:19px;

    color:var(--heading);

    font-weight:700;

    margin-bottom:8px;

    line-height:1.4;

}

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

.certification-card__description{

    margin:0 auto;

    max-width:160px;

    color:var(--text);

    font-size:15px;

    line-height:1.6;

}

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

.certification-card:hover{

    transform:translateY(-8px);

}

.certification-card:hover .certification-card__image img{

    transform:scale(1.08);

}

.certification-card:hover .certification-card__title{

    color:var(--primary);

}

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

@media(max-width:1400px){

.certification__grid{

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

gap:24px;

}

.certification-card::after{

display:none;

}

}

@media(max-width:991px){

.certification{

padding:70px 0;

}

.certification__wrapper{

padding:55px 25px 25px;

}

.certification__grid{

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

gap:22px;

}

.certification-card{

border:1px solid var(--border);

border-radius:16px;

padding:28px 18px;

}

.certification-card__image{

height:80px;

}

.certification-card__image img{

max-width:75px;

}

}

@media(max-width:767px){

.certification{

padding:60px 0;

}

.certification__heading{

padding:0 14px;

}

.certification__heading-line{

width:26px;

}

.certification__heading-text{

font-size:13px;

letter-spacing:.5px;

}

.certification__grid{

grid-template-columns:1fr;

gap:18px;

}

.certification-card{

padding:24px 18px;

}

.certification-card__title{

font-size:18px;

}

.certification-card__description{

font-size:14px;

max-width:100%;

}

}

@media(max-width:480px){

.certification{

padding:45px 0;

}

.certification__wrapper{

padding:50px 18px 18px;

border-radius:18px;

}

.certification__heading{

gap:10px;

}

.certification__heading-line{

width:18px;

}

.certification__heading-text{

font-size:12px;

}

.certification-card__image{

height:70px;

}

.certification-card__image img{

max-width:65px;

}

.certification-card__title{

font-size:17px;

}

.certification-card__description{

font-size:13px;

}

}

/*==================================================
    UTILITIES
==================================================*/

.certification--shadow{

    box-shadow:0 25px 70px rgba(2,31,97,.08);

}

.certification--rounded{

    border-radius:22px;

}

.transition{

    transition:var(--transition);

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