

    *{
      margin:0;
      padding:0;
      box-sizing:border-box;
    }

    body{
      font-family: "Poppins", sans-serif;
      overflow-x:hidden;
      background:#f5f4f1;
    }

    a{
      text-decoration:none;
    }

    /* =========================
       NAVBAR
    ==========================*/

    .navbar{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      z-index:99;
      padding:22px 0;
    }

    .navbar-brand{
      color:#fff !important;
      font-weight:700;
      letter-spacing:1px;
      font-size:24px;
    }

    .navbar-nav .nav-link{
      color:#fff !important;
      margin:0 12px;
      font-weight:500;
      position:relative;
    }

    .navbar-nav .nav-link::after{
      content:"";
      position:absolute;
      width:0;
      height:2px;
      background:#fff;
      left:0;
      bottom:-5px;
      transition:.4s;
    }

    .navbar-nav .nav-link:hover::after{
      width:100%;
    }

    .login-btn{
      background:#062b22;
      color:#fff;
      padding:14px 24px;
      font-weight:600;
      transition:.4s;
    }

    .login-btn:hover{
      background:#0c4638;
      color:#fff;
    }

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

    .hero{
      min-height:100vh;
      background:
      linear-gradient(rgba(6,102,71,.92),
      rgba(6,102,71,.92)),
      url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1400&auto=format&fit=crop');
      background-size:cover;
      background-position:center;
      display:flex;
      align-items:center;
      position:relative;
      overflow:hidden;
    }

    .hero::before{
      content:"NT";
      position:absolute;
      right:8%;
      top:50%;
      transform:translateY(-50%);
      font-size:340px;
      font-weight:700;
      color:rgba(255,255,255,.05);
    }

    .hero-content{
      position:relative;
      z-index:2;
      color:#fff;
    }

    .hero-sub{
      letter-spacing:4px;
      font-weight:600;
      margin-bottom:25px;
    }

    .hero-title{
      font-size:82px;
      font-weight:300;
      line-height:1.1;
      margin-bottom:35px;
    }

    .hero-desc{
      font-size:21px;
      max-width:700px;
      margin-bottom:50px;
      color:#e7e7e7;
    }

    .hero-btn{
      border:1px solid #fff;
      padding:18px 35px;
      color:#fff;
      display:inline-block;
      transition:.4s;
      font-weight:600;
      letter-spacing:1px;
    }

    .hero-btn:hover{
      background:#fff;
      color:#066647;
    }

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

    .news-section{
      padding:0;
    }

    .news-box{
      min-height:420px;
      overflow:hidden;
      position:relative;
      background:#efefec;
    }

    .news-content{
      padding:70px 50px;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .news-title{
      font-size:38px;
      margin-bottom:25px;
      line-height:1.3;
      color:#111;
    }

    .news-text{
      color:#444;
      margin-bottom:25px;
    }

    .read-more{
      color:#066647;
      font-weight:600;
      transition:.4s;
    }

    .read-more:hover{
      letter-spacing:1px;
      color:#066647;
    }

    .news-img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:1s;
    }

    .news-box:hover .news-img{
      transform:scale(1.08);
    }

    /* =========================
       CARDS
    ==========================*/

 /* =========================
   CARD COMMON CSS
==========================*/
.cards-section{
    margin: 40px;
}
.info-card{
  position: relative;
  min-height: 500px;
  overflow: hidden;
  border-radius: 0;
  transition: .5s ease;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* CARD HOVER */

.info-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 20px 45px rgba(0,0,0,.18);
}

/* BACKGROUND IMAGES */

.career-card{
  background-image:
  url('https://images.northerntrust.com/content/dam/northerntrust/corporate/global/en/images/web/home-page/greater-career-666x552-desktop.png');
}

.about-card{
  background-image:
  url('https://images.northerntrust.com/content/dam/northerntrust/corporate/global/en/images/web/home-page/about-us-666x552-desktop.png');
}

.subscribe-card{
  background-image:
  url('https://images.northerntrust.com/content/dam/northerntrust/corporate/global/en/images/web/home-page/transform-ideas-666x552-desktop.png');
}

/* DARK OVERLAY */

.card-overlay{
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.35) 45%,
    rgba(0,0,0,.10) 100%
  );

  transition: .5s;
}

.info-card:hover .card-overlay{
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.45) 45%,
    rgba(0,0,0,.15) 100%
  );
}

/* CONTENT */

.info-top{
  position: relative;
  z-index: 2;

  height: 70%;
  padding: 30px;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  color: black;
}

/* HEADING */

.info-top h3{
  font-size: 25px;
  line-height: 1.25;
  margin-bottom: 10px;
  color: black;
  font-weight: 600;
}

/* PARAGRAPH */

.info-top p{
  color: rgb(32, 32, 32);
  line-height: 1.9;
  font-size: 16px;
  max-width: 90%;
}

/* LINK */

.info-link{
  margin-top: 15px;
  color: rgb(70, 68, 68);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: .4s;
  letter-spacing: .5px;
}

.info-link:hover{
  letter-spacing: 1.5px;
  color: #fff;
}

/* BUTTON */

.subscribe-btn{
  background:#066647;
  color:#fff;
  padding:16px 34px;
  display:inline-block;
  margin-top:25px;
  transition:.4s;
  font-weight:600;
  width: fit-content;
  border: 1px solid transparent;
}

.subscribe-btn:hover{
  background:#044433;
  color:#fff;
  transform: translateY(-3px);
}

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

@media(max-width:992px){

  .info-card{
    min-height: 550px;
  }

  .info-top{
    padding: 40px;
  }

  .info-top h3{
    font-size: 30px;
  }

}

@media(max-width:768px){

  .info-card{
    min-height: 430px;
  }

  .info-top{
    padding: 28px;
  }

  .info-top h3{
    font-size: 24px;
  }

  .info-top p{
    font-size: 14px;
    max-width: 100%;
  }

  .subscribe-btn{
    padding: 14px 24px;
    font-size: 14px;
  }

}


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

    footer{
      background:#066647;
      padding:40px 0;
    }

    footer a{
      color:#fff;
      margin-right:30px;
      font-weight:500;
    }

    footer p{
      color:#fff;
      margin:0;
    }

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

    @media(max-width:992px){

      .hero-title{
        font-size:55px;
      }

      .news-title{
        font-size:28px;
      }

      .info-card h3{
        font-size:28px;
      }

      .hero::before{
        font-size:180px;
      }
    }

    @media(max-width:768px){

      .navbar{
        background:#066647;
      }

      .hero{
        padding:140px 0 80px;
      }

      .hero-title{
        font-size:42px;
      }

      .hero-desc{
        font-size:18px;
      }

      .news-content{
        padding:45px 30px;
      }

      .news-box{
        min-height:auto;
      }

      .info-top{
        padding:30px;
      }

      footer{
        text-align:center;
      }

      footer a{
        display:block;
        margin:10px 0;
      }

      .hero::before{
        display:none;
      }
    }


/* =========================
   ENQUIRY MODAL
========================= */

.enquiry-modal .modal-dialog{
  max-width:500px;
}

.enquiry-modal .modal-content{
  border-radius:0;
  border:none;
  padding:55px;
  background:#f5f5f5;
  position:relative;
}

.modal-close{
  position:absolute;
  right:25px;
  top:25px;
  box-shadow:none !important;
}

.modal-icon{
  width:55px;
  height:55px;
  border:2px solid #2d5c18;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:25px;
}

.modal-icon i{
  font-size:24px;
  color:#2d5c18;
}

.mini-title{
  font-size:15px;
  letter-spacing:4px;
  color:#666;
  margin-bottom:15px;
}

.main-title{
  font-size:58px;
  font-weight:300;
  color:#333;
  margin-bottom:20px;
}

.modal-desc{
  max-width:560px;
  font-size:14px;
  line-height:1.7;
  color:#555;
  margin-bottom:20px;
}

.required-text{
  text-align:right;
  color:#222;
  font-size:15px;
  margin-bottom:25px;
}

.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px 30px;
}

.check-box{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:28px;
  font-weight:600;
  color:#444;
  cursor:pointer;
}

.check-box input{
  width:24px;
  height:24px;
  margin-top:6px;
  accent-color:#0d5f3b;
}

.check-box span{
  font-size:18px;
  line-height:1.4;
}

.custom-input{
  height:58px;
  border-radius:0;
  border:1px solid #ddd;
  padding-left:18px;
  font-size:16px;
  box-shadow:none !important;
}

.textarea{
  height:auto;
  padding-top:15px;
}

.custom-input:focus{
  border-color:#0d5f3b;
}

.terms-text{
  margin-top:35px;
  font-size:18px;
  line-height:1.8;
  color:#333;
}

.terms-text a{
  color:#2d7a32;
  text-decoration:none;
  font-weight:600;
}

.submit-btn{
  width:100%;
  border:none;
  background:#0d5f3b;
  color:#fff;
  height:62px;
  font-size:20px;
  margin-top:25px;
  transition:.4s;
}

.submit-btn:hover{
  background:#08482d;
}


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

@media(max-width:768px){

  .enquiry-modal .modal-content{
    padding:30px 20px;
  }

  .main-title{
    font-size:22px;
  }

  .modal-desc{
    font-size:16px;
  }

  .checkbox-grid{
    grid-template-columns:1fr;
  }

  .check-box span{
    font-size:16px;
  }

  .submit-btn{
    height:56px;
    font-size:18px;
  }

}

  
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      background: #f5f5f5;
      overflow-x: hidden;
    }

    /* BUTTON */

    .open-btn {
      position: fixed;
      top: 40px;
      right: 40px;
      background: #145c3a;
      color: #fff;
      border: none;
      padding: 14px 30px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 500;
      z-index: 1000;
      transition: .3s;
    }

    .open-btn:hover {
      background: #0f4a2f;
    }

    /* OVERLAY */

    .overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .45);
      opacity: 0;
      visibility: hidden;
      transition: .4s;
      z-index: 999;
    }

    .overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* SIDEBAR */

    .sidebar-form {
      position: fixed;
      top: 0;
      right: -100%;
      width: 100%;
      max-width: 650px;
      height: 100vh;
      background: #f5f5f5;
      overflow-y: auto;
      transition: .5s ease;
      z-index: 1000;
      padding: 50px 60px;
      box-shadow: -10px 0 40px rgba(0, 0, 0, .12);
    }

    .sidebar-form.active {
      right: 0;
    }

    /* CLOSE */

    .close-btn {
      position: absolute;
      top: 25px;
      right: 25px;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: none;
      background: #145c3a;
      color: #fff;
      font-size: 20px;
      cursor: pointer;
      transition: .3s;
    }

    .close-btn:hover {
      background: #0f4a2f;
      transform: rotate(90deg);
    }

    /* ICON */

    .top-icon {
      width: 45px;
      margin-bottom: 25px;
    }

    /* TEXT */

    .sub-title {
      letter-spacing: 4px;
      color: #555;
      font-size: 14px;
      margin-bottom: 18px;
      text-transform: uppercase;
    }

    .main-title {
      font-size: 38px;
      font-weight: 300;
      color: #3a3a3a;
     
    }

    .desc {
      font-size: 20px;
      color: #444;
      line-height: 1.8;
      margin-bottom: 50px;
      max-width: 500px;
    }

    .required {
      text-align: right;
      margin-bottom: 25px;
      font-size: 18px;
      color: #000;
    }

    .required span {
      color: red;
    }

    /* CHECKBOX AREA */

    .checkbox-title {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 25px;
      color: #222;
    }

    .checkbox-title span {
      color: red;
    }

    .checkbox-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 22px 35px;
      margin-bottom: 30px;
    }

    .custom-check {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .custom-check input {
      width: 24px;
      height: 24px;
      accent-color: #145c3a;
      cursor: pointer;
    }

    .custom-check label {
      font-size: 20px;
      color: #444;
      font-weight: 500;
      line-height: 1.3;
      cursor: pointer;
    }

    /* TERMS */

    .terms {
      font-size: 18px;
      line-height: 1.9;
      color: #333;
      margin-bottom: 45px;
    }

    .terms a {
      color: #1c7c3f;
      text-decoration: none;
      font-weight: 600;
    }

    /* BUTTON */

    .submit-btn {
      width: 100%;
      height: 65px;
      border: none;
      background: #145c3a;
      color: #fff;
      font-size: 22px;
      font-weight: 500;
      transition: .3s;
    }

    .submit-btn:hover {
      background: #0f4a2f;
    }

    /* RESPONSIVE */

    @media(max-width:768px) {

      .sidebar-form {
        padding: 35px 25px;
      }

      .main-title {
        font-size: 40px;
      }

      .desc {
        font-size: 17px;
      }

      .checkbox-grid {
        grid-template-columns: 1fr;
      }

      .custom-check label {
        font-size: 18px;
      }

      .terms {
        font-size: 16px;
      }

      .submit-btn {
        height: 58px;
        font-size: 20px;
      }

      .open-btn {
        right: 20px;
        top: 20px;
      }
    }
 