* {

       font-family: "Montserrat", sans-serif;

       font-optical-sizing: auto;

       /* font-weight: 600; */

       font-style: normal;

   }



  @font-face {

       font-family: 'MyriadPro';

       src: url('/fonts/mield.otf') format('opentype');

   }


a{

    text-decoration: none;

    color:#000;

}

 




   /* @font-face {

  font-family: 'parafont';

  src: url('../fonts/hossana.ttf') format('truetype');

} */





   h1,

   h2 {

       font-family: 'MyriadPro' !important;

       font-optical-sizing: auto;

       font-style: normal;

   }



   /* p,span{

   font-family: 'parafont';

   font-weight: 400;  

} */



   /* Loading Screen */

   #loading-screen {

       position: fixed;

       top: 0;

       left: 0;

       height: 100%;

       width: 100%;

       background: #111;

       color: #fff;

       display: flex;

       flex-direction: column;

       align-items: center;

       justify-content: center;

       z-index: 9999;

       overflow: hidden;

   }



   /* Logo in middle */

   #logo video {

       width: 100%;

       /* medium size */

       margin-bottom: 15px;

   }



   /* Progress text */

   #progress {

       font-size: 1.5rem;

   }



   /* Main Content */

   #main-content {

       opacity: 0;

       padding: 30px;

       text-align: center;

   }



   /* Fade In Up for main content */

   @keyframes fadeInUp {

       0% {

           opacity: 0;

           transform: translateY(50px);

       }



       100% {

           opacity: 1;

           transform: translateY(0);

       }

   }



   .fadeInUp-animation {

       animation: fadeInUp 2s ease-out forwards;

   }



   /* Shutter vanish (slide up) */

   @keyframes shutterUp {

       0% {

           transform: translateY(0);

           opacity: 1;

       }



       100% {

           transform: translateY(-100%);

           opacity: 0;

       }

   }



   .shutter-animation {

       animation: shutterUp 1.5s ease-in-out forwards;

   }



   /* ------------------------------------------------------------------ */



   .logo-head{

    width:140px;

   }





   .toggle,

   [id^=drop] {

       display: none;

   }



   .nav-glob {

       position: sticky;

       top: 0;

       padding: 2px 40px;

       z-index: 999;

   }



   nav {

       margin: 0;

       padding: 0;

       background-color: #ffffff;

   }



   #logo {

       display: block;

       padding: 0 30px;

       float: left;

       font-size: 20px;

       line-height: 60px;

   }



   nav:after {

       content: "";

       display: table;

       clear: both;

   }



   .nav-points {

       margin: auto;

   }



   nav ul {

       float: right;

       padding: 0;

       margin: 0;

       list-style: none;

       position: relative;

   }



   nav ul li {

       margin: 0px;

       display: inline-block;

       float: left;

       background-color: #ffffff;

   }



   nav a {

       display: block;

       padding: 0 20px;

       color: #000000;

       font-size: 16px;

       font-weight: 500;

       line-height: 60px;

       text-decoration: none;

   }



   nav ul li ul li:hover {

       background: #e6e6e6;

   }



   nav a:hover {

       background-color: #e6e6e6;

   }



   nav ul ul {

       display: none;

       position: absolute;

       top: 60px;

       border: 1px solid #ed6d00;

       border-radius: 0px;

   }



   nav ul li:hover>ul {

       display: inherit;

   }



   nav ul ul li {

       width: 350px;

       float: none;

       display: list-item;

       position: relative;

   }



   nav ul ul ul li {

       position: relative;

       top: -40px;

       left: 250px;

   }



   .nav ul li>a:after {

       content: ' +';

   }



   li>a:only-child:after {

       content: '';

   }



   .menu li a {

       color: rgb(0, 0, 0);

   }



   .menu li a:hover {

       color: #000000;

   }



   .call {

       margin: auto;

       text-align: right;

   }



   .call a:hover {

       color: #000000;

   }



   .book-btn {

       background-color: #7ab900;

       padding: 8px 10px;

       border-radius: 6px;

   }



   /* Media Queries

  --------------------------------------------- */



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



       #logo {

           display: block;

           padding: 0;

           width: 100%;

           text-align: center;

           float: none;

       }



       nav {

           margin: 0;

       }



       .toggle+a,

       .menu {

           display: none;

       }



       nav a {

           display: block;

           padding: 0 6px;

       }



       .toggle {

           display: block;

           /* background-color: #ffffff; */

           padding: 0px 6px;

           color: #000000;

           font-size: 18px;

           font-weight: 500;

           line-height: 60px;

           text-decoration: none;

           border: none;

       }



       /* .toggle:hover {

        background-color: #000000;

    } */



       [id^=drop]:checked+ul {

           display: block;

       }



       nav ul li {

           display: block;

           width: 100%;

       }



       nav ul ul .toggle,

       nav ul ul a {

           padding: 0 10px;

       }



       nav ul ul ul a {

           padding: 0 80px;

       }



       nav a:hover,

       nav ul ul ul a {

           background-color: #ffffff;

       }



       nav ul li ul li .toggle,

       nav ul ul a {

           background-color: #ffffff;

       }



       nav ul ul {

           float: none;

           position: static;

           color: #ffffff;

           width: 170%;

       }



       nav ul ul li:hover>ul,

       nav ul li:hover>ul {

           display: none;

       }



       nav ul ul li {

           display: block;

           width: 100%;

       }



       nav ul ul ul li {

           position: static;



       }

   }



   @media all and (max-width : 330px) {



       nav ul li {

           display: block;

           width: 94%;

       }



   }



   /* --------------------------------------------- */



  

 .hero.hero-slider {

    position: relative;

    min-height: 90vh;

    color: #fff;

    display: flex;

    align-items: center;

    overflow: hidden;

    background-color: #002a52; /* fallback while images load */

  }



  /* Slides wrapper */

  .hero .slides {

    position: absolute;

    inset: 0;

    z-index: 0;

  }



  /* Each slide is a full-cover background layer */

  .hero .slide {

    position: absolute;

    inset: 0;

    background-size: cover;

    background-position: center;

    opacity: 0;

    transform: scale(1.05); /* slight zoom for a subtle parallax feel */

    transition: opacity 900ms ease-in-out, transform 1200ms ease-in-out;

    will-change: opacity, transform;

  }

  .hero .slide.active {

    opacity: 1;

    transform: scale(1);

  }



  /* Optional: dark gradient overlay to improve text contrast */

  .hero .overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.15) 100%);

    z-index: 1;

    pointer-events: none;

  }



  /* Content sits above slides & overlay */

  .hero .content {

    position: relative;

    z-index: 2;

     padding:10px 75px;

  }

  .content h1{

    line-height:62px;

  }

  /* Buttons */

  .cta-btn, .cta-btn2 {

    display: inline-block;

    padding: 12px 22px;

    margin-right: 8px;

    margin-top: 10px;

    font-weight: 700;

    text-decoration: none;

    border-radius: 8px;

    transition: transform .15s ease, background-color .2s ease, border-color .2s ease;

  }

  .cta-btn { background-color: #ff9900; color: #fff; }

  .cta-btn:hover { transform: translateY(-1px); background-color: #cc7a00; color:white; }

  .cta-btn2 { background: transparent; border: 2px solid #fff; color: #fff; }

  .cta-btn2:hover { transform: translateY(-1px); background: rgba(255,255,255,.15);color:black;}



   .cta-btn a:hover{

    color:white !important;

   }

   .cta-btn2 a:hover{

    color:rgb(0, 0, 0) !important;

   }

  /* Right image subtle float */

  .banner-pdd img {

    max-width: 100%;

    height: auto;

    animation: floatImage 4s ease-in-out infinite;

  }

  @keyframes floatImage {

    0%, 100% { transform: translateY(0); }

    50% { transform: translateY(-8px); }

  }



  /* Nav arrows */

  .hero .nav {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 3;

    width: 46px;

    height: 46px;

    border-radius: 999px;

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

    background: rgba(0,0,0,.25);

    backdrop-filter: blur(2px);

    display: grid;

    place-items: center;

    cursor: pointer;

    user-select: none;

    transition: background .2s ease, transform .15s ease, border-color .2s ease;

  }

  .hero .nav:hover {

    background: rgba(0,0,0,.4);

    border-color: #fff;

    transform: translateY(-50%) scale(1.05);

  }

  .hero .nav:active {

    transform: translateY(-50%) scale(0.97);

  }

  .hero .nav svg {

    width: 20px; height: 20px; fill: #fff;

  }

  .hero .nav.prev { left: 14px; }

  .hero .nav.next { right: 14px; }



  /* Responsive height tweak */

  @media (max-width: 991.98px) {

    .hero.hero-slider { min-height: 100%; padding-top: 24px; padding-bottom: 24px; }

  }

   

   /* --------------------------------------------- */



   /* --------------------------------------------- */

   .mordern-mb {

       margin-bottom: 30px;

   }



   h2.modern-title {

       font-size: 2em;

       font-weight: 700;

       background:linear-gradient(90deg, #ff7a00, #e36d00);

       -webkit-background-clip: text;

       -webkit-text-fill-color: transparent;

       position: relative;

       display: inline-block;

       margin-bottom: 20px;

   }



   h2.modern-title::after {

       content: "";

       position: absolute;

       left: 50%;

       transform: translateX(-50%);

       bottom: -8px;

       width: 60px;

       height: 4px;

       background:linear-gradient(90deg, #ff7a00, #e36d00);

       border-radius: 2px;

   }



   .glob-lr {

       padding: 70px 80px;

   }





   .wht-txt {

       font-size: 2em;

       font-weight: 700;

       background: linear-gradient(90deg, #ffffff, #ffffff) !important;

       -webkit-background-clip: text !important;

       -webkit-text-fill-color: transparent !important;

       position: relative;

       display: inline-block;

       margin-bottom: 20px;

   }



   .wht-txt::after {

       content: "";

       position: absolute;

       left: 50%;

       transform: translateX(-50%);

       bottom: -8px;

       width: 60px;

       height: 4px;

       background: linear-gradient(90deg, #ffffff, #ffffff) !important;

       border-radius: 2px;

   }



   /* --------------------------------------------- */



   /* --------------------------------------------- */

   .demo-grid {

       display: grid;

       grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

       gap: 20px;

       margin: auto;

   }



   .demo-card {

       background: #2ba8da;

       border-top: 4px solid #e14400;

       border-radius: 10px;

       overflow: hidden;

       box-shadow: 0 5px 10px rgb(0 0 0 / 60%);

       text-align: center;

       transition: transform 0.2s;

       padding: 20px 0px;

       margin-bottom: 20px;

   }



   .demo-card:hover {

       transform: translateY(-5px);

       border-top: 6px solid #e14400;

   }



   .demo-card img {

       /* width:100%; */

       /* object-fit: cover; */

   }



   .demo-card h3 {

       font-size: 22px;

       margin-bottom: 10px;

       margin: 10px 0;

       color: white;

   }



   .btn {

       display: inline-block;

       padding: 10px 20px;

       background: #e14400;

       color: white;

       border: none;

       cursor: pointer;

       border-radius: 5px;

       margin-bottom: 15px;

       text-decoration: none;

   }



   .btn:hover {

       background: #a83200;

       color: white;

   }



   /* Popup Styles */

   .popup {

       display: none;

       position: fixed;

       z-index: 1000;

       left: 0;

       top: 0;

       width: 100%;

       height: 100%;

       background: #000000b3;

       justify-content: center;

       align-items: center;

   }



   .popup-content {

       border: 4px solid #e14400;

       background: #2194c2;

       color: white;

       padding: 20px;

       border-radius: 10px;

       width: 400px;

       text-align: center;

       position: relative;

   }



   .popup-content h3 {

       font-size: 20px;

       margin-top: 0;

       margin-bottom: 10px;

   }



   .popup-content p {

       margin-bottom: 6px;

   }



   .close-btn {

       position: absolute;

       top: 10px;

       right: 10px;

       background: transparent;

       border: none;

       font-size: 18px;

       cursor: pointer;

   }



   .connect-btn {

       display: inline-block;

       margin-top: 10px;

       padding: 10px 20px;

       background: #28a745;

       color: white;

       text-decoration: none;

       border-radius: 5px;

   }



   .connect-btn:hover {

       background: #218838;

       color: white;

   }



   /* --------------------------------------------- */



   /* --------------------------------------------- */

   .section-title {

       background: linear-gradient(to right, #002f6c, #00aaff);

       color: white;

       padding: 20px;

       font-size: 2rem;

       font-weight: bold;

       text-transform: uppercase;

       display: inline-block;

   }



   .services {

       display: block;

       flex-wrap: wrap;

       justify-content: center;

       gap: 40px;

       /* padding: 40px 20px; */

   }



   .service-box {

       display: flex;

       align-items: center;

       width: 100%;

       /* background: white; */

       border-radius: 10px;

       padding: 15px;

       /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */

       transition: transform 0.3s ease;

       margin-bottom: 15px;

       color: #000000 !important;

   }



   .service-box:hover {

       transform: translateY(-5px);

       background-color: white;

       color: rgb(0, 0, 0) !important;

   }



   .circle {

       min-width: 70px;

       height: 70px;

       border-radius: 50%;

       background: #2194c2;

       color: white;

       display: flex;

       justify-content: center;

       align-items: center;

       font-weight: bold;

       font-size: 1.2rem;

       margin-right: 15px;

   }



   .service-text h3 {

       margin: 0;

       font-size: 18px;

       font-weight: bold;

   }



   .service-text p {

       margin: 5px 0 0;

       font-size: 18px;

   }





   /* Responsive */

   @media (max-width: 768px) {

       .service-box {

           width: 100%;

       }

   }



   /* --------------------------------------------- */



   /* --------------------------------------------- */



   .role-card {

       background: white;

       border-radius: 15px;

       padding: 25px;

       /* width: 300px; */

       text-align: center;

       box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

       transition: transform 0.3s ease, box-shadow 0.3s ease;

   }



   .role-card:hover {

       transform: translateY(-8px);

       box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);

   }



   .role-icon {

       font-size: 40px;

       margin-bottom: 15px;

       color: #4a90e2;

   }



   .role-title {

       font-size: 1.4rem;

       font-weight: bold;

       color: #333;

       margin-bottom: 8px;

   }



   .role-description {

       font-size: 0.95rem;

       color: #666;

       line-height: 1.5;

       margin-bottom: 15px;

   }



   /* Role-specific colors */

   .super-admin {

       border-top: 5px solid #ff5004;

   }



   .admin {

       border-top: 5px solid #003466;

   }



   .master {

       border-top: 5px solid #28c76f;

   }



   /* Responsive */

   @media (max-width: 768px) {

       .role-card {

           width: 100%;

       }

   }





   /* --------------------------------------------- */



   /* --------------------------------------------- */

   .modal-content {

       background-color: #003466 !important;

       color: white !important;

   }



   .modal-header .btn-close {

       background-color: white !important;

   }



   .modal-header .btn-close:hover {

       background-color: white !important;

   }



   input {

       padding: 10px !important;

   }



   select {

       padding: 10px !important;

   }



   .modal.show .modal-dialog {

       transform: none;

       padding-top: 100px;

   }



   /* --------------------------------------------- */



   /* ---------------------why choose------------------------ */

   .wrap {

       margin: auto;

       padding: 48px 20px;

   }



   .why {

       display: grid;

       grid-template-columns: 1.05fr .95fr;

       gap: 32px;

       align-items: center;

   }



   /* Left */

   .why h2 {

       font-size: 2em;

       font-weight: 700;

       color: #000000;

       line-height: 1.15;

       margin: 0 0 24px;



   }



   .sub {

       color: #000000;

       margin-top: -8px;

   }



   .features {

       display: grid;

       gap: 18px;

       margin-top: 12px;

   }



   .feature {

       display: grid;

       grid-template-columns: 56px 1fr;

       gap: 16px;

       align-items: center;

       background: transparent;

       border-radius: 14px;

       padding: 10px 6px;

   }



   .ico {

       width: 56px;

       height: 56px;

       border-radius: 50%;

       display: grid;

       place-items: center;

       background: #2194c2;

       box-shadow: inset 0 0 0 2px rgba(22, 176, 255, .15);

   }



   .ico svg {

       width: 28px;

       height: 28px

   }



   .feature h4 {

       margin: 0 0 2px;

       font-size: 18px;

       font-weight: 700;

       color: #000000;

   }



   .feature p {

       margin: 0;

       color: #000000;

       font-size: 15px

   }



   /* Right */

   .media {

       position: relative;

       border-radius: 16px;

       overflow: hidden;

       box-shadow: var(--shadow);

   }



   .media::before {

       /* subtle gradient strip like the reference */

       content: "";

       position: absolute;

       inset: 0 0 auto auto;

       width: 55%;

       height: 28%;

       background: linear-gradient(135deg, var(--brand), var(--brand-2));

       border-bottom-left-radius: 18px;

       opacity: .95;

   }



   .media img {

       display: block;

       width: 100%;

       height: auto;

   }



   /* Speech bubble stat */

   .stat {

       position: absolute;

       top: 24px;

       left: 24px;

       background: #fff;

       border-radius: 18px;

       padding: 18px 18px 18px 18px;

       box-shadow: var(--shadow);

       max-width: min(360px, 80%);

   }



   .stat:after {

       content: "";

       position: absolute;

       left: 46%;

       top: 100%;

       border-width: 18px 14px 0 14px;

       border-style: solid;

       border-color: #fff transparent transparent transparent;

       filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .08));

   }



   .stat-inner {

       display: grid;

       grid-template-columns: 64px 1fr;

       gap: 14px;

       align-items: center;

   }



   .ring {

       width: 64px;

       height: 64px;

       border-radius: 50%;

       display: grid;

       place-items: center;

       position: relative;

   }



   .ring svg {

       position: absolute;

       inset: 0

   }



   .ring span {

       position: relative;

       font-weight: 800

   }



   .stat h5 {

       margin: 0 0 4px;

       font-size: 18px

   }



   .stat p {

       margin: 0;

       color: var(--muted);

       font-size: 14px

   }



   /* RESPONSIVE */

   @media (max-width: 960px) {

       .why {

           grid-template-columns: 1fr;

           gap: 22px

       }



       .media::before {

           display: none

       }



       .stat {

           position: absolute;

           left: 16px;

           right: 16px;

           max-width: unset

       }

   }



   @media (max-width: 560px) {

       .feature {

           grid-template-columns: 52px 1fr

       }



       .ico {

           width: 52px;

           height: 52px

       }



       .ring {

           width: 56px;

           height: 56px

       }

   }



   /* --------------------------------------------- */





   /* --------------------------------------------- */

   .section-head {

       text-align: center;

       margin-bottom: 28px;

   }



   .eyebrow {

       font-size: 12px;

       letter-spacing: .18em;

       text-transform: uppercase;

       color: var(--muted);

   }





   .grid {

       display: grid;

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

       gap: 16px;

       align-items: stretch;

   }



   .card {

       grid-column: span 12;

       background: linear-gradient(180deg, color-mix(in oklab, var(--card) 94%, #000 6%), var(--card));

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

       border-radius: 20px;

       padding: 22px 22px;

       position: relative;

       overflow: hidden;

       /* box-shadow: 0 10px 30px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06); */

       isolation: isolate;

       margin: auto;

   }



   .card::after {

       content: "";

       position: absolute;

       inset: -2px;

       z-index: -1;

       background: radial-gradient(220px 60px at 10% 0%, var(--ring), transparent 60%),

           radial-gradient(200px 80px at 100% 0%, color-mix(in oklab, var(--accent-2) 25%, transparent), transparent 60%);

       filter: blur(30px);

   }



   .card-inner {

       display: flex;

       align-items: center;

       gap: 16px;

   }



   .icon {

       width: 52px;

       height: 52px;

       min-width: 52px;

       display: grid;

       place-items: center;

       border-radius: 14px;

       background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 25%, #000 75%), color-mix(in oklab, var(--accent-2) 30%, #000 70%));

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

       box-shadow: inset 0 0 20px rgba(255, 255, 255, .08);

   }



   .icon svg {

       width: 26px;

       height: 26px;

   }



   .label {

       color: var(--muted);

       font-size: 17px;

       font-weight: 500;

   }



   .value {

       font-size: clamp(28px, 5vw, 44px);

       font-weight: 900;

       letter-spacing: -0.5px;

   }



   .helper {

       color: var(--muted);

       font-size: 14px;

       font-weight: 500;

       margin-top: 4px;

   }



   /* 3-up at md, 4-up possible with more cards */

   @media (min-width: 640px) {

       .card {

           grid-column: span 6;

       }

   }



   @media (min-width: 960px) {

       .card {

           grid-column: span 4;

       }

   }



   /* Subtle hover */

   .card:hover {

       transform: translateY(-2px);

       transition: transform .2s ease;

   }



   /* --------------------------------------------- */





   /* --------------------------------------------- */

   .client-logos {

       /* max-width: 1200px; */

       margin: 0 auto;

       /* padding: 40px 20px; */

       text-align: center;

   }



   .client-logos h2 {

       margin-bottom: 30px;

       font-size: 1.8rem;

       color: #333;

   }



   .logos-grid {

       display: grid;

       grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

       gap: 70px;

       align-items: center;

       padding-top: 40px;

   }



   .logos-grid img {

       max-width: 100%;

       height: auto;

       /* background-color:#003466; */

       /* filter: grayscale(100%);

    transition: filter 0.3s ease, transform 0.3s ease; */

   }



   /* .logos-grid img:hover {

    filter: grayscale(0%);

    transform: scale(1.05);

  } */

   /* --------------------------------------------- */



   /* --------------------------------------------- */







   /* -------------------footer------------------ */



   .footer {

       background-color: #2194c2;

       padding-top: 80px;

       padding-bottom: 40px;

   }



   /*END FOOTER SOCIAL DESIGN*/

   .single_footer {}



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

       .single_footer {

           margin-bottom: 30px;

       }

   }



   .single_footer h3 {

       color: #ffffff;

       margin-top: 0;

       margin-bottom: 25px;

       font-weight: 700;

       text-transform: uppercase;

       font-size: 20px;

   }



   .single_footer h3::after {

       content: "";

       display: block;

       height: 2px;

       width: 40px;

       background: #ffffff;

       margin-top: 20px;

   }



   .single_footer p {

       color: #ffffff;

   }



   .single_footer ul {

       margin: 0;

       padding: 0;

       list-style: none;

   }



   .single_footer ul li a {

       text-decoration: none;

       color: #ffffff;

       -webkit-transition: all 0.3s ease 0s;

       transition: all 0.3s ease 0s;

       line-height: 36px;

       font-size: 15px;

       /* text-transform: capitalize; */

   }



   .single_footer ul li a:hover {

       color: #068b63;

   }



   .single_footer_address {}



   .single_footer_address ul {}



   .single_footer_address ul li {

       color: #ffffff;

   }



   .single_footer_address ul li span {

       font-weight: 400;

       color: #ffffff;

       line-height: 28px;

   }



   .contact_social ul {

       list-style: outside none none;

       margin: 0;

       padding: 0;

   }



   /*START NEWSLETTER CSS*/

   .subscribe {

       display: block;

       position: relative;

       margin-top: 15px;

       width: 100%;

   }



   .subscribe__input {

       background-color: #fff;

       border: medium none;

       border-radius: 5px;

       color: #ffffff;

       display: block;

       font-size: 15px;

       font-weight: 500;

       height: 60px;

       letter-spacing: 0.4px;

       margin: 0;

       padding: 0 150px 0 20px;

       text-align: center;

       text-transform: capitalize;

       width: 100%;

   }



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

       .subscribe__input {

           padding: 0 50px 0 20px;

       }

   }



   .subscribe__btn {

       background-color: transparent;

       border-radius: 0 25px 25px 0;

       color: #01c7e9;

       cursor: pointer;

       display: block;

       font-size: 20px;

       height: 60px;

       position: absolute;

       right: 0;

       top: 0;

       width: 60px;

   }



   .subscribe__btn i {

       transition: all 0.3s ease 0s;

   }



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

       .subscribe__btn {

           right: 0px;

       }

   }



   .subscribe__btn:hover i {

       color: #ff3666;

   }



   button {

       padding: 0;

       border: none;

       background-color: transparent;

       -webkit-border-radius: 0;

       border-radius: 0;

   }



   /*END NEWSLETTER CSS*/



   /*START SOCIAL PROFILE CSS*/

   .social_profile {

       margin-top: 20px;

   }



   .social_profile ul {

       display: flex;

       list-style: outside none none;

       margin: 0;

       padding: 0;

   }





   .social_profile ul li a {

       text-align: center;

       border: 0px;

       text-transform: uppercase;

       transition: all 0.3s ease 0s;

       margin: 0px 5px;

       font-size: 18px;

       color: #ffffff;

       border-radius: 30px;

       width: 50px;

       height: 50px;

       line-height: 50px;

       display: block;

       border: 1px solid rgba(255, 255, 255, 0.2);

   }



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

       .social_profile ul li a {

           margin-right: 10px;

           margin-bottom: 10px;

       }

   }



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

       .social_profile ul li a {

           width: 40px;

           height: 40px;

           line-height: 40px;

       }

   }



   .social_profile ul li a:hover {

       background: #003466;

       border: 1px solid #003466;

       color: #fff;

       border: 0px;

   }



   /*END SOCIAL PROFILE CSS*/



   .copy-right-text {

       color: #ffffff;

   }



   .copy-right-text a {

       color: #ffffff;

   }







   .copyright {

       margin-top: 70px;

       padding-top: 40px;

       color: #fff;

       font-size: 15px;

       border-top: 1px solid rgba(85, 85, 85, 0.4);

       text-align: center;

   }



   .copyright a {

       color: #ffffff;

       transition: all 0.2s ease 0s;

   }



   .copyright a:hover {

       color: #ff3666;

   }



   /* -------------------footer------------------ */





   /* --------------------------------------------- */



   .fot-form {

       position: relative;

       width: 100%;

       /* min-height: 100vh; */

       padding: 2rem;

       background-color: #fafafa;

       overflow: hidden;

       display: flex;

       align-items: center;

       justify-content: center;

   }



   .form {

       width: 80%;

       background-color: #fff;

       border-radius: 10px;

       box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);

       z-index:777;

       overflow: hidden;

       display: grid;

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

   }



   .contact-form {

       background-color:#2194c2;

       position: relative;

   }



   .contact-form .circle {

       border-radius: 50%;

       background: linear-gradient(135deg, transparent 20%, #0f5da9);

       position: absolute;

   }



   .contact-form .circle.one {

       width: 130px;

       height: 130px;

       top: 130px;

       right: -40px;

   }



   .contact-form .circle.two {

       width: 80px;

       height: 80px;

       top: 10px;

       right: 30px;

   }



   .contact-form:before {

       content: "";

       position: absolute;

       width: 26px;

       height: 26px;

       background-color: #003466;

       transform: rotate(45deg);

       top: 50px;

       left: -13px;

   }



   .contact-form form {

       padding: 2.3rem 2.2rem;

       z-index: 10;

       overflow: hidden;

       position: relative;

   }



   .contact-form .title {

       color: #fff;

       font-weight: 500;

       font-size: 1.5rem;

       line-height: 1;

       margin-bottom: 0.7rem;

   }



   .contact-form .input-container {

       position: relative;

       margin: 1rem 0;

   }



   .contact-form .input {

       width: 100%;

       outline: none;

       border: 2px solid #fafafa;

       background: none;

       padding: 0.6rem 1.2rem;

       color: #fff;

       font-weight: 500;

       font-size: 0.95rem;

       letter-spacing: 0.5px;

       border-radius: 5px;

       transition: 0.3s;

   }



   .contact-form .select {

       width: 100%;

       outline: none;

       border: 2px solid #fafafa;

       background: none;

       padding: 0.6rem 1.2rem;

       color: #fff;

       font-weight: 500;

       font-size: 0.95rem;

       letter-spacing: 0.5px;

       border-radius: 5px;

       transition: 0.3s;

   }



   .contact-form .select option {

       color: black;

   }



   .contact-form textarea.input {

       padding: 0.8rem 1.2rem;

       min-height: 150px;

       border-radius: 5px;

       resize: none;

       overflow-y: auto;

   }



   .contact-form .input-container label {

       position: absolute;

       top: 50%;

       left: 15px;

       transform: translateY(-50%);

       padding: 0 0.4rem;

       color: #fafafa;

       font-size: 0.9rem;

       font-weight: 400;

       pointer-events: none;

       z-index: 1000;

       transition: 0.5s;

   }



   .contact-form .input-container.textarea label {

       top: 1rem;

       transform: translateY(0);

   }



   .contact-form .btn {

       padding: 0.6rem 1.3rem;

       background-color: #fff;

       border: 2px solid #fafafa;

       font-size: 0.95rem;

       color: #003466;

       line-height: 1;

       border-radius: 5px;

       outline: none;

       cursor: pointer;

       transition: 0.3s;

       margin: 0;

       width: 100%;

   }



   .contact-form .btn:hover {

       background-color: transparent;

       color: #fff;

   }



   .input-container span {

       position: absolute;

       top: 0;

       left: 25px;

       transform: translateY(-50%);

       font-size: 0.8rem;

       padding: 0 0.4rem;

       color: transparent;

       pointer-events: none;

       z-index: 500;

   }



   .input-container span:before,

   .input-container span:after {

       content: "";

       position: absolute;

       width: 10%;

       opacity: 0;

       transition: 0.3s;

       height: 5px;

       background-color: #003466;

       top: 50%;

       transform: translateY(-50%);

   }



   .input-container span:before {

       left: 50%;

   }



   .input-container span:after {

       right: 50%;

   }



   .input-container.focus label {

       top: 0;

       transform: translateY(-50%);

       left: 25px;

       font-size: 0.8rem;

   }



   .input-container.focus span:before,

   .input-container.focus span:after {

       width: 50%;

       opacity: 1;

   }



   .contact-info {

       padding: 2.3rem 2.2rem;

       position: relative;

   }



   .contact-info .title {

       color: #003466;

   }



   .text {

       color: #333;

       /* margin: 1.5rem 0 2rem 0; */

   }



   .information {

       display: flex;

       color: #555;

       margin: 0.7rem 0;

       align-items: baseline;

       font-size: 0.95rem;

   }



   .information i {

       color: #003466;

   }



   .icon {

       width: 28px;

       margin-right: 0.7rem;

   }



   .social-media {

       padding: 2rem 0 0 0;

   }



   .social-media p {

       color: #333;

   }



   .social-icons {

       display: flex;

       margin-top: 0.5rem;

   }



   .social-icons a {

       width: 35px;

       height: 35px;

       border-radius: 5px;

       background: linear-gradient(45deg, #003466, #0f5da9);

       color: #fff;

       text-align: center;

       line-height: 35px;

       margin-right: 0.5rem;

       transition: 0.3s;

   }



   .social-icons a:hover {

       transform: scale(1.05);

   }



   .contact-info:before {

       content: "";

       position: absolute;

       width: 110px;

       height: 100px;

       border: 22px solid #003466;

       border-radius: 50%;

       bottom: -77px;

       right: 50px;

       opacity: 0.3;

   }



   .big-circle {

       position: absolute;

       width: 500px;

       height: 500px;

       border-radius: 50%;

       background: linear-gradient(to bottom, #82dafe, #1991c0);

       bottom: 50%;

       right: 50%;

       transform: translate(-40%, 38%);

   }



   .big-circle:after {

       content: "";

       position: absolute;

       width: 360px;

       height: 360px;

       background-color: #fafafa;

       border-radius: 50%;

       top: calc(50% - 180px);

       left: calc(50% - 180px);

   }



   .square {

       position: absolute;

       height: 400px;

       top: 50%;

       left: 50%;

       transform: translate(181%, 11%);

       opacity: 0.2;

   }



   @media (max-width: 850px) {

       .form {

           grid-template-columns: 1fr;

       }



       .contact-info:before {

           bottom: initial;

           top: -75px;

           right: 65px;

           transform: scale(0.95);

       }



       .contact-form:before {

           top: -13px;

           left: initial;

           right: 70px;

       }



       .square {

           transform: translate(140%, 43%);

           height: 350px;

       }



       .big-circle {

           bottom: 75%;

           transform: scale(0.9) translate(-40%, 30%);

           right: 50%;

       }



       .text {

           margin: 1rem 0 1.5rem 0;

       }



       .social-media {

           padding: 1.5rem 0 0 0;

       }

   }



   @media (max-width: 480px) {

       .container {

           padding: 1.5rem;

       }



       .contact-info:before {

           display: none;

       }



       .square,

       .big-circle {

           display: none;

       }



       form,

       .contact-info {

           padding: 1.7rem 1.6rem;

       }



       .text,

       .information,

       .social-media p {

           font-size: 0.8rem;

       }



       .title {

           font-size: 1.15rem;

       }



       .social-icons a {

           width: 30px;

           height: 30px;

           line-height: 30px;

       }



       .icon {

           width: 23px;

       }



       .input {

           padding: 0.45rem 1.2rem;

       }



       .btn {

           padding: 0.45rem 1.2rem;

       }

   }



   .single_footer img {

       background-color: white;

       border-radius: 8px;

       padding: 10px;

   }



   /* --------------------------------------------- */

   .whatsapp {

    position: fixed;

    right:8px;

    bottom: 4%;

    z-index: 999999;

}



.whatsapp h3 {

    font-size: 14px;

    color: #45c655;

    text-align: center;

}