

@font-face {
    font-family: 'CairoRegular';
    src: url('fonts/Cairo-Regular.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'CairoBold';
    src: url('fonts/Cairo-Bold.ttf') format('truetype');
    font-weight: 900;
}

   *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      overflow-x:hidden;
      background:#fff;
       font-family: 'CairoRegular';
    }

    /* ================= NAVBAR ================= */

    .navbar{
      background:#fff;
      padding:18px 0;
      box-shadow:0 2px 10px rgba(0,0,0,0.05);
      z-index:999;
    }

    .navbar-nav .nav-link{
      color:#222;
      font-size:20px;
      margin-left:25px;
      font-weight:500;
      transition:0.3s;
    }

    .navbar-nav .nav-link:hover{
      color:#0d6efd;
    }
    .logo{
        height:50px;
        width:300px;
    }

    /* ================= HERO SLIDER ================= */

    .hero-slider{
      position:relative;
      height:100vh;
      overflow:hidden;
    }

    .carousel-item{
      height:100vh;
      position:relative;
    }

    .carousel-item img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1);
      transition:7s ease;
    }

    /*.carousel-item.active img{*/
    /*  transform:scale(1.08);*/
    /*}*/

    /*.overlay{*/
    /*  position:absolute;*/
    /*  top:0;*/
    /*  left:0;*/
    /*  width:100%;*/
    /*  height:100%;*/
    /*  background:rgba(0,0,0,0.45);*/
    /*}*/

    .slider-content{
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      text-align:center;
      color:#fff;
      z-index:2;
      width:100%;
      padding:0 20px;
    }

    .slider-content h1{
      font-size:70px;
      font-weight:700;
      margin-bottom:20px;
      animation:slideUp 1s ease;
    }

    .slider-content p{
      font-size:20px;
      max-width:850px;
      margin:auto;
      line-height:1.8;
      animation:slideUp 1.5s ease;
    }
    

    @keyframes slideUp{
      from{
        opacity:0;
        transform:translateY(50px);
      }
      to{
        opacity:1;
        transform:translateY(0);
      }
    }

    /* ================= ABOUT SECTION ================= */

    .about-section{
      position:relative;
      padding:120px 0;
      background:#fff;
      overflow:hidden;
    }
    .bg-text{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 150px;
    font-weight: 800;
    z-index: 0;
    pointer-events: none;

    /* Gradient Color */
    background: linear-gradient(to bottom, #efefef 0%, #fff 100%);

    /* Show gradient inside text */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* Optional */
    opacity: 0.9;
}


    .section-content{
      position:relative;
      z-index:2;
    }

    .about-text{
      max-width:950px;
      margin:auto;
      text-align:center;
      line-height:2;
      color:#444;
      font-size:17px;
    }

    /* ================= COUNTER ================= */

    .stats-section{
      background: linear-gradient(#0D2E39, #1A5D65);
      padding:40px 0;
      overflow:hidden;
    }

    .stat-box{
      position:relative;
      padding-left:30px;
      opacity:0;
      transform:translateX(-80px);
      transition:1s ease;
    }

    /* Active Animation */

    .stat-box.show{
      opacity:1;
      transform:translateX(0);
    }

    /*================ LEFT LINE ================*/

    .stat-line{
      position:absolute;
      left:0;
      top:0;
      width:4px;
      height:0;
      background:#ff4d1c;
      transition:1s ease;
    }

    .stat-box.show .stat-line{
      height:58px;
    }

    /*================ TEXT ================*/

    .big-number{
      color:#fff;
      font-size:50px;
      font-weight:700;
      line-height:1;
    }

    .title{
      color:#fff;
      font-size:50px;
      font-weight:700;
      line-height:0.9;
      margin-bottom:5px;
    }

    .small-title{
      color:#fff;
      font-size:24px;
      font-weight:700;
      line-height:1.1;
      margin-bottom:5px;
    }

    .desc{
      color:#fff;
      font-size:16px;
      line-height:1.3;
      opacity:0.95;
      max-width:220px;
    }

    /*================ RESPONSIVE ================*/

    @media(max-width:991px){

      .stat-box{
        margin-bottom:40px;
      }

      .big-number{
        font-size:48px;
      }

      .title{
        font-size:42px;
      }
    }

    @media(max-width:767px){

      .stats-section{
        padding:50px 20px;
      }

      .big-number{
        font-size:42px;
      }

      .title{
        font-size:38px;
      }

      .small-title{
        font-size:22px;
      }

      .desc{
        font-size:15px;
      }
    }

    /* ================= FLOATING BUTTON ================= */

    .call-btn{
      position:fixed;
      right:30px;
      bottom:30px;
      width:65px;
      height:65px;
      background:#3949ab;
      color:#fff;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:25px;
      z-index:999;
      animation:pulse 2s infinite;
      text-decoration:none;
    }

    @keyframes pulse{
      0%{
        box-shadow:0 0 0 0 rgba(57,73,171,0.7);
      }
      70%{
        box-shadow:0 0 0 18px rgba(57,73,171,0);
      }
      100%{
        box-shadow:0 0 0 0 rgba(57,73,171,0);
      }
    }

    /* ================= RESPONSIVE ================= */

    @media(max-width:991px){

      .slider-content h1{
        font-size:45px;
      }

      .bg-text{
        font-size:90px;
      }

      .counter-box{
        margin-bottom:40px;
      }
    }

    @media(max-width:767px){

      .slider-content h1{
        font-size:35px;
      }

      .slider-content p{
        font-size:16px;
      }

      .bg-text{
        font-size:60px;
        top:80px;
      }

      .counter-box h2{
        font-size:42px;
      }
    }



     .industry-section{
      padding:40px 0;
      position:relative;
      overflow:hidden;
    }

    .industry-title{
      text-align:center;
      font-size:55px;
      font-weight:700;
       font-family: 'CairoBold';
      color:#444;
      margin-bottom:50px;
    }

    /*================ AUTO SLIDER ================*/

    .industry-slider{
      width:100%;
      overflow:hidden;
      position:relative;
    }

    .industry-track{
      display:flex;
      width:max-content;
      animation:scroll 22s linear infinite;
    }

    .industry-slider:hover .industry-track{
      animation-play-state:paused;
    }

    @keyframes scroll{

      0%{
        transform:translateX(0);
      }

      100%{
        transform:translateX(-50%);
      }
    }

    /*================ CARD ================*/

    .industry-card{
      width:160px;
      text-align:center;
      margin:0 18px;
      flex-shrink:0;
      transition:0.4s;
    }

    .industry-card:hover{
      transform:translateY(-8px);
    }

    .industry-icon{
      width:110px;
      height:110px;
      margin:auto;
      border-radius:50%;
      background:#d9d9d9;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:15px;
      transition:0.4s;
    }

    .industry-card:hover .industry-icon{
      background:#3d56a6;
    }

    .industry-icon i{
      font-size:42px;
      color:#3f6f7a;
      transition:0.4s;
    }

    .industry-card:hover .industry-icon i{
      color:#fff;
      transform:scale(1.1);
    }

    .industry-name{
      font-size:17px;
      color:#333;
      font-weight:500;
    }

    /*================ RESPONSIVE ================*/

    @media(max-width:768px){

      .industry-title{
        font-size:38px;
      }

      .industry-card{
        width:130px;
        margin:0 12px;
      }

      .industry-icon{
        width:90px;
        height:90px;
      }

      .industry-icon i{
        font-size:34px;
      }

      .industry-name{
        font-size:15px;
      }
    }

