@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kufam:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');

@font-face {
    font-family: 'MilkywayDemo';
    src: url('../fonts/Milkyway\ DEMO.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.pt-30{
    padding-top: 30%;
}

.navbar-nav .navbar-brand {
  font-size: 50px;
  font-weight: bold;
  color: black;
  padding-bottom: 15px;
}
.navbar-nav {
  align-items: center;
}
.navbar .navbar-nav .nav-link {
  color: #5E7E65;
  font-size: 15px;
  padding: 0.5em 5em;
  font-family: "Krona One", sans-serif;
}

.custom-toggler {
    border: none;
    background: transparent;
    padding: 0.5rem;
    outline: none;
}

.hamburger {
    width: 30px;
    height: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hamburger span {
    height: 3px;
    width: 100%;
    background-color: #333; /* Customize color */
    border-radius: 2px;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1),
                opacity 0.5s cubic-bezier(0.77, 0, 0.175, 1),
                background-color 0.3s ease;
    display: block;
    position: relative;
}


/* Animation when toggled */
.custom-toggler.collapsed .hamburger span:nth-child(1) {
    transform: rotate(0deg) translateY(0);
}

.custom-toggler:not(.collapsed) .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.custom-toggler:not(.collapsed) .hamburger span:nth-child(2) {
    opacity: 0;
}

.custom-toggler:not(.collapsed) .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

.banner {
    background: linear-gradient(to right, #43BDA8, #CBE486);
    position: relative;
}

.banner::before {   
  content: "";
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 31vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  80' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 59L50 55C100 51 200 44 300 30C400 15 500 -6 600 1C700 8 800 44 900 59C1000 73 1100 66 1150 62L1200 59V80H1150C1100 80 1000 80 900 80C800 80 700 80 600 80C500 80 400 80 300 80C200 80 100 80 50 80H0V59Z' fill='%23FFF'/></svg>");
}

.banner h1{
    font-family: 'MilkywayDemo', sans-serif;
    font-size: 75px;
    line-height: 85px;
    color: #fff;
    text-shadow: 5px 10px 10px rgba(0, 0, 0, 0.3);
    padding: 0 80px 0 0;
}

.banner span{
    font-family: "Kufam", sans-serif;
    font-size: 35px;
    color: #fff;
}

.button-group {
    margin-top: 20px;
}

.button-group a {
    display: inline-block;
    margin-right: 15px;
    text-decoration: none;
    padding: 10px 20px;
    background-color: #fff;
    color: #2F5C5C;
    border-radius: 25px;
    font-family: "Krona One", sans-serif;
    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.button-group a:hover {
    background-color: #2F5C5C;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 8px 15px 20px rgba(0, 0, 0, 0.35);
}

.button-group a:hover{
    box-shadow:none;
}

.button-group a:last-child {
    margin-right: 0;
}

.morning{
    padding: 100px 0;
}

.morning h2{
    font-size: 65px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #5E7E65;
}

.morning p{
    font-family: "Kufam", sans-serif;
    font-size: 20px;
    line-height: 25px;
    color: #696666;
    width: 80%;
    margin-bottom: 35px;
}

.morning a{
    font-family: "Krona One", sans-serif;
    font-size: 15px;
    color: #fff;
    background: #5E7E65;
    border-radius: 25px;
    text-decoration: none;
    padding: 10px 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.morning a svg {
    transition: transform 0.3s ease;
}

.morning a:hover svg {
    transform: translateX(5px);
}

.features{
    background: url('../images/features-bg.png');
    padding-top: 170px;
    padding-bottom: 170px;
    background-size: cover;
    background-repeat: no-repeat;
}

.features h2{
    font-size: 65px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #2F5C5C;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.features h3{
    font-size: 17px;
    line-height: 40px;
    font-family: "Krona One", sans-serif;
    color: #0B0B0B;
}

.features p{
    font-size: 12px;
    font-family: "Krona One", sans-serif;
    color: #0B0B0B;
}

.feature-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 20px;
}

.product-works{
    background: url('../images/product-works-bg.png') no-repeat, #FFDF9F;
    background-size: cover;
    padding: 100px 0px;
    position: relative;
}

.corner-img {
  position: absolute;
  width: 20%;
  height: auto;
  pointer-events: none;
}

.top-left {
  top: 0;
  left: 0;
}

.bottom-right {
  bottom: 0;
  right: 0;
  transform: scale(-1, -1);
}

.product-works h2{
    font-size: 65px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #2F5C5C;
    text-align: center;
}

.product-works .works-box {
    background: url('data:image/svg+xml;utf8,<svg width="355" height="299" viewBox="0 0 355 299" xmlns="http://www.w3.org/2000/svg"><path d="M346.127 145.525C369.866 244.573 267.483 313.424 174.081 296.416C42.3666 272.405 -11.2543 220.925 1.94467 145.525C20.4599 40.0194 91.7711 0 186.822 0C281.873 0 326.695 64.3948 346.127 145.525Z" fill="white"/><path d="M350.727 153.475C374.466 54.4271 272.083 -14.4244 178.681 2.58378C46.9666 26.5954 -6.65427 78.0749 6.54471 153.475C25.06 258.981 96.3711 299 191.422 299C286.473 299 331.295 234.605 350.727 153.475Z" fill="%232F5C5C"/></svg>') no-repeat center center / contain;
    padding: 70px 0;
    position: relative;
}

.svg-badge {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 85px;
    height: 72px;
    z-index: 1;
}

.product-works h3{
    font-size: 25px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #FFF;
    /* line-height: 60px; */
    margin-top: 20px;
    letter-spacing: 0.5px;
    /* text-align: center; */
}

.product-works p{
    font-family: "Kufam", sans-serif;
    font-size: 15px;
    /* text-align: center; */
    line-height: 22px;
    color: #FFF;
}

.science{
    background: url('../images/science-bg.png') no-repeat;
    background-size: 100% 100%;
    padding-top: 100px;
    padding-bottom: 65px;
    margin-top: -3.5%;
    z-index: 1;
    position: relative;
    background-position: bottom center;
}

.science h2{
    font-size: 65px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #0B0B0B;
    text-shadow: 4px 4px 0 white;
}

.science .science-box h3{
    color: #0B0B0B;
    font-size: 20px;
    font-family: "Krona One", sans-serif;
}

.science .science-box p{
    color: #0B0B0B;
    font-size: 15px;
    font-family: "Krona One", sans-serif;
}

.reviews{
    padding: 100px 0;
}

.reviews span{
    font-size: 35px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #0B0B0B;
}

.reviews h2{
    font-size: 65px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #2F5C5C;
}

.reviews .slider-container {
  position: relative;
  padding-left: 70px;
  max-width: 100%;
  box-sizing: border-box;
}

.reviews .swiper {
  padding-bottom: 60px;
}

.reviews .swiper-slide {
  width: auto;
}

.reviews .slide-content {
  position: relative;
  text-align: center;
}

.reviews .slide-img {
  width: 100%;
  /* max-width: 300px; */
  border-radius: 15px;
}

.reviews .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.reviews .slide-text {
  margin-top: 15px;
}

.reviews .slide-text .name {
  color: #0B0B0B;
  font-size: 20px;
  font-family: "Krona One", sans-serif;
}

.reviews .slide-text .designation {
  color: #0B0B0B;
  font-size: 15px;
  font-family: "Krona One", sans-serif;
}

/* Spacing between slides */
.reviews .swiper-wrapper {
  gap: 50px;
  display: flex;
}

/* Custom navigation buttons */
.reviews .custom-nav {
  width: 50px;
  height: 50px;
  background-color: #2F5C5C;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  top: auto;
  right: 6%;
  left: auto;
  z-index: 10;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABtklEQVR4nO3dv2oUURhA8c2fNxGMXUCR9ZltUgRJGV9GSGOyWJgEiyML00mSibB7T3bO7wk+9nC/YYu5s1olSZL8L+CoX08AOAeugHvgEbgEPoyea8kxfvGvO2A9er7FmU7GUzZF2SPgeFpTz9kUZb9Rfr8QZKsoewxywTybTsp+grybHuBFsQA+Aj9fEeXL6JkPXlGEiiJUFKGiCBVFqChCRRGi/yk+FMWHovhQFB+K4kNRfCiKD0XxoSg+FMWHovhQFB+K4kNRfCiKD0XxoSg+FMWHovhQFB+K4kNRfCiKD0XxoSg+FMUHWE9vaM2xfQ3v/eiZDx6vi/J19LyLwPz1dTN61kUAPgG3M4L8GD3rwaOV5UEP9Te5pra6VWKXiiFCJ8ODYnhQDA+K4UExPCiGB8XwoBgeFMODYnhQDA+K4UExPCiGB8XwoBgeFMODYnhQDA+K4UExPCiGB8XwoBgexRAphkgxRIohUgyRYogUQ6QYIsBZn14VAb4xz6aPE+8+xgnwWAwJ4BT408kQAb63pkSAz8D9E5e7rEfPt+Qo19P6egAuu2nH85A/Hj1HkiTJalf+AuyNisciNGJHAAAAAElFTkSuQmCC');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled{
    opacity: 1;
}

.reviews .swiper-button-prev.custom-nav {
  right: 10%;
  transform: rotate(180deg);
}

/* .reviews .swiper-button-next.custom-nav {
  right: 0;
} */

.reviews .swiper-button-next::after,
.reviews .swiper-button-prev::after {
  content: none; /* remove default Swiper arrows */
}

.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
}

.video-modal-content {
  position: relative;
  width: 80%;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  background: #000;
}

.video-modal-content iframe {
  width: 100%;
  height: 100%;
}

.close-btn {
  position: absolute;
  top: 10px; right: 15px;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  z-index: 10;
}

.faqs{
    padding-top: 50px;
    padding-bottom: 50px;;
}

.faqs h2, .home-blog h2{
    font-size: 65px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #2F5C5C;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.faqs .left-side{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.faqs .left-side h3{
    font-size: 40px;
    font-family: 'MilkywayDemo', sans-serif;
    color: #0B0B0B;
}

.faqs .left-side p{
    font-size: 15px;
    font-family: "Krona One", sans-serif;
    color: #0B0B0B;
}

.faqs .left-side a{
    font-size: 15px;
    font-family: "Krona One", sans-serif;
    color: #0B0B0B;
    border: 2px solid #0B0B0B;
    border-radius: 25px;
    padding: 10px 20px;
    width: fit-content;
    text-decoration: none;
}

.right-side .accordion h3 .accordion-button{
    font-size: 20px;
    font-family: "Krona One", sans-serif;
    color: #0B0B0B;
    padding: 20px 10px;
}

.right-side .accordion h3 .accordion-button:not(.collapsed){
    background-color: #fff;
}

.right-side .accordion p{
    font-size: 15px;
    font-family: "Krona One", sans-serif;
    color: #0B0B0B;
}

.right-side .accordion .accordion-item{
    border-bottom: 1px solid #696666;
}

.right-side .accordion .accordion-item:last-child {
  border-bottom: none;
}

.right-side .accordion-button::after {
  content: '+';
  font-size: 1.2rem;
  margin-left: auto;
  background-image: none !important;
  transform: none !important;
}

.right-side .accordion-button[aria-expanded="true"]::after {
  content: '-';
}

.home-blog{
    padding: 50px;
}

.home-blog .box{
    box-shadow: 0px 6px 4px rgba(0, 0, 0, 0.3);
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    padding: 0;
}

.home-blog .box img{
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.home-blog span, .home-blog .blog-desc h3{
    font-size: 15px;
    font-family: "Krona One", sans-serif;
    color: #0B0B0B;
}

.home-blog .blog-desc h3 a{
    font-size: 15px;
    font-family: "Krona One", sans-serif;
    color: #0B0B0B;
    text-decoration: none;
}

.home-blog .blog-desc h3 a:hover{
    color: #2F5C5C;
}

.home-blog .blog-desc{
    padding: 10px;
}

.home-blog .blog-desc span{
    color: #696666;
}

.home-blog .blog-desc p{
    color: #696666;
    font-size: 15px;
    font-family: "Krona One", sans-serif;
}

.home-blog .blog-desc .author-info {
    display: flex;
    align-items: center;
    gap: 12px; /* spacing between avatar and text */
}

.home-blog .blog-desc .author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%; /* makes it circular */
    object-fit: cover;
}

.home-blog .blog-desc .author-details {
    display: flex;
    flex-direction: column;
}

.home-blog .blog-desc .author-name {
    font-family: "Krona One", sans-serif;
    font-size: 15px;
}

.home-blog .blog-desc .author-company {
    font-size: 10px;
    font-family: "Krona One", sans-serif;
    color: #696666;
}

footer{
    background-color: #2F5C5C;
    color: #fff;
}

footer .one{
    padding: 70px 0px 35px 0px;
}

footer .one p, footer .one ul li a, footer .two p{
    font-family: "Krona One", sans-serif;
    font-size: 13px;
    color: #fff;
    text-decoration: none;
}

footer .one ul li a:hover{
    color: #ffc34d;
}

footer .one h3{
    font-family: "Krona One", sans-serif;
    font-size: 20px;
    color: #fff;
}

footer .one ul{
    list-style: none;
    padding-left: 0px;
}

footer .one p{
    line-height: 22px;
}

footer .one ul{
    line-height: 28px;
}

footer .the-company{
    padding-left: 6rem;
}

footer .two{
    padding: 20px 0px 0px 0px;
    border-top: 1px solid #fff;
}