/*==================================================
           GOOGLE FONT
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==================================================
               ROOT COLORS
==================================================*/

:root {

  --primary: #0B1F3A;
  --secondary: #1FA8A0;
  --gold: #D4AF37;
  --white: #ffffff;
  --black: #111111;
  --text: #5e6472;
  --bg: #f8fbff;
  --card: #ffffff;

  --shadow: 0 15px 40px rgba(0, 0, 0, .08);

  --radius: 18px;

  --transition: .35s ease;

}


/*==================================================
              RESET
==================================================*/

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

body {

  font-family: 'Poppins', sans-serif;
  background: var(--bg);
  color: var(--black);
  overflow-x: hidden;

}

img {

  width: 100%;
  display: block;

}

a {

  text-decoration: none;

}

ul {

  list-style: none;

}

section {

  padding: 100px 0;

}

.container {

  width: 90%;
  max-width: 1250px;
  margin: auto;

}

/*==================================================
          SCROLLBAR
==================================================*/

::-webkit-scrollbar {

  width: 10px;

}

::-webkit-scrollbar-track {

  background: #ececec;

}

::-webkit-scrollbar-thumb {

  background: var(--secondary);
  border-radius: 50px;

}

::-webkit-scrollbar-thumb:hover {

  background: var(--primary);

}

/*==================================================
          SECTION HEADING
==================================================*/

.section-heading {

  text-align: center;
  margin-bottom: 70px;

}

.section-heading span {

  color: var(--secondary);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;

}

.section-heading h2 {

  font-size: 45px;
  margin-top: 10px;
  color: var(--primary);

}

.section-heading p {

  max-width: 750px;
  margin: 20px auto 0;
  line-height: 1.8;
  color: var(--text);

}

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

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;

  background: rgba(8, 18, 35, 0.95);
  /* Dark Navy */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 8px 25px rgba(0, 0, 0, .25);

  transition: all .35s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 95px;
  padding: 0 10px;
}

/*==================================================
                LOGO
==================================================*/

.logo img {
  height: 115px;
  width: auto;
  margin-top: 8px;
  transition: .35s ease;
}

.logo img:hover {

  transform: scale(1.05);

}

/*==================================================
             NAV LINKS
==================================================*/

.nav-links {

  display: flex;
  align-items: center;
  gap: 35px;

}

.nav-links li a {

  color: var(--white);
  font-weight: 500;
  font-size: 16px;
  transition: var(--transition);
  position: relative;

}

.nav-links li a::after {

  content: '';

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 2px;

  background: var(--secondary);

  transition: var(--transition);

}

.nav-links li a:hover {

  color: var(--secondary);

}

.nav-links li a:hover::after {

  width: 100%;

}

/*==================================================
             BUTTONS
==================================================*/

.primary-btn,
.quote-btn {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 32px;

  background: var(--secondary);

  color: white;

  font-weight: 600;

  border-radius: 50px;

  transition: var(--transition);

  box-shadow: var(--shadow);

}

.primary-btn:hover,
.quote-btn:hover {

  background: var(--gold);

  color: #111;

  transform: translateY(-3px);

}

.secondary-btn {

  display: inline-flex;

  padding: 14px 32px;

  border: 2px solid white;

  color: white;

  border-radius: 50px;

  margin-left: 15px;

  transition: var(--transition);

}

.secondary-btn:hover {

  background: white;

  color: var(--primary);

}

/*==================================================
              HERO
==================================================*/
.hero{

    min-height:100vh;
    padding:140px 0 80px;

    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;

}

.hero-content{
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 450px;

    gap: 60px;
    align-items: center;
}


.hero-tag {

  display: inline-block;

  padding: 8px 20px;

  background: rgba(255, 255, 255, .12);

  color: white;

  border-radius: 50px;

  margin-bottom: 20px;

  font-size: 14px;

}

.hero h1 {

  font-size: 68px;

  line-height: 1.1;

  color: white;

  margin-bottom: 25px;

}

.hero h1 span {

  color: var(--gold);

}

.hero p {

  font-size: 18px;

  line-height: 1.9;

  color: #ddd;

  margin-bottom: 35px;

  max-width: 650px;

}

.hero-buttons {

  display: flex;

  gap: 20px;

  margin-bottom: 35px;

}

.hero-features {

  display: flex;

  flex-wrap: wrap;

  gap: 25px;

  color: white;

  font-size: 15px;

}

.hero-features i {

  color: var(--gold);

  margin-right: 8px;

}

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

.hero-card {

  background: white;

  padding: 40px;

  border-radius: 20px;

  box-shadow: var(--shadow);

}

.card-top {

  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 600;

  color: var(--secondary);

  margin-bottom: 20px;

}

.hero-card h3 {

  font-size: 30px;

  margin-bottom: 20px;

  color: var(--primary);

}

.hero-card p {

  color: var(--text);

  line-height: 1.8;

  margin-bottom: 25px;

}

.hero-card a {

  color: var(--secondary);

  font-weight: 600;

}

.hero-card a:hover {

  color: var(--primary);

}

/*==================================================
          SCROLL ICON
==================================================*/

.scroll-down {

  position: absolute;

  bottom: 30px;

  left: 50%;

  transform: translateX(-50%);

}

.scroll-down i {

  font-size: 28px;

  color: white;

  animation: updown 1.2s infinite;

}

@keyframes updown {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(10px);

  }

  100% {

    transform: translateY(0);

  }

}

/*==================================================
                TRUSTED BY
==================================================*/

.trusted {
  background: #fff;
  padding: 80px 0;
}

.logo-slider {
  overflow: hidden;
  position: relative;
  margin-top: 40px;
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 25px;
  width: max-content;
  animation: marquee 25s linear infinite;
}

.brand-box {
  min-width: 180px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--primary);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, .05);
  transition: var(--transition);
}

.brand-box:hover {
  background: var(--secondary);
  color: #fff;
  transform: translateY(-6px);
}

@keyframes marquee {

  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }

}

/*==================================================
                ABOUT SECTION
==================================================*/

.about {
  background: var(--bg);
}

.about-wrapper {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;

}

.about-image img {

  border-radius: 25px;
  box-shadow: var(--shadow);

}

.about-content h3 {

  font-size: 34px;
  color: var(--primary);
  margin-bottom: 20px;

}

.about-content p {

  line-height: 1.9;
  color: var(--text);
  margin-bottom: 30px;

}

/*==================================================
             ABOUT BOXES
==================================================*/

.about-boxes {

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin: 40px 0;

}

.about-box {

  background: #fff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: .35s;

}

.about-box:hover {

  transform: translateY(-10px);

}

.about-box i {

  font-size: 38px;
  color: var(--secondary);
  margin-bottom: 18px;

}

.about-box h4 {

  margin-bottom: 12px;
  font-size: 22px;
  color: var(--primary);

}

.about-box p {

  margin: 0;
  font-size: 15px;

}

/*==================================================
             WHY CHOOSE LIST
==================================================*/

.why-us {

  margin-top: 30px;

}

.why-us h3 {

  margin-bottom: 25px;
  font-size: 28px;
  color: var(--primary);

}

.why-us ul {

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;

}

.why-us li {

  display: flex;
  align-items: center;
  font-size: 16px;
  color: #444;

}

.why-us i {

  color: var(--secondary);
  margin-right: 10px;

}

/*==================================================
              FOUNDERS
==================================================*/

.founders {

  margin-top: 100px;

}

.founder-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:35px;
    margin-top:60px;
    align-items:stretch;
}

@media (max-width:768px){

    .navbar{
        padding:12px 20px;
    }

    .logo img{
        width:110px;
        height:auto;
    }

    .menu-toggle{
        font-size:32px;
    }

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

    .founder-card{
    margin:0 auto;
    width:100%;
    max-width:340px;
    padding:28px 22px;
    
}

    .founder-img,
    .leader-icon{
    width:140px;
    height:140px;
    flex-shrink:0;
}

}

.founder-card{
    background:#fff;
    padding:35px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    height:100%;
    min-height:auto;
}

.founder-card:hover{
    transform:translateY(-10px);
}


.founder-card:hover {

  transform: translateY(-10px);

}

.founder-img{
    width:180px;
    height:180px;
    border-radius:50%;
    object-fit:cover;

    object-position:center;
    image-orientation:from-image;
    -webkit-transform:translateZ(0);

    display:block;
    margin:0 auto 25px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.founder-card:hover .founder-img{
    transform:scale(1.06);
}

.leader-icon{

    width:180px;
    height:180px;
    margin:0 auto 25px;
    border-radius:50%;

    background: linear-gradient(135deg,#1FA8A0,#0B1F3A);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:70px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.leader-icon i{
    color:#fff;
}

.founder-card h3 {

  font-size: 28px;
  color: var(--primary);
  margin-bottom: 8px;

}

.founder-card h5 {

  font-size: 16px;
  color: var(--secondary);
  margin-bottom: 18px;

}

.founder-card p {

  color: var(--text);
  line-height: 1.8;

}

.social-links{
    display:flex;
    justify-content:center;
    gap:18px;
    margin-top:25px;
}

.social-links a{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#1FA8A0;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.35s;
    text-decoration:none;
}

.social-links a:hover{
    background:#0B1F3A;
    transform:translateY(-5px);
}
.founder-card p{
    margin-top:12px;
    margin-bottom:20px;
    word-break:break-word;
}

.social-links{
    margin-top:auto;
    padding-top:20px;
}
/*==================================================
                 STATS
==================================================*/

.stats {

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin-top: 80px;

}

.stat-card {

  background: linear-gradient(135deg, var(--primary), #15385e);
  padding: 45px 20px;
  border-radius: 22px;
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow);

}

.stat-card h2 {

  font-size: 48px;
  color: var(--gold);
  margin-bottom: 12px;

}

.stat-card p {

  font-size: 17px;

}

/*==================================================
                SERVICES
==================================================*/

.services {

  background: #fff;

}

.services-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

}

.service-card {

  background: #fff;
  padding: 35px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: .35s;
  border: 1px solid rgba(0, 0, 0, .05);

}

.service-card:hover {

  transform: translateY(-12px);
  background: var(--primary);
  color: #fff;

}

.service-card i {

  font-size: 45px;
  color: var(--secondary);
  margin-bottom: 20px;
  transition: .35s;

}

.service-card:hover i {

  color: var(--gold);

}

.service-card h3 {

  font-size: 25px;
  margin-bottom: 15px;

}

.service-card p {

  line-height: 1.8;
  color: var(--text);

}

.service-card:hover p {

  color: #ddd;

}

/*==================================================
                PORTFOLIO
==================================================*/

.portfolio {
  background: var(--bg);
}

.portfolio-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

}

.portfolio-item {

  position: relative;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: var(--shadow);
  cursor: pointer;

}

.portfolio-item img {

  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: .5s;

}

.portfolio-item:hover img {

  transform: scale(1.12);

}

.portfolio-overlay {

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 25px;

  background: linear-gradient(transparent, rgba(0, 0, 0, .85));

  color: #fff;

  transform: translateY(100%);
  transition: .4s;

}

.portfolio-item:hover .portfolio-overlay {

  transform: translateY(0);

}

.portfolio-overlay h3 {

  font-size: 24px;
  margin-bottom: 8px;

}

.portfolio-overlay p {

  font-size: 15px;
  color: #ddd;

}

.portfolio-btn {

  text-align: center;
  margin-top: 55px;

}

/*==================================================
             WHY CHOOSE US
==================================================*/

.why-choose {

  background: #fff;

}

.why-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

}

.why-card {

  background: #fff;
  padding: 35px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: .35s;
  border: 1px solid rgba(0, 0, 0, .05);

}

.why-card:hover {

  background: var(--primary);
  transform: translateY(-10px);

}

.why-card i {

  font-size: 50px;
  color: var(--secondary);
  margin-bottom: 22px;
  transition: .3s;

}

.why-card:hover i {

  color: var(--gold);

}

.why-card h3 {

  font-size: 24px;
  margin-bottom: 15px;
  color: var(--primary);

}

.why-card:hover h3 {

  color: #fff;

}

.why-card p {

  line-height: 1.8;
  color: var(--text);

}

.why-card:hover p {

  color: #ddd;

}

/*==================================================
              TESTIMONIALS
==================================================*/

.testimonials {

  background: var(--bg);

}

.testimonial-grid {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;

}

.testimonial-card {

  background: #fff;
  padding: 35px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: .35s;

}

.testimonial-card:hover {

  transform: translateY(-10px);

}

.stars {

  font-size: 22px;
  color: var(--gold);
  margin-bottom: 18px;

}

.testimonial-card p {

  line-height: 1.9;
  color: var(--text);
  margin-bottom: 20px;

}

.testimonial-card h4 {

  font-size: 22px;
  color: var(--primary);

}

.testimonial-card span {

  color: var(--secondary);
  font-size: 15px;

}

/*==================================================
                  FAQ
==================================================*/

.faq {

  background: #fff;

}

.faq-container {

  max-width: 900px;
  margin: auto;

}

.faq-item {

  background: #fff;
  padding: 28px;
  border-radius: 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--secondary);

}

.faq-item h3 {

  font-size: 22px;
  color: var(--primary);
  margin-bottom: 12px;

}

.faq-item p {

  line-height: 1.8;
  color: var(--text);

}

/*==================================================
               ANIMATIONS
==================================================*/

.service-card,
.founder-card,
.stat-card,
.why-card,
.testimonial-card,
.portfolio-item,
.about-box {

  transition: all .35s ease;

}

.primary-btn,
.secondary-btn,
.quote-btn {

  transition: .35s ease;

}

.primary-btn:hover,
.quote-btn:hover {

  box-shadow: 0 15px 35px rgba(31, 168, 160, .35);

}

.secondary-btn:hover {

  box-shadow: 0 12px 30px rgba(255, 255, 255, .25);

}

/* Floating Animation */

.hero-card {

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

}

@keyframes floatCard {

  0% {
    transform: translateY(0);
  }

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

  100% {
    transform: translateY(0);
  }

}

/* Fade Animation */

.section-heading {

  animation: fadeUp .8s ease;

}

@keyframes fadeUp {

  from {

    opacity: 0;
    transform: translateY(35px);

  }

  to {

    opacity: 1;
    transform: translateY(0);

  }

}

/*==================================================
                CONTACT SECTION
==================================================*/

.contact {
  background: var(--primary);
  color: #fff;
}

.contact .section-heading h2,
.contact .section-heading p,
.contact .section-heading span {
  color: #fff;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
}

.contact-info h3 {
  font-size: 32px;
  margin-bottom: 30px;
}

.info-box {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 28px;
}

.info-box i {
  width: 60px;
  height: 60px;
  background: var(--secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
}

.info-box h4 {
  margin-bottom: 6px;
  font-size: 20px;
}

.info-box p {
  color: #ddd;
  line-height: 1.8;
}
.info-box a{
    color:#ffffff;
    text-decoration:none;
    line-height:1.8;
    transition:.3s;
}

.info-box a:visited{
    color:#ffffff;
}

.info-box a:hover{
    color:var(--secondary);
}

.info-box a:active{
    color:#ffffff;
}

.contact-form {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid #ddd;
  border-radius: 12px;
  outline: none;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  transition: .3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--secondary);
}

.contact-form textarea {
  resize: none;
}

.contact-form button {
  border: none;
  cursor: pointer;
}

/*==================================================
                  GOOGLE MAP
==================================================*/

.map {
  margin-top: 70px;
}

.map iframe {
  width: 100%;
  height: 420px;
  border: none;
  border-radius: 20px;
}

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

footer {
  background: #071221;
  color: #ddd;
  padding: 80px 0 25px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-logo {
  width: 220px;
  margin-bottom: 25px;
}

footer p {
  line-height: 1.8;
}

footer h3 {
  color: #fff;
  margin-bottom: 20px;
  font-size: 22px;
}

footer ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

footer ul li {
  color: #ccc;
  transition: .3s;
  cursor: pointer;
}

footer ul li:hover {
  color: var(--secondary);
  padding-left: 8px;
}

footer a {
  color: #ccc;
  transition: .3s;
}

footer a:hover {
  color: var(--secondary);
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #13263f;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
}

.social-icons a:hover {
  background: var(--secondary);
  transform: translateY(-5px);
  color: #fff;
}

footer hr {
  margin: 45px 0 20px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.copyright {
  text-align: center;
  color: #aaa;
  font-size: 15px;
}

/*==================================================
                MOBILE MENU
==================================================*/

.menu-btn {
  display: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

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

@media(max-width:1100px) {

  .hero-content,
  .about-wrapper,
  .contact-wrapper {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid,
  .why-grid,
  .portfolio-grid,
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

}

@media(max-width:768px) {

  .nav-links {
    display: none;
  }

  .nav-btn {
    display: none;
  }

  .menu-btn {
    display: block;
  }

 .hero{
    min-height:auto;
    padding:120px 20px 60px;
}

.hero-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:30px;
}

.hero-left{
    width:100%;
    margin:0;
}

.hero-right{
    display:none;
}

.hero h1{
    font-size:42px;
    line-height:1.2;
}

.hero p{
    font-size:17px;
    max-width:100%;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.primary-btn,
.secondary-btn{
    width:100%;
    max-width:320px;
}

.hero-features{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.scroll-down{
    display:none;
}

  .section-heading h2 {
    font-size: 34px;
  }

  .about-boxes {
    grid-template-columns: 1fr;
  }

  .why-us ul {
    grid-template-columns: 1fr;
  }

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

  .services-grid,
  .portfolio-grid,
  .why-grid,
  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }

  .footer-logo {
    margin: auto auto 20px;
  }

  .contact-form {
    padding: 25px;
  }

  .map iframe {
    height: 300px;
  }

}

@media(max-width:500px) {

  .hero h1{
    font-size:38px;
    line-height:1.2;
}

  .hero-card {
    padding: 25px;
  }

  .hero-card h3 {
    font-size: 24px;
  }

  .primary-btn,
  .secondary-btn {
    width: 100%;
    justify-content: center;
  }

  .logo img {
    height: 110px;
    width: auto;
    transition: var(--transition);
  }
  .hero{
    min-height:auto;
    padding:120px 20px 60px;
}

.hero-content{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:30px;
}

.hero-left{
    width:100%;
    margin:0;
}

.hero-right{
    display:none;
}

.hero h1{
    font-size:40px;
    line-height:1.2;
}

.hero p{
    font-size:16px;
    max-width:100%;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.hero-features{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.scroll-down{
    display:none;
}
.founder-card{
    max-width:320px;
    padding:25px 20px;
    margin:0 auto;
}

.founder-img,
.leader-icon{
    width:130px;
    height:130px;
}

.founder-card h3{
    font-size:30px;
}

.founder-card p{
    font-size:17px;
    line-height:1.8;
}

.social-links{
    margin-top:20px;
}
.founder-grid{
    grid-template-columns:1fr;
}

.founder-card{
    width:100%;
    max-width:340px;
    margin:0 auto;
    padding:30px 20px;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.founder-img{
    width:150px;
    height:150px;
}

.founder-card p{
    width:100%;
    text-align:center;
    word-break:normal;
    overflow-wrap:break-word;
}

.social-links{
    margin-top:20px;
}

}

/*=========================
 Mobile Menu
=========================*/

.showMenu {

  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
  background: #0B1F3A;
  padding: 25px 0;
  text-align: center;
  gap: 25px;

}

/*=========================
 Active Menu
=========================*/

.nav-links a.active {

  color: #1FA8A0;

}

/*=========================
 Scroll Animation
=========================*/

.service-card,
.portfolio-item,
.founder-card,
.stat-card,
.why-card,
.testimonial-card,
.faq-item {

  opacity: 0;
  transform: translateY(40px);
  transition: .8s ease;

}

.service-card.show,
.portfolio-item.show,
.founder-card.show,
.stat-card.show,
.why-card.show,
.testimonial-card.show,
.faq-item.show {

  opacity: 1;
  transform: translateY(0);

}

/*====================================
        SCROLL TO TOP
====================================*/

.scroll-top {

  position: fixed;

  right: 25px;

  bottom: 25px;

  width: 55px;

  height: 55px;

  border: none;

  border-radius: 50%;

  background: #1FA8A0;

  color: #fff;

  font-size: 24px;

  cursor: pointer;

  opacity: 0;

  visibility: hidden;

  transition: .3s;

  z-index: 999;

  box-shadow: 0 10px 30px rgba(0, 0, 0, .2);

}

.scroll-top:hover {

  background: #0B1F3A;

  transform: translateY(-5px);

}

.showTop {

  opacity: 1;

  visibility: visible;

}

/*=========================
       RIPPLE EFFECT
=========================*/

.primary-btn,
.secondary-btn,
.quote-btn {

  position: relative;
  overflow: hidden;

}

.ripple {

  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  transform: scale(0);
  animation: ripple .6s linear;

}

@keyframes ripple {

  to {

    transform: scale(4);
    opacity: 0;

  }

}
/*==============================
      WHATSAPP BUTTON
==============================*/

.whatsapp-float{
    position:fixed;
    right:25px;
    bottom:25px;
    width:65px;
    height:65px;
    background:#25D366;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    text-decoration:none;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    z-index:9999;
    transition:.35s ease;
    animation:whatsappPulse 2s infinite;
}

.whatsapp-float:hover{
    transform:scale(1.12);
    background:#20ba5a;
}

@keyframes whatsappPulse{

0%{
transform:scale(1);
}

50%{
transform:scale(1.08);
}

100%{
transform:scale(1);
}

}
/*==============================
      BACK TO TOP
==============================*/

#backToTop{
    position:fixed;
    right:25px;
    bottom:105px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#0B1F3A;
    color:#fff;
    cursor:pointer;
    font-size:20px;
    display:none;
    z-index:9999;
    transition:.35s;
}

#backToTop:hover{
    background:#1FA8A0;
}
/* Scroll Progress Bar */

#progressBar{
    position:fixed;
    top:0;
    left:0;
    width:0%;
    height:4px;
    background:linear-gradient(90deg,#1FA8A0,#D4AF37);
    z-index:99999;
    transition:width .1s linear;
}
/*==============================
      HERO VIDEO
==============================*/

.hero-video{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero-video video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:rgba(8,18,35,.70);
    z-index:1;
}
.contact .info-box a,
.contact .info-box a:link,
.contact .info-box a:visited,
.contact .info-box a:active{
    color:#fff !important;
    text-decoration:none !important;
}

.contact .info-box a:hover{
    color:#1FA8A0 !important;
}
/* CONTACT LINK FIX */
.contact-info a,
.contact-info a:link,
.contact-info a:visited,
.contact-info a:active{
    color:#fff !important;
    text-decoration:none !important;
}

.contact-info a:hover{
    color:#1FA8A0 !important;
}