:root {
  --omnora-blue: #002d5b;
  --omnora-grey: #666666;
}
body {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: var(--omnora-blue);
}
.text-omnora-blue {
  color: var(--omnora-blue);
}
.text-omnora-grey {
  color: var(--omnora-grey);
}
.bg-omnora-blue {
  background-color: var(--omnora-blue);
}

.btn-omnora-primary {
  background-color: var(--omnora-blue);
  color: white;
  border-radius: 50px;
  padding: 12px 35px;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}
.btn-omnora-primary:hover {
  background-color: #001f3a;
  color: white;
  transform: scale(1.05);
  box-shadow: #001f3a 0px 4px 15px;
}
.btn-omnora-primary:active {
  background-color: #001f3a !important;
  color: white !important;
}
.btn-omnora-outline {
  border: 1px solid var(--omnora-grey);
  color: var(--omnora-blue);
  border-radius: 50px;
  padding: 12px 35px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-omnora-outline:hover {
  background-color: white;
  transform: scale(1.05);
  box-shadow: #001f3a 0px 4px 15px;
}

.section-spacing {
  padding: 100px 0;
}
.home
{
  padding-top: 110px !important;
  padding-bottom: 150px !important;
}

.title
{
  max-width: 1000px;
  font-size: 70px;
}
.methodology-number {
  font-size: 2.5rem;
  font-weight: 300;
  color: #e9ecef;
}
.form-control {
  padding: 1rem;
  border-color: #eee;
}
.form-control:focus {
  box-shadow: none;
  border-color: var(--omnora-blue);
}

.aboutUsTitle
{
  font-size: 40px;
}
.aboutUsTitle2
{
  font-size: 18px;
}
.AboutUsSub
{
  max-width: 580px;
  font-size: 18px;
}
.RoundedAboutUs
{
  font-size: 20px;
}
.abouticons
{
  border: 2px solid var(--omnora-blue);
  transition: all 0.3s ease;
}
.abouticons:hover
{
  transform: scale(1.1) rotate(1deg);
  transition: all 0.3s ease;
}
.abouticonsspecial:hover
{
  transform: scale(1.1) rotate(-1deg);
  transition: all 0.3s ease;
}
.secCol
{
  position: relative;
  left: 50px;
  width: 53%;
}
.secAboutus
{
  font-size: 60px;
  opacity: 0;
}
.secAboutus.Animate
{
  animation: fadeUp 1.5s ease forwards;
  animation-delay: 0.6s;
}
.parAboutUs
{
  opacity: 0;
}
.parAboutUs.Animate
{
  animation: fadeUp 1.5s ease forwards;
  animation-delay: 0.7s;
}
.iconsec
{
  opacity: 0;
}
.iconsec.Animate
{
  animation: fadeUp 1.5s ease forwards;
  animation-delay: 0.8s;
}
.AboutUsImage
{
  transform: rotate(-90deg) scale(0.7);
  transition: all 1.9s ease;
  box-shadow: rgba(31, 49, 97, 0.3) 0px 0px 40px;
  opacity: 0;
}
.AboutUsImage.in-view {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    transition: opacity 1.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1.9s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 1.9s ease;
}
.AboutUsImage:hover
{
  transform: scale(1.02) rotate(-0.5deg);
  transition: all 0.3s ease;
}
/* Section Spacing */
        .section-padding { padding: 120px 24px; }

        /* Glass Card Effect */
        .glass-card { 
            background: rgba(255, 255, 255, 0.3); 
            backdrop-filter: blur(12px);
            border: 1px solid rgba(31, 49, 97, 0.08);
            transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
        }
        
        .glass-card:hover {
            background: rgba(255, 255, 255, 0.7);
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(31, 49, 97, 0.08);
        }

/* --- Keyframes --- */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Apply to elements --- */

/* Initial states */


.col-lg-7 {
    opacity: 0;
    transform: translateX(-80px);
    transition: opacity 1.5s ease, transform 3s ease;
}

.col-lg-4.offset-lg-1 {
    opacity: 0;
    transform: translateX(80px);
    transition: opacity 1.5s ease, transform 3s ease;
}

/* Animated state (triggered by JS) */
.col-lg-7.animate-in,
.col-lg-4.offset-lg-1.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Optional stagger for the list items */
.col-lg-4.offset-lg-1.animate-in .d-flex:nth-child(1) { transition-delay: 0.2s; }
.col-lg-4.offset-lg-1.animate-in .d-flex:nth-child(2) { transition-delay: 0.35s; }
.col-lg-4.offset-lg-1.animate-in .d-flex:nth-child(3) { transition-delay: 0.5s; }
.col-lg-4.offset-lg-1.animate-in .d-flex:nth-child(4) { transition-delay: 0.65s; }

/* Badge / eyebrow label */
header .text-uppercase {
  display: inline-block;
  opacity: 0;
  animation: fadeUp 2s ease forwards;
  animation-delay: 0.1s;

  /* Shimmer sweep across the badge text */
  background: linear-gradient(
    90deg,
    var(--omnora-grey) 0%,
    #001f3a 40%,
    var(--omnora-grey) 60%,
    var(--omnora-grey) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: 
    fadeUp 0.6s ease forwards 0.1s,
    shimmer 3s linear 0.8s 1;
}

/* Main heading */
header h1 {
  opacity: 0;
  animation: fadeUp 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.3s;
}

/* Subheading / lead paragraph */
header .lead {
  opacity: 0;
  animation: fadeUp 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.5s;
}

/* Button group wrapper */
header .d-flex {
  opacity: 0;
  animation: scaleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.75s;
}



@media all and (max-width: 445px)
{
    .title
    {
        font-size: 30px;
    }
    header .lead 
    {
        font-size: 16px;
    }
    .btn-omnora-primary 
    {
        width: 75%;
        margin: auto;
    
    }
    .btn-omnora-outline
    {
        width: 75%;
        margin: auto;
    }
    .secCol
    {
      position: relative;
      left: 0px;
      width: 100%;
    }

    .secAboutus
    {
      font-size: 30px;
      opacity: 0;
      text-align: center;
    }
    .parAboutUs
    {
      text-align: center;
    }
     .aboutUsTitle
    {
      font-size: 40px;
      text-align: center;
    }
    .aboutUsTitle2
    {
      text-align: center;
    }
    .AboutUsSub
    {
      text-align: center;
      margin: auto;
    }
    .RoundedAboutUs
    {
      font-size: 13.5px !important;
      justify-content: center;
    }
    .RoundedAboutUsCol
    {
      position: relative;
      top:20px;
    }

    .RoundedAboutUsCol .rounded-circle
    {
      width: 13px !important;
      height: 8px !important;
    }
    .secondColAboutUs
    {
      display: flex;
      justify-content: left;
      align-items: left;
      flex-direction: column;
      
    }
    .parentColAboutUsSecondCol
    {
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto;
      margin: auto;
      gap: 3rem !important;
      margin-top: 30px !important;
    }
    .btn-omnora-primary 
    {
      font-size: 15px !important;
    }
    .btn-omnora-outline 
    {
      font-size: 15px !important;
    }
    .text-uppercase
    {
        font-size: 13px !important;
    }
    header .lead 
    {
        font-size: 19px !important;
    }
    
}
/* (min-width: 576px) and (max-width: 768px ) */
/* Extra small devices (portrait phones, less than 576px) */
@media all and (min-width: 445px) and (max-width: 576px)
{
    .text-uppercase
    {
        font-size: 13px !important;
    }
    .title
    {
        font-size: 40px;
    }
    header .lead 
    {
        font-size: 19px !important;
    }
    .btn-omnora-primary 
    {
        width: 75%;
        margin: auto;
    
    }
    .btn-omnora-outline
    {
        width: 75%;
        margin: auto;
    }
    .secCol
    {
      position: relative;
      left: 0px;
      width: 100%;
    }
    .secAboutus
    {
      font-size: 30px;
      text-align: center;
    }
    .parAboutUs
    {
      text-align: center;
    }
    .aboutUsTitle
    {
      font-size: 40px;
      text-align: center;
    }
    .aboutUsTitle2
    {
      text-align: center;
    }
    .AboutUsSub
    {
      text-align: center;
      margin: auto;
    }
    .RoundedAboutUs
    {
      font-size: 16.5px !important;
      justify-content: center;
    }
    .RoundedAboutUsCol
    {
      position: relative;
      top:20px;
    }

    .RoundedAboutUsCol .rounded-circle
    {
      width: 13px !important;
      height: 8px !important;
    }
    .secondColAboutUs
    {
      display: flex;
      justify-content: left;
      align-items: left;
      flex-direction: column;
    }
    .parentColAboutUsSecondCol
    {
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto;
      margin: auto;
      gap: 3rem !important;
      margin-top: 30px !important;
    }

}

/* Small devices (landscape phones, less than 768px) */
@media all and (min-width: 576px) and (max-width: 768px )
{
    .title
    {
        font-size: 40px;
    }
    .secCol
    {
      position: relative;
      left: 0px;
      width: 100%;
    }
    .secAboutus
    {
      font-size: 45px;
      text-align: center;
    }
    .parAboutUs
    {
      text-align: center;
    }
    .aboutUsTitle
    {
      font-size: 55px;
      text-align: center;
    }
    .aboutUsTitle2
    {
      text-align: center;
    }
    .AboutUsSub
    {
      text-align: center;
      margin: auto;
    }
    .RoundedAboutUsCol
    {
      position: relative;
      top:20px;
    }
    .RoundedAboutUsCol
    {
      position: relative;
      top:20px;
    }
    .RoundedAboutUsCol .rounded-circle
    {
      width: 13px !important;
      height: 8px !important;
    }
    .secondColAboutUs
    {
      display: flex;
      justify-content: left;
      align-items: left;
      flex-direction: column;
    }
    .parentColAboutUsSecondCol
    {
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto;
      margin: auto;
      gap: 3rem !important;
      margin-top: 30px !important;
    }
}

/* Medium devices (tablets, less than 992px) */
@media all and (min-width: 768px) and (max-width: 992px  )
{
    .title
    {
        font-size: 60px;
        max-width: 1000px;
    }
    .secCol
    {
      position: relative;
      left: 0px;
      width: 100%;
    }
    .secAboutus
    {
      font-size: 45px;
      text-align: center;
    }
    .parAboutUs
    {
      text-align: center;
    }

    .aboutUsTitle
    {
      font-size: 55px;
      text-align: center;
    }
    .aboutUsTitle2
    {
      text-align: center;
    }
    .AboutUsSub
    {
      text-align: center;
      margin: auto;
    }
    .RoundedAboutUsCol
    {
      position: relative;
      top:20px;
    }
    .RoundedAboutUs
    {
      
      font-size: 17.5px !important;
      justify-content: center;
    }
    /*class="d-flex flex-column gap-2 justify-content-left align-items-left"*/
    .secondColAboutUs
    {
      display: flex;
      justify-content: left;
      align-items: left;
      flex-direction: column;
    }
    .parentColAboutUsSecondCol
    {
      display: flex;
      justify-content: center;
      align-items: center;
      width: auto;
      margin: auto;
      gap: 3rem !important;
      margin-top: 30px !important;
    }
}
@media all and (min-width: 992px) and (max-width: 1200px  )
{
  .secAboutus
  {
    font-size: 45px;
  }
  .parAboutUs
  {
    font-size: 18px;
  }
  .RoundedAboutUs
  {
    
    font-size: 17px !important;
    justify-content: center;
  }
  .special
  {
    width: 10px !important;
  }
  .special2
  {
    width: 10px !important;
  }
}

/* Extra large devices (large desktops, less than 1400px) */
@media all and (min-width: 1200px) and (max-width: 1398px  ){
  .secAboutus
  {
    font-size: 50px;
  }
}