@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

  html {scroll-behavior: smooth; overflow-x: hidden}
  body { font-family: "Lato", sans-serif;  line-height: 1.7; transition: ease-in-out all 0.3s; overflow-x: hidden; margin: 0; padding: 0;}
  P {margin: 0 0 15px 0;font-size: 18px;letter-spacing: .4px;color: #343434;font-weight: 400;font-family: "Lato", sans-serif;}
  a { text-decoration: none; outline: none; font-family: "Lato", sans-serif;}
  .heading { font-size: 40px; font-weight: 600; margin: 0 0 20px 0; color: #110f3b}
  .heading span { color: #130d4b;}
  .sub-heading1 {color: #0097da;text-transform: uppercase;font-size: 19px;font-weight: 600;letter-spacing: 1px;margin: 0 0 15px 0;}
  .sub-heading { font-size: 30px; font-weight: bolder; margin: 0 0 20px 0; color: #130d4b;}
  .custom-btn { display: inline-block; background: #0097da; color: #fff; padding: 12px 30px; font-size: 15px; letter-spacing: .7px; border-radius: 5px; transition: all .3s ease-in-out;} 
  .custom-btn:hover { background: #110f3b; color: #fff; transform: scale(.95);}
  .custom-btn1 { display: inline-block; background: #130d4b; color: #fff; padding: 8px 21px; font-size: 14px; letter-spacing: .7px; border-radius: 5px; transition: all .3s ease-in-out;} 
  .custom-btn1:hover { background: #0097da; color: #fff; transform: scale(.95);}

  .navbar { background: #fff; padding: 4px 0;}
  .navbar .navbar-brand { width: 150px}
  .navbar .nav-item .nav-link { color: #252525; font-weight: 400; letter-spacing: .5px; margin: 0 10px;}
  .navbar .nav-item .nav-link:hover {color: #00b7d7;}
  .dropdown:hover>.dropdown-menu { display: block;}
  .dropdown-menu { left: 20px;  width: 300px; margin: 0; padding: 0; border-radius: 0; border: 0; border-top: 3px solid #00b7d7;}
  .dropdown-menu a{ font-size: 15px; padding: 12px 15px; border-bottom: 1px solid #ddd; margin: 0;}
  .dropdown-menu li:last-child a{ border-bottom: 0;}
  .dropdown-menu a:hover{ background: none ; color: #00b7d7; font-weight: 600;}
  .navbar.scrolled { transition: all 400ms;  box-shadow: 0px 12px 32px 0px rgba(140, 140, 140, .1); padding: 0;}

  .banner-section .carousel-item img{filter: brightness(90%);width: 100%;height: 94vh;object-fit: cover; position: relative}
  .banner-section .carousel-item:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(90deg, rgb(17 15 59), rgba(51, 51, 51, 0));} 
  .banner-section .carousel-caption {width: 47%;bottom: 25%;border-radius: 5px;animation: fadeInRight 2s ease forwards;z-index: 3;margin: 0 auto;} 
  .banner-section .carousel-control-next, .banner-section .carousel-control-prev {background: #ffffff14;width: 42px;height: 42px;border-radius: 50%;padding: 8px;top: 50%;transform: translate(0, -50%);}
  .banner-section .carousel-control-next { right: 3%;}
  .banner-section .carousel-control-prev { left: 3%}
  .banner-section .carousel-caption h1 {color: #ffffff;font-size: 60px;letter-spacing: .8px;margin: 0 0 20px 0;font-weight: 700;padding-bottom: 15px;border-bottom: 1px solid rgba(255, 255, 255, .2);}
  .banner-section .carousel-caption p {color: #e7e7e7;margin: 0 0 30px 0;font-size: 31px;/* font-weight: 600; */letter-spacing: .8px;line-height: 42px;}
  .banner-section .carousel-caption .btn1 { display: inline-block; background: transparent; color: #fff; border: 1px solid #fff; padding: 11px 26px; font-size: 15px; letter-spacing: .6px; border-radius: 5px;} 

  @keyframes fadeInRight { 
      0%{opacity: 0; transform: translate(60px, 60px); }
      100% { opacity: 1; transform:  translateX(0px);}
  } 

  .banner-bottom { padding: 7% 0; position: relative}
  .banner-bottom::after{ content: ''; position: absolute; height: 100%; width: 50%; background-image: linear-gradient(65deg, #110f3b, #0097da); left: 0; top: 0;}
  .banner-bottom .who-we-are {padding: 50px;box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;border-radius: 20px;position: relative; z-index: 3; background: #fff;}
  .banner-bottom .who-we-are::after { content: ''; position: absolute; width: 50px; height: 30px; background: #0097da; top: 30px; left: -20px;}
  .banner-bottom .who-we-are h4 {color: #110f3b;font-size: 28px;margin: 0 0 15px 0;font-weight: 600;}
  .banner-bottom .who-we-are p { margin: 0;}

  .what-we-do { padding: 6% 0; background: #e9e9e9;}
  .ser-card { background: #fff; border-radius: 10px; padding: 30px; transition: all .3s ease-in-out; margin: 15px 0 0 0; min-height: 230px;}
  .ser-card:hover { transform: scale(1.04);}
  .ser-card img { width: 70px; margin: 0 0 15px 0;}
  .ser-card h4 { color: #0097da; font-size: 20px; font-weight: 500; margin: 0 0 5px 0;} 
  .ser-card p { color: #525963; line-height: 1.4; margin: 0;}
  

  .about-section { padding: 8% 0;}
  .about-section p a { color: #010c7a; font-weight: 500; transition: all .3s ease-in-out;}
  .about-section p a:hover { letter-spacing: 2px;}
  .about-section .pic { position: relative;}
  .about-section .pic::before {position: absolute;content: '';width: 90%;height: 100%;border: 2px solid #0097da;top: -30px;left: -30px;border-radius: 20px;}
  .about-section .pic img {border-radius: 15px;position: relative;width: 90%;z-index: 2;box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 15px;}
  .about-section .pic .ser {position: absolute;background: #110f3b;padding: 30px;border-radius: 15px;outline-offset: -10px;outline: 2px dashed #fff;right: 0;bottom: 50px;z-index: 3;width: 240px;}
  .about-section .pic .ser h3 {color: #fff;font-size: 33px;font-weight: 700;margin: 0 0 10px 0;line-height: 1;}
  .about-section .pic .ser p {color: #fff;font-size: 17px;margin: 0;/* font-weight: 600; */letter-spacing: 1px;}

  .vision-mission { padding: 5% 0; background: #110f3b;}
  .vision-mission .vision-card .icon { background: #fff; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; width: 75px; height: 75px; border-radius: 50%; text-align: center; padding: 10px; padding: 15px; margin: 0 0 20px 0;}
  .vision-mission .vision-card h4 { color: #fff; text-transform: uppercase; font-size: 20px; letter-spacing: 1px;}
  .vision-mission .vision-card p { color: #e9e9e9; font-weight: 300; margin: 0;}

  .service-section {padding: 7% 0;}
  .service-section .ser-card {border-radius: 10px;margin: 25px 0 0 0;box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;overflow: hidden;transition: all .3s ease-in-out;min-height: 490px;padding: 0; position: relative;}
  .service-section .ser-card:hover { transform: scale(1.03);}
  .service-section .ser-card img {width: 100%;height: 260px;object-fit: cover;border-radius: 10px 10px 0 0;}
  .service-section .ser-card h4 { color: #110f3b; font-size: 21px; font-weight: bolder; letter-spacing: .5px; margin: 0 0 10px 0;}
  .service-section .ser-card .text {padding: 10px 20px 20px 20px;}
  .service-section .ser-card p {margin: 0 0 20px 0;font-size: 16px;}
  .service-section .ser-card .custom-btn1 { position: absolute; bottom: 30px}

  .service-section ul{margin: 0 0 15px 0;font-size: 18px;letter-spacing: .4px;color: #343434;font-weight: 400;font-family: "Lato", sans-serif;
    }
    @media (min-width: 320px) and (max-width: 991px) {
        .service-section ul {margin: 0 0 15px 0;font-size: 16px;}
    }

  .why-choose-us { padding: 0 0 5% 0;}
  .why-choose { margin: 25px 0; align-items: center;}
  .why-choose-us .pic img { border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 15px; }
  .why-choose .icon { width: 14%;}
  .why-choose .icon i { display: inline-block; width: 60px; height: 60px; background-image: linear-gradient(45deg, #0097da, #110f3b); border-radius: 50%; color: #fff; font-size: 24px; line-height: 2.7;}
  .why-choose .text { width: 86%;}
  .why-choose .text p { margin: 0; font-size: 20px;}
  .why-choose-us .pic { position: relative;}
  .why-choose-us .pic img {border-radius: 15px;position: relative; width: 98%; left: 2%; z-index: 2;box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 15px;}
  .why-choose-us .pic .ser {position: absolute;background: #110f3b;padding: 30px;border-radius: 15px;outline-offset: -10px;outline: 2px dashed #fff; left: -50px; bottom: 50px;z-index: 3;width: 240px;}
  .why-choose-us .pic .ser h3 {color: #fff;font-size: 33px;font-weight: 700;margin: 0 0 10px 0;line-height: 1;}
  .why-choose-us .pic .ser p {color: #fff;font-size: 17px;margin: 0;/* font-weight: 600; */letter-spacing: 1px;}

  .Whom-we-serve { padding: 6% 0; background: #e9e9e9;}
  .Whom-we-serve .nav-pills .nav-link {text-align: left;background: #fff !important;margin: 0 0 15px 0;padding: 30px;border-radius: 8px;box-shadow: 0px 6px 15px 0px rgb(44 44 44 / 50%);}
  .Whom-we-serve .nav-pills .nav-link h4 {font-size: 21px;color: #003d6d;font-weight: 600;line-height: 1.4;margin: 0;}
  .Whom-we-serve .nav-pills .nav-link.active {background: #110f3b !important;}
  .Whom-we-serve .nav-pills .nav-link.active h4 {color: #fff;font-weight: 500;}
  .Whom-we-serve .tab-pane h4 {margin: 20px 0 10px 0;font-size: 26px;color: #110f3b;font-weight: 700;}

  .Career-section { background-image: url(../images/career-bg.jpg); background-size: cover; background-position: right; padding: 5% 0; position: relative;}
  .Career-section::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #0097da ; opacity: .3;}

  .contact-section { padding: 5% 0 6% 0;}
  .contact-form {background: #fff;padding: 40px 150px 40px 40px;box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; border-radius: 10px;}
  .Career-section .contact-form { padding: 40px; position: relative; z-index: 2;}
  .btn {
      background: #0097da;
      color: #fff;
      padding: 12px 30px;
      font-size: 15px;
      letter-spacing: .7px;
      border-radius: 5px;
      transition: all .3s ease-in-out;
  }
  .btn:hover {
      background: #110f3b !important;
      color: #fff;
  }

/* Blog */
   .blog-page .blog-card { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;padding: 40px;border-radius: 10px;}

  form .form-control, form .form-select {margin: 0 0 25px 0;padding: 12px; font-size: 14px; border: none;border-radius: 0;border-bottom: 1px solid #7a7a7a;}
  form .form-control::placeholder { font-size: 15px;}
  form button {background: #0097da !important; color: #fff; padding: 12px 30px !important; font-size: 15px; letter-spacing: .7px; border-radius: 5px; transition: all .3s ease-in-out;}  
  form button:hover { background: #110f3b}
  .contact-section .contact-info {background: #0097da;padding: 40px;margin-left: -80px;/* margin-top: 190px; */border-radius: 10px;}

  footer {background-image: linear-gradient(45deg, #0097da, #110f3b);padding: 7% 0 0 0;}
  footer h4 { color: #fff; font-size: 20px; margin: 0 0 25px 0; position: relative; letter-spacing: .8px;}
  footer h4::after { content: ''; position: absolute; width: 50px; height: 3px; background: rgba(255, 255, 255, .4); border-radius: 5px; left: 0; bottom: -10px;}
  footer ul, footer ul li { list-style-type: none; margin: 0; padding: 0;}
  footer p, footer p a, footer li a { color: #ebebeb; font-size: 14px; margin: 0 0 10px 0; letter-spacing: .5px; transition: all .2s ease-in-out;}
  footer p i, footer li i { color: #fff; font-size: 13px; margin: 0 5px 0 0;}
  footer a:hover { color: #0097da; letter-spacing: 1.5px;}
  footer .footer-bottom {margin: 4% 0 0 0;border-top: 1px solid rgba(204, 204, 204, .4);padding: 15px 0;}
  footer .footer-bottom p { margin: 0;}
  footer .contact-details .icon i{ color: #fff; font-size: 20px; margin: 0 12px 0 0; display: inline-block;}
  footer .contact-details .text h5{ color: #fff; font-size: 19px; margin: 0 0 6px 0; font-weight: 700;} 
  footer .contact-details .text p { color: #c9c9c9; margin: 0; font-size: 14px;}
  footer .social-icon a {position: relative;color: #fff;background: rgba(255, 255, 255, .2);font-size: 15px;width: 40px;height: 40px;margin: 0 5px 0 0;display: inline-block;border-radius: 50%;text-align: center;line-height: 2.8;transition: all .2s ease-in-out;}
  footer .social-icon a i { position: relative; z-index: 3;}
  footer .social-icon a::before{ content: ''; position: absolute; width:100%; height: 100%; border-radius: 50%; background: #0097da; left: 0; transform: scale(0); transition: all .4s ease-in-out;}
  footer .social-icon a:hover { color: #ffffff;}
  footer .social-icon a:hover::before { transform: scale(1);}


  @media (min-width:320px) and (max-width:991px){
    body { line-height: 1.6;}
    P { margin: 0 0 15px 0; font-size: 16px;}
    .heading { font-size: 27px; margin: 0 0 15px 0;}
    .custom-btn { padding: 7px 18px; font-size: 14px;}
    .title { font-size: 14px; margin: 20px 0;}

    .navbar .navbar-brand { width: 120px}

    .banner-section .carousel-item img{ height: 250px; }
    .banner-section .carousel-caption { width: 80%; left: 10%; bottom: 5%; padding: 20px;} 
    .banner-section .carousel-control-next, .banner-section .carousel-control-prev { width: 27px; height: 27px; padding: 5px;}
    .banner-section .carousel-control-next { right: 2%;}
    .banner-section .carousel-control-prev { left: 2%}
    .banner-section .carousel-caption h1 { font-size: 20px; margin: 0 0 15px 0; font-weight: normal; letter-spacing: .5px;}
    .banner-section .carousel-caption p { font-size: 16px; line-height: 24px; margin: 0 0 10px 0;}
    .banner-section .carousel-caption .btn1 { padding: 5px 10px; font-size: 12px;} 
    .banner-section .carousel-caption .custom-btn { font-size: 12px; letter-spacing: .4; padding: 5px 10px;}

    .banner-bottom .who-we-are {padding: 35px; margin: 10px 0;}
    .banner-bottom .who-we-are::after { content: ''; position: absolute; width: 40px; height: 40px; background: #0097da; top: 30px; left: -15px;}

    .about-section .pic::before {width: 90%; top: -10px;left: -10px;}
    .about-section .pic img {border-radius: 10px; margin: 0 0 20px 0;}
    .about-section .pic .ser {padding: 25px; bottom: 40px;z-index: 3;width: 200px;}
    .about-section .pic .ser h3 { font-size: 24px;}
    .about-section .pic .ser p { font-size: 14px;}

    .vision-mission { padding: 5% 0; background: #110f3b;}
    .vision-mission .vision-card { border-bottom: 1px solid rgba(255, 255, 255, .2);}

    .why-choose-us { padding: 0 0 5% 0;}
    .why-choose { margin: 25px 0; align-items: center;}
    .why-choose-us .pic img { border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 15px; }
    .why-choose .icon { width: 14%;}
    .why-choose .icon i { width: 40px; height: 40px; font-size: 18px; line-height: 2.3;}
    .why-choose .text { width: 86%;}
    .why-choose .text p { margin: 0; font-size: 15px;}
    .why-choose-us .pic img {border-radius: 15px;position: relative; width: 90%; left: 10%;}
    .why-choose-us .pic .ser { padding: 25px; left: 0px; bottom: 30px;z-index: 3;width: 200px;}
    .why-choose-us .pic .ser h3 { font-size: 24px;}
    .why-choose-us .pic .ser p { font-size: 14px;}

    .Whom-we-serve .nav-pills .nav-link { margin: 0 0 10px 0;padding: 10px;}
    .Whom-we-serve .nav-pills .nav-link h4 {font-size: 12px; font-weight: 400;}
    .Whom-we-serve .tab-pane h4 {margin: 0 0 10px 0;font-size: 18px;color: #110f3b;font-weight: 700;}
    .Whom-we-serve .tab-pane P { font-size: 15PX;}

    .contact-section .contact-form { padding: 30px; margin: 0 0 20px 0;}
    .contact-section .contact-info {margin-left: 0px;}
  
    .service-section .ser-card .custom-btn1 { position: relative; bottom: 0;}

    .Career-section .contact-form { padding: 30px}

    footer h4 { margin: 20px 0;}
  }


  @media (min-width:992px) and (max-width:1200px){
    body { line-height: 1.6;}
    P {margin: 0 0 15px 0;font-size: 15px;}
    .heading { font-size: 27px; margin: 0 0 15px 0;}
    .custom-btn { padding: 7px 18px; font-size: 14px;}
    .title { font-size: 14px; margin: 20px 0;}

    .navbar .navbar-brand { width: 120px}

    .banner-section .carousel-item img{ height: 250px; }
    .banner-section .carousel-caption { width: 80%; left: 10%; bottom: 5%; padding: 20px;} 
    .banner-section .carousel-control-next, .banner-section .carousel-control-prev { width: 27px; height: 27px; padding: 5px;}
    .banner-section .carousel-control-next { right: 2%;}
    .banner-section .carousel-control-prev { left: 2%}
    .banner-section .carousel-caption h1 { font-size: 20px; margin: 0 0 15px 0; font-weight: normal; letter-spacing: .5px;}
    .banner-section .carousel-caption p { font-size: 16px; line-height: 24px; margin: 0 0 10px 0;}
    .banner-section .carousel-caption .btn1 { padding: 5px 10px; font-size: 12px;} 
    .banner-section .carousel-caption .custom-btn { font-size: 12px; letter-spacing: .4; padding: 5px 10px;}

    .banner-bottom .who-we-are {padding: 35px; margin: 10px 0;}
    .banner-bottom .who-we-are::after { content: ''; position: absolute; width: 40px; height: 40px; background: #0097da; top: 30px; left: -15px;}

    .about-section .pic::before {width: 90%; top: -10px;left: -10px;}
    .about-section .pic img {border-radius: 10px; margin: 0 0 20px 0;}
    .about-section .pic .ser {padding: 25px; bottom: 40px;z-index: 3;width: 200px;}
    .about-section .pic .ser h3 { font-size: 24px;}
    .about-section .pic .ser p { font-size: 14px;}

    .vision-mission { padding: 5% 0; background: #110f3b;}

    .why-choose-us { padding: 0 0 5% 0;}
    .why-choose { margin: 25px 0; align-items: center;}
    .why-choose-us .pic img { border-radius: 15px; box-shadow: rgba(0, 0, 0, 0.45) 0px 5px 15px; }
    .why-choose .icon { width: 14%;}
    .why-choose .icon i { width: 40px; height: 40px; font-size: 18px; line-height: 2.3;}
    .why-choose .text { width: 86%;}
    .why-choose .text p { margin: 0; font-size: 15px;}
    .why-choose-us .pic img {border-radius: 15px;position: relative; width: 90%; left: 10%;}
    .why-choose-us .pic .ser { padding: 25px; left: 0px; bottom: 30px;z-index: 3;width: 200px;}
    .why-choose-us .pic .ser h3 { font-size: 24px;}
    .why-choose-us .pic .ser p { font-size: 14px;}

    .Whom-we-serve .nav-pills .nav-link { margin: 0 0 10px 0;padding: 10px;}
    .Whom-we-serve .nav-pills .nav-link h4 {font-size: 12px; font-weight: 400;}
    .Whom-we-serve .tab-pane h4 {margin: 0 0 10px 0;font-size: 18px;color: #110f3b;font-weight: 700;}
    .Whom-we-serve .tab-pane P { font-size: 15PX;}

    .contact-section .contact-form { padding: 30px; margin: 0 0 20px 0;}
    .contact-section .contact-info {margin-left: 0px;}

  .service-section .ser-card {min-height: 460px;}
  .service-section .ser-card img {height: 200px;}
  .service-section .ser-card h4 { font-size: 18px;}
  .service-section .ser-card p {font-size: 15px;}
  
    .Career-section .contact-form { padding: 30px}
  }

  .modal-title {font-size: 21px;text-transform: uppercase;margin: 0;color: #110f3b;font-weight: 700;letter-spacing: .5px;}
  .modal-body { padding: 20px}
  .modal-body p, .modal-body li { font-size: 16px}