body,
html {
     margin: 0;
     padding: 0;
}

html {
     font-size: 62.5% !important;
}

body {
     font-size: 1.8rem !important;
}

/* =14px */

p,
a,
li {
     font-family: "Poppins", serif;
     font-style: normal;
     color:#393938;
     font-size:1.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     font-family: "Bakbak One", serif;
     font-weight: 400;
     font-style: normal;
}

h2 {
     font-size: 3.3rem;
}

.row.equal-height {
     display: flex;
     /* Use flexbox for equal height columns */
}

/* General Section Styling */
section {
     width: 100%;
     /* Full viewport width */
     display: flex;
     flex-direction: column;
     /* Stack items vertically */
     align-items: center;
     justify-content: center;
     background-size: cover;
     background-position: center;
}

/* Section 1 Specific Styling */
.section-1 {
     background: url('images/section-1.svg?t=1') no-repeat center center;
     background-size: cover;
     aspect-ratio: 1.77 / 1;
     color: white;
     font-size: 2rem;
     text-align: center;
     position: relative;
}

.section-1.content {
     background: url('images/content-header.svg') no-repeat top center;
     background-size: cover;
     aspect-ratio: 2 / 1;
     color: white;
     font-size: 2rem;
     text-align: center;
     position: relative;
}



.section-1.content h1 {
     color: #000000;
     margin-bottom: 20%;
}


.section-1 h1 {
     font-size: 7.5rem;
}

.section-1 p {
     font-size: 2rem;
     color:#FFFFFF !important;
}

.section-1 .btn-yellow {
     margin-top: 30px;
     display: inline-block;
}



/* Header Styling */
.section-1 .site-header {
     position: absolute;
     top: 0;
     width: 100%;
     padding: 1rem 0;
     z-index: 10;
}


.content-container {
     background: url('images/content-section.svg') no-repeat top center;
     background-size: cover;
     aspect-ratio: 1.77 / 1;
     padding-bottom: 300px;

}

.content-container h2 {
     text-align: center;
     margin-bottom: 30px;
}

.content-container section {
     margin-bottom: 30px;
}

.step {
     text-align: center;
     padding: 20px 20px;
     border-radius: 8px 8px;
}

.purple .step {
     background-color: #62388A;
     color: #FFFFFF;
}


.orange .step {
     background-color: #FF7E1D;
     color: #FFFFFF;
}

.red .step {
     background-color: #DC4C44;
     color: #FFFFFF;
}

.green .step {
     background-color: #49A35B;
     color: #FFFFFF;
}

.pink .step {
     background-color: #EF89C4;
     color: #FFFFFF;
}

/* Navigation Links */
.main-nav .nav {
     display: flex;
     gap: 1rem;
}


li.nav-item {
     display: flex;
     align-items: center;
}

.main-nav .nav-link {
     color: #FFFFFF;
     text-decoration: none;
     font-size: 1.8rem;
     font-weight: bold;
}

.content .main-nav .nav-link:hover {
     color: #0B6FF9;
}

.content .main-nav .nav-link {
     color: #000000;
}

.content .main-nav .nav-link.btn-blue {
     margin: 0px 0px;
     border: 1px solid #0B6FF9;
     color: white;
}

.content .main-nav .nav-link.btn-blue:hover {
     background-color: transparent;
     border: 1px solid #0B6FF9;
     color: #0B6FF9;
}

.main-nav .nav-link.btn-yellow {
     margin: 0px 0px;
     border: 1px solid #FFCE00;
     color: #000000;
}

.main-nav .nav-link.btn-yellow:hover {
     background-color: transparent;
     border: 1px solid #FFCE00;
     color: #FFCE00;
}


a.btn-yellow {
    font-family: "Poppins", serif;
    font-weight:600;
    
}

a:visited, a:hover {
    color: initial;
}

/* Burger Menu for Mobile */
.burger-menu .burger-btn {
     background: none;
     border: none;
     cursor: pointer;
     display: flex;
     flex-direction: column;
     gap: 0.3rem;
}

.burger-menu .burger-btn span {
     width: 25px;
     height: 3px;
     background: white;
     border-radius: 2px;
}

/* Mobile Menu */
.mobile-nav {
     position: absolute;
     top: 100%;
     left: 0;
     background: rgba(0, 0, 0, 0.9);
     width: 100%;
     padding: 1rem;
}

.mobile-nav .nav {
     flex-direction: column;
     align-items: flex-start;
     gap: 1rem;
     margin:10px 0px;
}

.mobile-nav .nav a {
    color:#FFFFFF !important;   
}

.mobile-nav.d-none {
     display: none;
}

/* Responsive Styles */
@media (min-width: 768px) {
     .burger-menu {
          display: none;
     }

     .mobile-nav {
          display: none !important;
     }

     .main-nav {
          display: flex !important;
     }

}



.section-2 {
     background: url('images/section-2.svg?t=3') no-repeat center center;
     background-size: cover;
     aspect-ratio: 1.77 / 1;
     position:relative;
         overflow: hidden; /* Ensures the scrolling image does not go outside the section */
margin-top: -1px;
}



.cloud-wrapper {
    position: absolute;
    width: 100%;
    height: 63%;
    overflow: hidden;
    top:0;
}

.scrolling-clouds {
    position: absolute;
    top: 5%;
    left: -100%; /* Start off-screen on the left */
    width: 200%;
    height: 100%;
    background: url(images/clouds.svg?t=5) repeat-x;
    background-size: contain;
    animation: scrollClouds 50s linear infinite;
}

.scrolling-clouds:nth-child(2) {
    left: 100%; /* Start the second cloud after the first */
}

@keyframes scrollClouds {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}


.face-container {
    position:absolute;    
    bottom:15%;
    left:10%;
    width:100px;
    height:100px;
 
}
        .face {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .eye-container {
            display: flex;
            /*gap: 20px;*/
        }
        .eye {
            width: 40px;
            height: 40px;
            background-color: white;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            position: relative;
        }
        .pupil {
            width: 20px;
            height: 20px;
            background-color: #393938;
            border-radius: 50%;
            position: absolute;
        }
        
        
        
.face-container-large {
    position: absolute;
    bottom: 0; /* Ensures it stays at the bottom */
    left: 50%;
    transform: translateX(-50%);
    /*width: 20vw;*/
    /*height: 20vw;*/
    max-width: 200px;
    max-height: 200px;
    min-width: 150px;
    /*min-height: 150px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
     width: min(20vw, 200px);
    /*height: min(20vw, 200px);*/
}

/* Ensure face scales properly */
.face-large {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* Eyes container */
.eye-container-large {
    display: flex;
}

/* Eye styles */
.eye-large {
    width: clamp(40px, 8vw, 60px);
    height: clamp(40px, 8vw, 60px);
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

/* Pupil */
.pupil-large {
    width: clamp(15px, 5vw, 30px);
    height: clamp(15px, 5vw, 30px);
    background-color: #393938;
    border-radius: 50%;
    position: absolute;
}

/* Make the mouth (SVG) responsive */
.face-container-large svg {
    width: 80%;
    height: auto;
    max-width: 200px;
        margin-top: -29px;
    margin-bottom: 25px;
    
}
        
        
        
        @keyframes blink {
            0%, 100% { height: 20px; }
            50% { height: 0px; }
        }


        .birds {
position: absolute;
    width: 80%;
    height: 100%;
    top: 13%;
    animation: flyBirds 8s linear infinite, flapWings 0.5s infinite alternate, flyUpDown 2s infinite ease-in-out;
    
        }
        @keyframes flyBirds {
            from { transform: translateX(100vw); }
            to { transform: translateX(-100vw); }
        }
        @keyframes flapWings {
            from { transform: rotate(5deg); }
            to { transform: rotate(-5deg); }
        }
        @keyframes flyUpDown {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(5px); }
        }

.section-3 {
     background: url('images/section-3.svg?t=2') no-repeat center center;
     background-size: cover;
     aspect-ratio: 1.45 / 1;
     margin-top: -1px;
}


.section-3 h2 {
     position: relative;
     top: -200px;
     text-align: center;
     color: #FFFFFF;
     font-size: 4.5rem;
}


.section-3 h5 {
     font-size: 2.4rem;
}

.section-4 {
     background: url('images/section-4.svg?t=3') no-repeat center center #285b32;
     background-size: cover;
     aspect-ratio: 1.4 / 1;
     margin-top: -1px;
}

.section-4 h2,
.section-4 p {
     color: #FFFFFF !important;
}

.section-5 {
     background: url('images/section-5.svg') no-repeat center center;
     background-size: cover;
     aspect-ratio: 1.57 / 1;
     margin-top: -1px;
}

.section-5 h5 {
     font-size: 3.8rem;
}

.section-6 {
     background: url('images/section-6.svg') no-repeat center center;
     background-size: cover;
     aspect-ratio: 1.75 / 1;
     padding-bottom: 12%;
     margin-top: -1px;
}

.section-6 img,
.section-7 img {
     margin-top: 20px;
     max-width:473px;
}




.section-5 li,
.section-6 li {
     margin:0px 0px !important;
     padding:0px 0px !important;
}
.section-5 ul,
.section-6 ul {
     margin:0px 0px  !important;
     /*padding:0px 0px !important;*/
}



@media (max-width: 971px) {
     .section-1 {
          padding: 40% 0% !important;
     }

     h1 {
          font-size: 5rem !important;
     }
     
     .section-2, .section-4 {
         padding-bottom:40% !important;
     }
     
     
     .section-2 .btn-blue {
         margin:0px auto;
         display:block;
         max-width:50%;
     }
     
     .app-logo {
         width:47%;
     }
     

}



.custom-column {
     position: relative;
     /* For positioning ::before */
     background-color: #f8f9fa;
     /* Light background */
     border-radius: 10px;
     /* Rounded corners */
     padding: 20px;
     text-align: center;
     display: flex;
     flex-direction: column;
     /* Stack content vertically */
     justify-content: flex-start;
}

.custom-column::before {
     content: '';
     /* Empty content for the image */
     position: absolute;
     top: -177px;
     /* Adjust as needed */
     left: 50%;
     transform: translateX(-50%);
     width: 215px;
     /* Image width */
     height: 178px;
     /* Image height */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
}

@media (max-width: 993px) {
     .section-1 {
          padding: 20% 0%;
     }

     .section-3 {
          padding: 40% 5% 0px 5%;
     }

     .section-4,
     .section-5,
     .section-6 {
          padding: 10% 5%;
     }

     h1 {
          font-size: 5rem !important;
     }


     .custom-column {
          margin-bottom: 200px;
     }


    .birds, .face-container {
        display:none;
    }

    .section-2 {
        overflow:visible;
    }

}



.three-shapes {
     position: relative;
}

.three-shapes::before {
     content: '';
     /* Empty content for the image */
     position: absolute;
     top: -177px;
     /* Adjust as needed */
     left: 50%;
     transform: translateX(-50%);
     width: 399px;
     background: url('images/three-shapes.png?t=1');
     height: 321px;
     z-index: 999;
         background-size: cover;
}

.three-shapes img {
     position: relative;
     z-index: 999999;
     width: 100%;
}


.download {
     background: #FFF0B0;
}

.download::before {
     background-image: url('images/image-download.png');
     /* Replace with your image URL */
}

.relax {
     background: #FADAED;
}

.relax::before {
     background-image: url('images/image-relax.png');
       top:-178px !important;
     /* Replace with your image URL */
}

.request {
     background: #FFD7B9;
}

.request::before {
     background-image: url('images/image-request.png?t=21');
     top:-178px !important;
     /* Replace with your image URL */
}


.qr-container {
     background-color: #62388A;
     /* Light background */
     border-radius: 20px;
     /* Rounded corners */
     padding: 30px;
     /* Inner padding for spacing */
     border: 1px solid #62388A;
     /* Optional border */
     color: #FFFFFF !important;
}

.qr-container img {
     width: 100%;
}

.qr-container p, .site-footer p{
     color: #FFFFFF !important;
}


.site-footer {
     background-color: #094FB1;
     padding-bottom: 30px;
     position: relative;
     display: block;
     color:#FFFFFF !important;
}

.site-footer::before {
     content: '';
     display: block;
     position: absolute;
     top: -280px;
     width: 100%;
     height: 280px;
     /* Adjust height to match the SVG size */
     background: url('images/footer.svg') no-repeat center center;
     background-size: cover;
     /* Ensure the image scales appropriately */
     z-index: 1;
     /* Ensure proper layering */
}


.page-template-page-homepage .site-footer::before { 
    display:none;   
}


.footer-menu ul {
     list-style: none;
     margin: 0px 0px;
     padding: 0px 0px;
     background-color: #094FB1;
}
.footer-menu  {
color:#FFFFFF;
}

.footer-menu li {
     text-align: left;
}

.site-footer a,
.site-footer h5 {
     color: #FFFFFF;
     text-decoration: none;
     font-size: 1.8rem;
     text-align: left;
}


.footer-menu a,
.footer-menu h5 {
     color: #FFFFFF;
     text-decoration: none;
     font-size: 1.8rem;
     text-align: left;
}

.btn-yellow {
     background: #FFCE00;
     color: #000000;
     border-radius: 100px 100px;
     padding: 10px 30px;
     text-align: center;
}

.section-1.content .btn-yellow {
     background: #0B6FF9;
     color: #FFFFFF;
     border-radius: 100px 100px;
     padding: 10px 30px;
     margin: 20px 0px;
     display: inline-block;
     text-align: center;
}


.section-1.content .main-nav .nav-link.btn-yellow:hover {
     background-color: transparent;
     border: 1px solid #0B6FF9;
     color: #0B6FF9;
}



.btn-blue {
     background: #0B6FF9;
     color: #FFFFFF !important;
     border-radius: 100px 100px;
     padding: 10px 30px;
     margin: 20px 0px;
     display: inline-block;
     text-align: center;
     font-weight:600
}

.btn-yellow,
.btn-blue {
     text-decoration: none;
}

/* ----------------------- */
/* COMMON STYLES */
/* ----------------------- */
.tabs-wrapper {
  width: 100%;
  max-width: 1129px;
  margin: 20px auto;
}

/* Hide one version depending on screen size */
.desktop-tabs { display: block; }
.mobile-accordion { display: none; }

/* Tab color classes – these ensure the background color is always applied */
.tab.purple.active, 
.accordion-tab.purple { background-color: #62388A; color: white; }

.tab.orange.active, 
.accordion-tab.orange { background-color: #FF7E1D; color: white; }

.tab.red.active, 
.accordion-tab.red { background-color: #DC4C44; color: white; }

.tab.green.active, 
.accordion-tab.green { background-color: #49A35B; color: white; }

.tab.pink.active, 
.accordion-tab.pink { background-color: #EF89C4; color: white; }

/* ----------------------- */
/* DESKTOP (Tabs) Styles */
/* ----------------------- */
.desktop-tabs .tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid #ccc;
}

.desktop-tabs .tab {
  flex: 1;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  /*border: 1px solid #ccc;*/
  border-bottom: none;
  box-sizing: border-box;
  transition: background 0.3s ease;
  /* Background colors are already applied via the color classes above */
      font-family: "Bakbak One", serif;
}

.desktop-tabs .tab:first-child { border-top-left-radius: 10px; }
.desktop-tabs .tab:last-child  { border-top-right-radius: 10px; }

.desktop-tabs .tab-content {
  width: 100%;
  border: 1px solid #ccc;
  background: #FFFAE6;
  padding: 20px;
}

.desktop-tabs .tab-content-box {
  display: none;
  padding: 15px;
}

/* ----------------------- */
/* MOBILE (Accordion) Styles */
/* ----------------------- */
@media (max-width: 768px) {
  .desktop-tabs { display: none; }
  .mobile-accordion { display: block; }

  .mobile-accordion .accordion-item {
    /*border: 1px solid #ccc;*/
    /*margin-bottom: 10px;*/
  }

  .mobile-accordion .accordion-tab {
    padding: 15px;
    cursor: pointer;
    position: relative;
  }
  /* Always show the background colors (from the color classes) */
  .mobile-accordion .accordion-tab:after {
    content: "+";
    position: absolute;
    right: 15px;
    font-size: 18px;
    font-weight: bold;
    transition: 0.3s;
  }
  .mobile-accordion .accordion-tab.active:after {
    content: "-";
  }

  .mobile-accordion .accordion-content {
    display: none;
    padding: 15px;
    background: #FFFAE6;
  }
  
.section-6 img,
.section-7 img {
     max-width:100%;
}

  
  
}


.feature-image img {
    width:100%;
    border-radius:20px 20px;
}


.latest-blog-posts {
    padding: 50px 0;
}

.latest-blog-posts h2 {
    font-size:3rem;
}

.latest-blog-posts .card-title {
    font-weight: bold;
}

.latest-blog-posts .text-warning {
    font-size: 1.6rem;
}

.latest-blog-posts .card img {
    height: 180px;
    object-fit: cover;
}
.latest-blog-posts .card h5 {
font-size:1.8rem;
}


.feature-post {
    background-color: #462862;
    color: white;
    padding: 50px 0;
}

.feature-post h2 {
    font-size: 3rem;
    margin-bottom:20px;
}

.feature-post p {
    font-size: 1.8rem;
}

.feature-post img {
    max-height: 400px;
    object-fit: cover;
    width: 100%;
    border-radius: 10px;
}

.blog-top .container {
    background:#0C6FF9;
}

.blog-top h2 {
    font-size:3.5rem;
}

.blog-top h2, .blog-top p {
 color:#FFFFFF;   
}


.post, .page {
    margin:0px 0px !important;
}