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

/* ==========================================
        ABOUT PAGE HERO
========================================== */

.about-hero-banner{
    position:relative;
    width:100%;
    height:100vh;
    min-height:780px;

    display:flex;
    align-items:center;

    padding:0 8%;

    background-size:cover;
    background-position:right center;
    background-repeat:no-repeat;

    overflow:hidden;
}

/* Dark Overlay */

.about-hero-overlay{
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        rgba(6,22,30,.96) 0%,
        rgba(6,22,30,.90) 25%,
        rgba(6,22,30,.72) 50%,
        rgba(6,22,30,.35) 75%,
        rgba(6,22,30,.05) 100%
    );

    z-index:1;
}

/* Content */

.about-hero-container{

    position:relative;
    z-index:2;

    max-width:620px;
    margin-top:160px;

    margin-top:170px;   /* Increase this value to move content lower */

    color:#fff;

}
/* Heading */

.about-hero-title{

    margin:0;

    font-size:74px;

    line-height:1.05;

    font-weight:700;

    letter-spacing:-2px;

    color:#ffffff;

}
/* Highlight */

.about-highlight{

    color:#fff300;

}

/* Paragraph */

.about-hero-description{

    margin-top:30px;

    max-width:560px;

    text-align:justify;
    
    line-height:1.85;

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

    text-align:justify;

}

/* ==========================================
   MOBILE RESPONSIVE
========================================== */
/* ===============================
   HIRING HERO - TABLET
================================= */

@media (max-width:768px){

.hiring-hero{

    height:100vh;
    min-height:700px;

    padding:0 30px;

    display:flex;
    align-items:center;

    background-position:70% center;
    background-size:cover;

}

.hiring-hero-content{

    position:relative;

    max-width:340px;

    margin-top:150px;      /* Move content downward */

}

.hiring-hero-title{

    font-size:46px;

    line-height:1.08;

    letter-spacing:-1px;

    margin-bottom:22px;

}

.hiring-hero-description{

    max-width:320px;

    font-size:17px;

    line-height:1.75;

    text-align:justify;

}

}
/* ==========================================
   SMALL MOBILE
========================================== */
@media (max-width:480px){

.about-hero-banner{

    min-height:100vh;
    height:100vh;

    padding:0 22px;

    align-items:center;

    background-position:68% center;
    background-size:cover;

}

.about-hero-container{

    width:100%;
    max-width:330px;

    margin-top:120px;

}

.about-hero-title{

    font-size:36px;          /* Reduced from 34px */
    line-height:1.10;
    font-weight:700;
    letter-spacing:0.5px;

    margin-top:150px;

    margin-bottom:40px;

    word-break:normal;
    overflow-wrap:break-word;

}

.about-hero-description{

    max-width:400px;

    font-size:20px;

    margin-top:-10px;

    line-height:1.50;

    text-align:left;

}
}

/* section 2*/
/* ==========================================
   SERVICES SECTION
========================================== */
/* ==========================================
   SKILLEDHIRE GLASS SECTION
========================================== */

.sh-services-section{
  padding:50px 8%;
  background:
  linear-gradient(
    135deg,
    #f8fafb 0%,
    #eef3f5 100%
  );

  position:relative;
  overflow:hidden;
}

.sh-services-section::before{
  content:"";
  position:absolute;
  top:-200px;
  right:-200px;
  width:500px;
  height:500px;
  border-radius:50%;

  background:
  radial-gradient(
    rgba(255,243,0,.18),
    transparent 70%
  );
}

.sh-services-section::after{
  content:"";
  position:absolute;
  bottom:-250px;
  left:-250px;

  width:500px;
  height:500px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(7,37,45,.08),
    transparent 70%
  );
}

/* ==========================================
   GRID
========================================== */
/*==================================
MAIN LAYOUT
==================================*/

.sh-services-container{

    max-width:1280px;

    margin:auto;

    display:grid;

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

    column-gap:30px;

    align-items:start;
}

/* ==========================================
   TITLE
========================================== */
.sh-services-title{
    font-size:62px;
    line-height:1;
    font-weight:800;
    color:#10212b;
    letter-spacing:-2px;
    margin-bottom:30px;
}
.sh-services-highlight{
    display:inline-flex;
    align-items:center;

    background:#fff300;
    color:#000;

    padding:-4px 4px;

    border-radius:999px;

    white-space:nowrap;

    line-height:1;
}
.sh-services-normal{
    display:inline-block;
}

.sh-services-intro{
  font-size:17px;
  line-height:1.9;
  color:#667680;
  max-width:550px;
}

/* ==========================================
   CARD GRIDS
========================================== */
/*==================================
CARD GRID
==================================*/

.sh-left-grid,
.sh-services-right{

    display:grid;

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

    gap:22px;

    align-items:stretch;
}
/* ==========================================
   IMAGE
========================================== */

.sh-services-image{
   grid-column:span 2;

    margin-bottom:6px;

    border-radius:28px;
  height:325px;
  border-radius:28px;
  overflow:hidden;

  box-shadow:
  0 20px 40px rgba(0,0,0,.08);
}

.sh-services-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.8s ease;
}

.sh-services-image:hover img{
  transform:scale(1.08);
}

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

.sh-services-card{

  position:relative;

  min-height:280px;

  padding:30px;

  border-radius:28px;

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

  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);

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

  overflow:hidden;

  transition:.45s ease;

  box-shadow:
  0 10px 30px rgba(7,37,45,.06);
}

/* Glow */

.sh-services-card::before{
  content:"";

  position:absolute;

  width:160px;
  height:160px;

  top:-80px;
  right:-80px;

  border-radius:50%;

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

  filter:blur(40px);
}

/* Top Accent */

.sh-services-card::after{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:4px;

  background:
  linear-gradient(
    90deg,
    #07252d,
    #0f4c5c,
    #fff300
  );
}

.sh-services-card:hover{
  transform:
  translateY(-10px);

  box-shadow:
  0 20px 45px rgba(7,37,45,.12);

  border-color:
  rgba(255,243,0,.35);
}

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

.sh-services-card h3{
  font-size:24px;
  line-height:1.3;
  color:#10212b;
  margin-bottom:20px;
  font-weight:700;
  position:relative;
  z-index:2;
}

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

.sh-services-list{
  list-style:none;
  padding:0;
  margin:0;
}

.sh-services-list li{

  position:relative;

  padding-left:22px;

  margin-bottom:12px;

  color:#667680;

  line-height:1.8;

  font-size:15px;
}

.sh-services-list li::before{
  content:"";

  position:absolute;

  left:0;
  top:11px;

  width:8px;
  height:8px;

  border-radius:50%;

  background:#fff300;

  box-shadow:
  0 0 10px rgba(255,243,0,.8);
}



/*==================================================
      PREMIUM GLASS CARDS
==================================================*/

.sh-card{

    position:relative;

    height:320px;
    

    padding:18px 24px 22px;

    display:flex;
    flex-direction:column;

    border-radius:28px;

    overflow:hidden;
     width:100%;

    max-width:100%;

    box-sizing:border-box;

    isolation:isolate;

    background:
    linear-gradient(145deg,
        rgba(25,35,50,.95) 0%,
        rgba(16,24,36,.96) 60%,
        rgba(10,15,24,.98) 100%);

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

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    inset 0 1px rgba(255,255,255,.08);

    transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .55s,
    border-color .55s;
}


/*----------------------------
Top Glass Shine
-----------------------------*/

.sh-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        118deg,
        transparent 0%,
        rgba(255,255,255,.16) 45%,
        rgba(255,255,255,.03) 58%,
        transparent 72%
    );

    transform:translateX(-160%);

    transition:1.1s ease;

    pointer-events:none;
}


/*----------------------------
Right Gloss Panel
-----------------------------*/

.sh-card::after{

    content:"";

    position:absolute;

    right:-70px;
    top:-40px;

    width:210px;
    height:430px;

    transform:rotate(28deg);

    background:
    linear-gradient(
        to bottom,
        rgba(255,255,255,.11),
        rgba(255,255,255,.02)
    );

    pointer-events:none;
}


/*----------------------------
Yellow Glow
-----------------------------*/

.sh-card .glow{

    position:absolute;

    top:-90px;
    left:-70px;

    width:190px;
    height:190px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255, 255, 255, 0.22),
        transparent 70%
    );

    filter:blur(30px);

    z-index:-1;
}


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

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

.sh-icon{

    width:72px;
    height:72px;

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

    border-radius:50%;

    margin:12px 0 18px;

    flex-shrink:0;

    transition:.4s ease;
}

.sh-icon svg{

    width:34px;
    height:34px;

    stroke-width:2.2;
}
.campus-icon,
.consulting-icon{

    border:3px solid #fff300;

    color:#fff300;

    box-shadow:
        0 0 18px rgba(255, 255, 255, 0.25);
}

.corporate-icon{

    border:3px solid #fff300;

    color:#fff300;

    box-shadow:
        0 0 18px rgba(255,243,0,.22);
}

.assessment-icon{

    border:3px solid #fff300;

    color:#fff300;

    box-shadow:
        0 0 18px rgba(255, 255, 255, 0.25);
}





/*==================================================
TITLE
==================================================*/
/*=========================================
    HEADING + ANIMATED UNDERLINE
=========================================*/

.sh-card h3{

    position:relative;

    color:#fff;
    
    font-weight:700;

     margin:0 0 24px;

    font-size:19px;

    line-height:1.3;

    transition:.35s ease;
}

.sh-card h3::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-14px;

    width:55px;
    height:4px;

    border-radius:50px;

    background:#fff300;

    transform-origin:left center;

    transition:
    width .45s ease,
    background .35s ease,
    transform .45s ease;
}

/* Hover */

.sh-card:hover h3{

    letter-spacing:.4px;

    transform:translateX(4px);
}

.sh-card:hover h3::after{

    width:88px;

    background:#ffffff;

    transform:scaleX(1.05);
}

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

.sh-list{

    list-style:none;

    padding:0;

    margin:0;
}

.sh-list li{

    position:relative;

    padding-left:22px;

     margin-bottom:8px;

    font-size:15px;

    line-height:1.45;

    color:#d9e2ea;

    transition:.35s ease;
}

.sh-list li::before{

    content:"";

    position:absolute;

    left:0;
    top:9px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:
    0 0 10px rgba(0, 0, 0, 0.65);

    transition:.35s ease;
}

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

.sh-card:hover .sh-list li{

    color:#ffffff;

    transform:translateX(5px);
}

.sh-card:hover .sh-list li::before{

    transform:scale(1.45);

    background:#ffffff;

   
}
/*==================================================
PREMIUM HOVER
==================================================*/

.sh-card:hover{

    transform:
    translateY(-14px)
    scale(1.03);

    border-color:
    rgba(255,255,255,.35);

    box-shadow:
    0 40px 80px rgba(0,0,0,.55),
    0 0 40px rgba(255,243,0,.15);
}

.sh-card:hover::before{

    transform:translateX(180%);
}

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

.sh-card:hover .sh-icon{

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

    color:#ffffff;

    border-color:#ffffff;

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

    box-shadow:
        0 0 35px rgba(255,255,255,.45),
        inset 0 0 18px rgba(255,255,255,.10);

    transition:all .4s ease;
}

.sh-card:hover .sh-icon svg{

    stroke:#ffffff;

    transition:stroke .4s ease;
}
.sh-card:hover h3{

    transform:translateX(4px);

    transition:.35s;
}

.sh-card:hover .sh-list li{

    transform:translateX(5px);

    transition:.35s;
}


/*==================================================
CARD SIZE
==================================================*/
/*==================================
CARD POSITION
==================================*/

.card-1{
  
    height:350px;

    margin-top:30px;

    left:auto;

    right:auto;

    top:auto;

    bottom:auto;

    justify-self:stretch;

}
.card-2
{

    height:350px;

    margin-top:30px;

    left:auto;

    right:-2%;

    top:auto;

    bottom:auto;

    justify-self:stretch;
}

.card-3,
.card-4{height:350px;

    margin-top:-8px;

    left:auto;

    right:auto;

    top:auto;

    bottom:auto;

    justify-self:stretch;}


/* ===========================================
   MOBILE SERVICES ALIGNMENT ONLY
=========================================== */

@media screen and (max-width:768px){

/* Main container */

.sh-services-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;
}

/* Left Section */

.sh-services-left{

    width:100%;

    margin-bottom:0;
}

/* Heading */

.sh-services-title{

        width:100%;

        max-width:340px;

        font-size:36px;

        font-weight:700;

        line-height:1.15;

        letter-spacing:-0.8px;

        text-align:left;

        margin-bottom:18px;

        text-wrap:balance;
    }

 .sh-services-highlight{

        display:inline;

        padding:0 6px;

        border-radius:30px;
    }
/* Subtitle */
 .sh-services-intro{

        max-width:330px;

        font-size:16px;

        line-height:1.8;

        text-align:left;

        color:#5d6774;

        margin-bottom:26px;
    }

/* Left Cards */

.sh-left-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;
}

/* Right Section */

.sh-services-right{

    display:flex;

    flex-direction:column;

    width:100%;

    gap:18px;
}

/* Hide Image Only */

.sh-services-image{

    display:none !important;
}

/* Cards */

.card-1,
.card-2,
.card-3,
.card-4{

    width:100%;

    margin:0;

    align-self:stretch;

    position:relative;

    left:auto !important;

    right:auto !important;

    top:auto !important;

    bottom:auto !important;
}

/* Equal spacing */

.card-1{

    margin-bottom:18px;
}

.card-2{

    margin-bottom:18px;
}

.card-3{

    margin-bottom:18px;
}

.card-4{

    margin-bottom:0;
}

}


/* section 3*/

.about-journey{
  padding:100px 8%;
  background:#fefae0;
}

.about-journey-container{
  max-width:1200px;
  margin:auto;
}

/* HEADER */
/* HEADER */
.about-journey-header{
  text-align: center;
  max-width: 900px;
  margin: auto;
}

.about-journey-header h2{
  font-size: 42px;
  line-height: 1.3;
  font-weight: 600;
  color: #1c1c1c;
}

/* HIGHLIGHT WORD */
.highlight-word{

  background: #fff300;

  padding: 4px 16px;

  border-radius: 40px;

  display: inline-block;
}
.about-journey-card strong {
  font-weight: 700;
  font-size: 21px;
  color: #0a222e;
}
/* AVATARS */
.avatar-inline{
  display:inline-flex;
  margin:0 8px;
}

.avatar-inline img{
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid #fff;
  margin-left:-10px;
}

/* CONTENT LAYOUT */
.about-journey-content{
  margin-top:70px;
  position:relative;
}

/* IMAGE */
.about-journey-image img{
  width:70%;
  border-radius:4px;
  display:block;
}

/* CARD */
.about-journey-card{
  position:absolute;
  right:0;
  bottom:40px;
  width:420px;
  background:#e9eff0;
  padding:40px;
  border-radius:4px;
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.about-journey-card p{
  color:#5c6b70;
  margin-bottom:10px;
  line-height:1.7;
}

.about-journey-card ul{
  list-style:none;
  padding:0;
}

.about-journey-card li{
  margin-bottom:14px;
  color:#1c1c1c;
  position:relative;
  padding-left:22px;
}

.about-journey-card li::before{
  content:"—";
  position:absolute;
  left:0;
  color:#9aa5a9;
}



/* RESPONSIVE */
@media(max-width:992px){

  .about-journey-content{
    display:flex;
    flex-direction:column;
  }

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

  .about-journey-card{
    position:relative;
    width:100%;
    margin-top:-60px;
  }

  .about-journey-header h2{
    font-size:30px;
  }
}


/* section 4*/
.service-section {
  width: 100%;
  min-height: 100vh;
  padding: 110px 6%;
  font-family: Arial, sans-serif;
}

.service-container {
  display: flex;
  flex-wrap: wrap;
}

/* LEFT SIDE */
.service-left {
  flex: 1;
  margin-left: -40px;
background-color: #0f2a30;
  color: #fff;
  padding: 10px 70px;
}

.service-left h2 {
  font-size: 36px;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 40px;
}
.highlight-transform{
  background:#fff300;
  color:#000;
  padding:4px 14px;
  border-radius:40px;
  display:inline-block;
}
/* ACCORDION */
.accordion-item {
  border-top: 1px solid #ffffff4d;
  padding: 30px 0;
  width: 100%;
  right: 100%;
  cursor: pointer;
}

.accordion-title {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
}

.accordion-content {
  font-size: 14px;
  margin-top: 10px;
  display: none;
  opacity: 0.8;
}

.accordion-item.active .accordion-content {
  display: block;
}

/* RIGHT SIDE */
.service-right {
  flex: 1;
}

.service-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* SECTION */
.aw-testimonial{
  padding: 10px 6%;
  background: #f6fbfc;
  overflow: hidden;
  position: relative;
}

/* WRAPPER (PREVENT OVERFLOW 🔥) */
.aw-slider-wrapper{
  position: relative;
  overflow: hidden;
  margin-top: 40px;
}

/* FADE LEFT */
.aw-slider-wrapper::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:120px;
  height:100%;
  background:linear-gradient(to right,#f6fbfc,transparent);
  z-index:2;
}

/* FADE RIGHT */
.aw-slider-wrapper::after{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:120px;
  height:100%;
  background:linear-gradient(to left,#f6fbfc,transparent);
  z-index:2;
}

/* SLIDER */
.aw-slider{
  display:flex;
  gap:40px;
  width:max-content;
  animation: scrollLeft 25s linear infinite;
}

/* AUTO SCROLL RIGHT ➝ LEFT */
@keyframes scrollLeft{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(-50%);
  }
}

/* CARD */
.aw-card{
  min-width:420px;
  padding:40px;
  border-radius:24px;
  backdrop-filter:blur(18px);
  background:rgba(255,255,255,0.65);
  box-shadow:0 20px 60px rgba(0,0,0,0.08);

  transform:scale(.9);
  opacity:.6;
  transition:.5s ease;
  flex-shrink:0;
}

/* HOVER (SAFE) */
.aw-card:hover{
  transform:scale(1.05);
  opacity:1;
}

/* USER */
.aw-user{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:25px;
}

.aw-user img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
}
/* section 6*/

.team-dark{
  background:#0f2a30;
  padding:120px 6%;
  color:#1e1717;
  overflow:hidden;
}

.team-wrap{
  display:flex;
  gap:70px;
  align-items:center;
}

/* LEFT */
.team-intro{
  min-width:320px;
}

.team-intro h2{
  font-size:42px;
  margin-bottom:20px;
  color: #fff;
}
.highlight-dedicated{
  background:#fff300;
  font-size: 30px;
  color:#000;
  padding:4px 14px;
  border-radius:40px;
  display:inline-block;
}
.team-intro p{
  color:#ffffff;
  margin-bottom:25px;
}

.team-link{
  color:#fff;
  text-decoration:none;
  border-bottom:1px solid #fff;
  padding-bottom:4px;
}

/* SCROLL AREA */
.team-scroll{
  display:flex;
  gap:30px;
  overflow-x:auto;
  scroll-behavior:smooth;
  cursor:grab;
}

.team-scroll::-webkit-scrollbar{
  height:6px;
}
.team-scroll::-webkit-scrollbar-thumb{
  background:#1f444b;
  border-radius:10px;
}

/* CARD */
.team-card{
  min-width:260px;
  text-decoration:none;
  color:#fff;
  position:relative;
}

.team-card img{
  width:100%;
  height:340px;
  object-fit:cover;
  border-radius:6px;
  transition:.4s;
}

/* OVERLAY BUTTON */
.team-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:.4s;
  border-radius:6px;
}

.team-overlay span{
  width:55px;
  height:55px;
  background:#12d6a1;
  color:#000;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  transform:scale(0.7);
  transition:.3s;
}

/* HOVER */
.team-card:hover img{
  transform:scale(1.05);
}

.team-card:hover .team-overlay{
  opacity:1;
}

.team-card:hover .team-overlay span{
  transform:scale(1);
}

/* NAME */
.team-card h4{
  margin-top:14px;
  margin-bottom:4px;
}

.team-card p{
  color:#8fa3a8;
  font-size:14px;
}


/*section 7*/


/* ===== FEATURES ===== */
.ax-features{
  padding:100px 8%;
  background:#ffffff;
}

.ax-features-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.ax-features-left h2{
  font-size:40px;
  margin-bottom:20px;
}

.ax-features-left p{
  color:#6b6b6b;
  margin-bottom:25px;
  line-height:1.7;
}

.ax-btn{
  display:inline-block;
  padding:14px 28px;
  background:#19c37d;
  color:#fff;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:.3s;
}

.ax-btn:hover{
  transform:translateY(-3px);
}

/* ===== ACCORDION ===== */
.ax-acc-item{
  border-bottom:1px solid #e5e5e5;
  padding:18px 0;
}

.ax-acc-title{
  display:flex;
  justify-content:space-between;
  cursor:pointer;
  font-weight:600;
}

.ax-acc-content{
  max-height:0;
  overflow:hidden;
  transition:.4s;
  color:#6b6b6b;
}

.ax-acc-item.active .ax-acc-content{
  max-height:200px;
  margin-top:10px;
}

/* ===== FOOTER ===== */
.ax-footer{
  background:#e9f1f3;
  padding:80px 8%;
}

.ax-footer-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:60px;
}

.ax-footer h3{
  font-size:28px;
  margin-bottom:15px;
}

.ax-footer p{
  color:#5f6c72;
}

.ax-outline-btn{
  display:inline-block;
  margin-top:20px;
  padding:12px 24px;
  border:1px solid #000;
  border-radius:30px;
  text-decoration:none;
  color:#000;
}

.ax-footer-links a{
  display:block;
  margin:8px 0;
  text-decoration:none;
  color:#5f6c72;
}

.ax-social span{
  margin-right:15px;
  font-weight:600;
}

/* ===== RESPONSIVE ===== */
@media(max-width:992px){
  .ax-features-container,
  .ax-footer-container{
    grid-template-columns:1fr;
  }
}/* ================================
   BUSINESS HERO SECTION
================================ */

.hero-business {
  position: relative;
  height: 100vh;
  min-height: 720px;
  display: flex;
  align-items: center;
  padding: 0 8%;
  background-image: url('../images/about/team1.jpg'); /* change to your image */
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.hero-highlight{
  color:#fff300;
}
/* Left Dark Gradient */
.hero-business-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(12, 32, 40, 0.96) 0%,
    rgba(12, 32, 40, 0.88) 30%,
    rgba(12, 32, 40, 0.65) 55%,
    rgba(12, 32, 40, 0.35) 75%,
    rgba(12, 32, 40, 0.05) 100%
  );
  z-index: 1;
}

/* Content */
.hero-business-content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  color: #ffffff;
}

/* Heading */
.hero-business-content h1 {
  font-size: 78px;
  margin-top: 250px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 28px;
  letter-spacing: -1px;
}

/* Paragraph */
.hero-business-content p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  max-width: 520px;
}

/* Responsive */
@media (max-width: 992px) {
  .hero-business {
    background-position: center;
  }

  .hero-business-content h1 {
    font-size: 48px;
  }
}


/* section 2*/
.services-split{
  padding:100px 8%;
  background:#f5f7f8;
}

.services-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:start;
}

/* LEFT */
.services-left h2{
  font-size:52px;
  line-height:1.15;
  color:#1c2b33;
  margin-bottom:20px;
}

.services-left p{
  font-size:17px;
  color:#6b7b83;
  max-width:520px;
}

/* RIGHT GRID */
.services-right{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}
.highlight-transform{
  background:#fff300;
  color:#000;
  padding:4px 14px;
  border-radius:40px;
  display:inline-block;
}
/* CARD */
.service-card{
  background:#ffffff;
  padding:35px;
  border-radius:6px;
  transition:0.35s;
}

.service-card h3{
  font-size:24px;
  margin:15px 0 10px;
  color:#1c2b33;
}

.service-card p{
  font-size:15px;
  color:#6b7b83;
}

/* ICON PLACEHOLDER */
.icon{
  width:50px;
  height:50px;
  border:1px solid #ccd6db;
  border-radius:10px;
}

/* HIGHLIGHT CARD */


.service-card.highlight h3,
.service-card.highlight p{
  color:#fff;
}

/* HOVER EFFECT */
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

/* RESPONSIVE */
@media(max-width:992px){
  .services-container{
    grid-template-columns:1fr;
  }

  .service-card.highlight{
    grid-column:span 1;
  }
}


/* section 3*/


/* SECTION 4 */
/* =========================================
   DESKTOP VERSION
========================================= */

.vision-section{
    position:relative;
    background:#ffffff;
    padding:70px 0;
    overflow:hidden;
}

/* Background Bar */

.vision-bar{

    position:absolute;

    top:50%;
    left:0;

    width:100%;
    height:340px;

    background:#0f2a30;

    transform:translateY(-50%);

    z-index:1;
}

/* Main Container */

.vision-container{

    max-width:1400px;

    margin:0 auto;

    padding:0 50px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    position:relative;

    z-index:2;
}

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

/* =========================================
   LEFT CONTENT
========================================= */
/* =========================================
   DESKTOP LEFT CONTENT
========================================= */
/* =========================================
   DESKTOP LEFT SECTION
========================================= */

.vision-left{

    flex:0 0 42%;

    display:flex;
    flex-direction:column;
    justify-content:center;      /* Center vertically */
    align-items:flex-start;

    height:340px;                /* Same as dark bar */

    padding-right:40px;

    margin:0;
}

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

.vision-left h2{

    width:100%;
    max-width:560px;

    margin:0;

    font-size:68px;
    font-weight:700;

    line-height:1.08;

    color:#ffffff;
}

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

.vision-desc{

    width:100%;
    max-width:560px;

    margin:22px 0 18px;

    font-size:20px;

    line-height:1.7;

    color:rgba(255,255,255,.85);
}

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

.divider{

    width:100%;
    max-width:560px;      /* Exactly matches heading width */

    
    height:2px;

    margin:0;

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

    border-radius:100px;
}

/* Hide empty spacing */



.vision-item{

    margin-top:30px;

    display:none;

    align-items:flex-start;

    gap:18px;
}

.vision-item p{

    color:#ffffff;

    line-height:1.8;

    margin:0;
}

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

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

.vision-image-wrapper{

    flex:0 0 58%;

    overflow:hidden;

    position:relative;

    width:100%;
}

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

.vision-track{

    display:flex;

    align-items:center;

    width:max-content;

    gap:0;

    animation:visionScroll 20s linear infinite;

    will-change:transform;
}

/* Cards */

/* =========================================
   IMAGE CARD
========================================= */
/* =========================================
   PREMIUM IMAGE HOVER EFFECT
========================================= */

.vision-card{

    position:relative;

    overflow:hidden;

    border-radius:18px;

    cursor:pointer;

    background:#0f2a30;
}

.vision-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transform:scale(1);

    transition:
        transform 1.4s cubic-bezier(.22,.61,.36,1),
        filter .8s ease,
        opacity .8s ease;

    will-change:transform;
}

/* Smoodir /ath Zoom */

.vision-card:hover img{

    transform:scale(1.08);
}

/* Optional: Slightly brighten on hover */

.vision-card:hover img{

    filter:brightness(1.05);
}
/* ==========================================
   MOBILE RESPONSIVE (REPLACE YOUR MEDIA QUERY)
========================================== */

@media (max-width: 992px) {

  .vision-section{
    padding:40px 0 30px;
    overflow:hidden;
  }

  /* Dark strip */
  .vision-bar{
    top:auto;
    bottom:0;
    height:280px;
    transform:none;
  }

  .vision-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 18px;
    max-width:100%;
  }

  /* LEFT CONTENT */
  .vision-left{
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
  }

  .vision-left h2{

        display:inline-block;

        width:100%;

        background:#0f2a30;

        color:#ffffff;

        padding:22px 18px;

        border-radius:18px;

        text-align:center;

        font-size:32px;

        line-height:1.25;

        margin-bottom:18px;

        box-sizing:border-box;

        box-shadow:0 10px 25px rgba(15,42,48,.18);
    }

    .vision-left h2 span{

        color:#fff300;
    }

}

  .vision-desc{
    color:#0f2a30;
    font-size:16px;
    line-height:1.6;
    margin:0 auto 25px;
    max-width:90%;
  }

  .divider{
    width:70%;
    margin:0 auto 20px;
    background:#d8d8d8;
  }

  /* IMAGE WRAPPER */
 .vision-image-wrapper{

    width:100%;

    overflow:hidden;

    position:relative;

    margin-top:-50px;
}

.vision-track{

    display:flex;

    gap:20px;

    width:max-content;

    animation:mobileVisionScroll 18s linear infinite;

    will-change:transform;
}

/* Pause on touch/hover (optional) */

.vision-image-wrapper:hover .vision-track{

    animation-play-state:paused;
}


.vision-track:hover{
    animation-play-state:paused;
}
.vision-track:hover{
    animation-play-state:paused;
}

  /* CARD */
  .vision-card{

    flex:0 0 auto;

    width:220px;

    height:300px;

    border-radius:18px;

    overflow:hidden;
}

.vision-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

/* Professional popup effect */

.vision-card:hover{

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

    z-index:100;

    box-shadow:
        0 30px 60px rgba(0,0,0,.35);

}

.vision-card:hover img{

    transform:scale(1.15);

}



/* Small Phones */

@keyframes visionLoop{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(calc(-80% - 12px));
    }

}

@media (max-width:576px){

  .vision-container{
    padding:0 12px;
  }

  .vision-left h2{
    font-size:27px;
  }

  .vision-desc{
    font-size:15px;
  }

  .vision-track{
    gap:12px;
  }

  .vision-card{
    width:180px;
    min-width:180px;
    height:250px;
  }

}

/* ==========================================
   CONTINUOUS LOOP ANIMATION
========================================== */

@keyframes mobileVisionScroll{

    from{

        transform:translateX(0);
    }

    to{

        transform:translateX(-50%);
    }

}
/*section 7*/


/* =========================================
   MODERN FEATURES SECTION
========================================= */
.sh-modern-features{

  padding:80px 8%;

  background:
  linear-gradient(
  180deg,
  #d1e1ed 0%,
  #ffffff 100%);
}

.sh-modern-wrapper{

  max-width:1280px;

  margin:auto;

  display:grid;

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

  gap:90px;

  align-items:center;
}

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

.sh-modern-tag{
  display:inline-block;
  padding:8px 18px;
  background:#edecd3;
  color:#000000;
  border-radius:50px;
  font-size:14px;
  font-weight:600;
  margin-bottom:20px;
}
.sh-modern-left h2{
    font-size:54px;
    line-height:1.12;
    font-weight:800;
    color:#081827;

    margin:0 0 28px;

    letter-spacing:-1.5px;

    max-width:620px;

    text-align:left;
}

.sh-modern-left h2 span{
    display:inline-block;

    background:#fff300;
    color:#000;

    padding:4px 16px;

    border-radius:60px;

    margin-bottom:10px;
}

.sh-modern-left p{
  font-size:18px;
  line-height:1.9;
  color:#667085;
  max-width:560px;

  /* NEW */
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}
/* EXPLORE BUTTON */
.sh-modern-btn{
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 16px 34px;

  border-radius: 60px;

  background: linear-gradient(
    135deg,
    #fff300 0%,
    #ffe600 50%,
    #ffd500 100%
  );

  background-size: 200% 100%;
  background-position: left;

  color: #000000;

  text-decoration: none;

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

  overflow: hidden;

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

  box-shadow:
    0 12px 30px rgba(0,0,0,0.10);
}

/* ARROW */
.ax-btn-arrow{
  font-size: 18px;

  transition:
    transform .35s ease,
    opacity .35s ease;
}

/* HOVER */
.sh-modern-btn:hover{

  background-position: right;

  transform: translateY(-4px);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.18);

  color: #000;
}

/* ARROW MOVE */
.sh-modern-btn:hover .ax-btn-arrow{
  transform: translateX(6px);
}
/* =========================================
   ACCORDION
========================================= */
.sh-modern-accordion{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.sh-modern-item{
  background:transparent;

  border:none;
  border-bottom:1px solid #e7ebf1;

  padding:0 0 24px;

  transition:.4s ease;
}

.sh-modern-item:hover{
  border-color:#0c171b;
}

.sh-modern-title{
  display:flex;
  align-items:center;
  cursor:pointer;
}

/* ICON */
.sh-modern-icon{

  width:60px;
  height:60px;
  min-width:60px;

  border-radius:18px;

  background:
  linear-gradient(
  135deg,
  #ffffff,
  #033141);

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

  margin-right:18px;

  border:1px solid #edf2f7;

  box-shadow:
  0 10px 30px rgba(0,0,0,.05);

  transition:.4s ease;
}

.sh-modern-item:hover .sh-modern-icon{

  transform:translateY(-3px);

  box-shadow:
  0 15px 40px rgba(0,0,0,.08);
}

.sh-modern-icon svg{

  width:26px;
  height:26px;

  stroke:#081827;

  stroke-width:1.8;

  fill:none;
}
/* TEXT */
.sh-modern-text{
  flex:1;
}

.sh-modern-text h4{

  font-size:24px;

  font-weight:700;

  color:#081827;

  margin-bottom:4px;

  transition:.3s;
}

.sh-modern-item:hover h4{
  color:#000;
}

.sh-modern-text p{
  font-size:15px;
  color:#8a94a6;
  margin:0;

  /* NEW */
  text-align:justify;
  text-justify:inter-word;
  line-height:1.7;
}
/* PLUS */
.sh-modern-plus{

  font-size:34px;

  font-weight:300;

  color:#081827;

  transition:.4s ease;
}

.sh-modern-item.active .sh-modern-plus{
  transform:rotate(45deg);
}

/* CONTENT */
.sh-modern-content{

  max-height:0;

  overflow:hidden;
   color:#000000;

  transition:.45s ease;

  padding-left:78px;
}

.sh-modern-content p{

  padding-top:18px;

  color:#000000;

  font-size:16px;

  line-height:1.9;

  /* NEW */
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

.sh-modern-item.active .sh-modern-content{
  max-height:220px;
}




/* =====================================================
   MOBILE RESPONSIVE (768px and below)
===================================================== */
@media screen and (max-width:768px){

    .sh-modern-features{
        padding:50px 20px;
        overflow:hidden;
    }

    .sh-modern-wrapper{
        display:flex;
        flex-direction:column;
        gap:38px;
        width:100%;
    }

    /* LEFT CONTENT */

    .sh-modern-left{
        width:100%;
        text-align:center;
    }

    .sh-modern-left h2{
        font-size:34px;
        line-height:1.25;
        letter-spacing:-0.5px;
        margin-bottom:18px;
    }

    .sh-modern-left h2 span{
        display:inline-block;
        padding:4px 14px;
        border-radius:40px;
    }

    .sh-modern-left p{
        width:100%;
        max-width:100%;
        font-size:16px;
        line-height:1.85;
        text-align:justify;
        text-align-last:center;
        color:#667085;
        margin:0 auto;
    }

    /* ACCORDION */

    .sh-modern-accordion{
        width:100%;
        gap:16px;
    }

    .sh-modern-item{
        width:100%;
        padding-bottom:18px;
    }

    .sh-modern-title{
        display:flex;
        align-items:flex-start;
        gap:14px;
    }

    .sh-modern-icon{
        width:52px;
        height:52px;
        min-width:52px;
        border-radius:14px;
        margin-right:0;
    }

    .sh-modern-icon svg{
        width:22px;
        height:22px;
    }

    .sh-modern-text{
        flex:1;
        min-width:0;
    }

    .sh-modern-text h4{
        font-size:20px;
        line-height:1.35;
        margin-bottom:5px;
    }

    .sh-modern-text p{
        font-size:14px;
        line-height:1.6;
        text-align:left;
    }

    .sh-modern-plus{
        font-size:28px;
        flex-shrink:0;
        margin-left:8px;
    }

    .sh-modern-content{
        padding-left:66px;
        padding-right:2px;
    }

    .sh-modern-content p{
        padding-top:14px;
        font-size:15px;
        line-height:1.8;
        text-align:justify;
        color:#000;
        margin:0;
        word-break:break-word;
    }

}


/* =====================================================
   SMALL MOBILE (480px and below)
===================================================== */
@media screen and (max-width:480px){

    .sh-modern-features{
        padding:40px 16px;
    }

    .sh-modern-wrapper{
        gap:30px;
    }

    .sh-modern-left h2{
        font-size:29px;
        line-height:1.3;
        margin-bottom:16px;
    }

    .sh-modern-left h2 span{
        padding:3px 12px;
    }

    .sh-modern-left p{
        font-size:15px;
        line-height:1.8;
        text-align:justify;
        text-align-last:center;
    }

    .sh-modern-title{
        gap:12px;
    }

    .sh-modern-icon{
        width:46px;
        height:46px;
        min-width:46px;
        border-radius:12px;
    }

    .sh-modern-icon svg{
        width:20px;
        height:20px;
    }

    .sh-modern-text h4{
        font-size:18px;
        line-height:1.35;
    }

    .sh-modern-text p{
        font-size:13px;
        line-height:1.6;
    }

    .sh-modern-plus{
        font-size:24px;
    }

    .sh-modern-content{
        padding-left:58px;
    }

    .sh-modern-content p{
        font-size:14px;
        line-height:1.75;
        text-align:justify;
        word-break:break-word;
    }

}


/* =====================================================
   EXTRA SMALL DEVICES (360px and below)
===================================================== */
@media screen and (max-width:360px){

    .sh-modern-features{
        padding:34px 14px;
    }

    .sh-modern-left h2{
        font-size:26px;
    }

    .sh-modern-left p{
        font-size:14px;
    }

    .sh-modern-icon{
        width:42px;
        height:42px;
        min-width:42px;
    }

    .sh-modern-icon svg{
        width:18px;
        height:18px;
    }

    .sh-modern-text h4{
        font-size:17px;
    }

    .sh-modern-text p{
        font-size:12.5px;
    }

    .sh-modern-plus{
        font-size:22px;
    }

    .sh-modern-content{
        padding-left:54px;
    }

    .sh-modern-content p{
        font-size:13.5px;
        line-height:1.7;
        text-align:justify;
    }

}







/* =========================================
   POPUP
========================================= */

.sh-modern-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.72);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:0.3s ease;
  z-index:99999;
  padding:20px;
}

.sh-modern-popup.active{
  opacity:1;
  visibility:visible;
}

.sh-modern-popup-box{
  width:100%;
  max-width:900px;
  border-radius:28px;
  overflow:hidden;
  position:relative;
  transform:translateY(40px) scale(0.9);
  transition:0.4s ease;
}

.sh-modern-popup.active .sh-modern-popup-box{
  transform:translateY(0) scale(1);
}

/* IMAGE */
.sh-modern-popup-image{
  position:relative;
}

.sh-modern-popup-image img{
  width:100%;
  height:650px;
  object-fit:cover;
  display:block;
}

/* OVERLAY */
.sh-modern-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:60px;
  background:linear-gradient(to top,
  rgba(0,0,0,0.88),
  rgba(0,0,0,0.15));
  color:#fff;
}

.sh-modern-overlay-tag{
  display:inline-block;
  width:max-content;
  padding:8px 16px;
  border-radius:50px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  margin-bottom:18px;
  font-size:14px;
}

.sh-modern-overlay h3{
  font-size:42px;
  margin-bottom:18px;
  line-height:1.2;
}

.sh-modern-overlay p{
  font-size:17px;
  line-height:1.9;
  max-width:680px;
  color:#f1f1f1;
}

/* CLOSE */
.sh-modern-close{
  position:absolute;
  top:24px;
  right:24px;
  width:46px;
  height:46px;
  border:none;
  border-radius:50%;
  background:rgba(255,255,255,0.18);
  color:#fff;
  font-size:20px;
  cursor:pointer;
  z-index:10;
  backdrop-filter:blur(10px);
  transition:0.3s ease;
}

.sh-modern-close:hover{
  background:#fff;
  color:#111;
}

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

@media(max-width:991px){

  .sh-modern-wrapper{
    grid-template-columns:1fr;
    gap:50px;
  }

  .sh-modern-left h2{
    font-size:40px;
  }

  .sh-modern-popup-image img{
    height:500px;
  }

  .sh-modern-overlay{
    padding:35px;
  }

  .sh-modern-overlay h3{
    font-size:30px;
  }

}

@media(max-width:768px){

  .sh-modern-features{
    padding:80px 6%;
  }

  .sh-modern-left h2{
    font-size:34px;
  }

  .sh-modern-item{
    padding:20px;
  }

  .sh-modern-content{
    padding-left:0;
  }

  .sh-modern-popup-image img{
    height:420px;
  }

  .sh-modern-overlay h3{
    font-size:26px;
  }

}

/* ===== FOOTER ===== */
.ax-footer{
  background:#e9f1f3;
  padding:80px 8%;
}

.ax-footer-container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:60px;
}

.ax-footer h3{
  font-size:28px;
  margin-bottom:15px;
}

.ax-footer p{
  color:#5f6c72;
}

.ax-outline-btn{
  display:inline-block;
  margin-top:20px;
  padding:12px 24px;
  border:1px solid #000;
  border-radius:30px;
  text-decoration:none;
  color:#000;
}

.ax-footer-links a{
  display:block;
  margin:8px 0;
  text-decoration:none;
  color:#5f6c72;
}

.ax-social span{
  margin-right:15px;
  font-weight:600;
}

/* ===== RESPONSIVE ===== */
@media(max-width:992px){
  .ax-features-container,
  .ax-footer-container{
    grid-template-columns:1fr;
  }
}