@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&family=Roboto+Slab:wght@100..900&display=swap');


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

:root {
    --primary: #41b2a5;
    --secondary: #ef5f34;
    --text-dark: #212158;
    --text-light: #676767;
    --text-white: #ffffff;
}


body {
    font-family: "Mulish", sans-serif;
    margin: 0;
    padding: 0;
}

/* ======== */
.seed-logo {
    height: 50px;
}
.SEED-logo{
    height:50px;
}
.pre-header {
    background: #06695e;
    height: 35px;
}

.pre-header--link a {
    color: var(--text-white);
}

header {
    background-color: #fef6f3;
    color: var(--text-dark);
    padding: 10px;
    text-align: center;
    box-shadow: -2px 0 24px rgba(0, 0, 0, .20);
    position: relative;
    z-index: 999999;
}

nav {
    margin: 0 auto;
    /* padding: 8px 2rem; */
}


.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    align-items: center;
    font-size: 14px;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--secondary);
}

.menu-icon,
.close-icon {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-dark);
    transition: transform 0.3s ease;
}

.menu-icon:hover,
.close-icon:hover {
    transform: scale(1.1);
}

#menu-toggle {
    display: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero {
        margin-bottom: 0 !important;
    }

    .logo img {
        width: 30%;
    }

    .menu-icon {
        display: block;
    }

    .nav-links {
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background-color: #F7F3ED;
        flex-direction: column;
        padding: 0;
        gap: 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        z-index: 2;
        margin: 20px;
        border-radius: 8px;
    }

    .nav-links li {
        opacity: 0;
        transform: translateX(-20px);
        transition: all 0.3s ease;
    }

    .nav-links a {
        display: block;
        padding: 1rem;
    }

    #menu-toggle:checked~.nav-links {
        max-height: 400px;
        padding: 0.5rem 0;
        /*overflow: scroll;*/
    }

    #menu-toggle:checked~.nav-links li {
        opacity: 1;
        transform: translateX(0);
    }

    /* Staggered animation for list items */
    #menu-toggle:checked~.nav-links li:nth-child(1) {
        transition-delay: 0.1s;
    }

    #menu-toggle:checked~.nav-links li:nth-child(2) {
        transition-delay: 0.2s;
    }

    #menu-toggle:checked~.nav-links li:nth-child(3) {
        transition-delay: 0.3s;
    }

    #menu-toggle:checked~.nav-links li:nth-child(4) {
        transition-delay: 0.4s;
    }

    #menu-toggle:checked~.menu-icon {
        display: none;
    }

    #menu-toggle:checked~.close-icon {
        display: block;
    }
}

@media (max-width: 758px) {
    .nav-links {
        top: 55px;
    }
}

@media (max-width: 480px) {
    .logo img {
        width: 70%;
    }

    .nav-links {
        top: 50px;
    }
}

/* ============== */



/* slider css start  */
.slider {
    position: relative;
    width: 100%;
    height: 310px;
    overflow: hidden;
    /* background: #000; */
}

.slides {
    display: flex;
    width: 400%;
    height: 100%;
    transition: transform 1.2s ease-in-out;
}

.slide {
    flex: 0 0 25%;
    height: 100%;
    position: relative;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.herosection {
    position: relative;
}

.hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: var(--text-white);
    text-align: center;
    width: 70%;
}

.heading-1 {
    font-family: "Roboto Slab", serif;
    font-size: 48px;
    font-weight: 600;
}

.heading-1 span {
    color: #FFA017;
}

.para-1 {
    opacity: .9;
    color: var(--text-white);
}

@media (max-width: 1024px) {
    .heading-1 {
        font-size: 32px;
    }
}

@media (max-width: 540px) {
    .heading-1 {
        font-size: 24px;
    }

    .para-1 {
        font-size: 13px;
    }
}

/* about us section  */

.about {
    position: relative;
    padding: 40px 0;
}

.about::before {
    position: absolute;
    left: 0px;
    top: 0;
    height: 100%;
    width: 32%;
    content: "";
    background: #fef6f3;
    z-index: -1;
}

.about-image img {
    width: 400px;
}

.video-popup {
    position: absolute;
    width: 300px;
    height: 200px;
    background-image: url(../images/video.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    top: 20%;
    left: 5%;

}

.popup-video {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.popup-video.show {
    display: flex;
}

/* .video-popup .popup-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
} */

.video-popup .popup-video iframe {
    width: 80%;
    height: 80%;
    border: none;
    z-index: 1000;
}

.close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 30px;
    cursor: pointer;
    z-index: 1001;
}

.video-btn {
    width: 77px;
    height: 77px;
    border-radius: 50%;
    background-color: #33333396;
    border: none;
    cursor: pointer;
}

.top-head {
    color: var(--secondary);
    font-weight: 600;
    font-family: "Roboto Slab", serif;
}

.heading-2 {
    font-family: "Roboto Slab", serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--text-dark);
}

.heading-2 span {
    color: var(--primary);
}

.para-2 {
    color: var(--text-light);
    font-size: 14px;
}

.about-mpo {
    border-left: 3px solid var(--secondary);
    background: #f7f7f7;
}

.mpo-para {
    font-family: "Roboto Slab", serif;
    color: var(--text-dark);
    font-size: 18px;
    font-weight: 600;
    margin-left: 16px;
}

.about-content ul li {
    color: var(--text-light);
    font-size: 14px;
    list-style: none;

}

@media (max-width:767px) {
    .about-image {
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .video-popup {
        position: static;
    }
}

@media (max-width:540px) {
    .heading-2 {
        font-size: 21px;
    }

    .mpo-para {
        font-size: 16px;
    }
}

/* feature css start  */

.features {
    padding: 40px 0;
    position: relative;
}

.features::before {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 32%;
    content: "";
    background: #fef6f3;
    z-index: -1;
}

.dot-img {
    position: absolute;
    right: 0;
    top: 0;
}

.tab {
    background: #fff;
    border-radius: 16px;
    box-shadow: 1px 1px 24px rgba(123, 136, 168, 0.16);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin-bottom: 10px;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.tab.active {
    border-bottom: 2px solid var(--primary);
}

.heading-3 {
    font-family: "Roboto Slab", serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.para-3 {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 0;
}

.card {
    border: none;
    background: #fef6f3;
    flex-grow: 1;
}

.card-title {
    font-size: 14px;
}

@media (max-width:540px) {
    .heading-3 {
        font-size: 16px;
    }

    .para-3 {
        font-size: 13px;
    }
}

/* approach css start  */

.approach {
    padding: 20px 0;
}

.approach-content {
    width: 80%;
}

.approach-box {
    box-shadow: 1px 1px 24px rgba(123, 136, 168, 0.16);
    padding: 12px;
    border-radius: 16px;
}

.approach-box:hover {
    background: #fef6f3;
    box-shadow: none;
}

/* contact us css start  */

.contact {
    background-image: url('../images/contact-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
}

.contact-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
    font-family: "Roboto Slab", serif;
}



.primary-btn {
    background: linear-gradient(180deg, var(--secondary), rgba(239, 95, 52, 0.749));
    color: var(--text-white) !important;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
}

.primary-btn:hover {
    background: linear-gradient(180deg, rgba(239, 95, 52, 0.749), var(--secondary));
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
}

.secondary-btn {
    background: linear-gradient(180deg, var(--primary), #10796D);
    color: var(--text-dark);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
}

.secondary-btn:hover {
    background: linear-gradient(180deg, #10796D, var(--primary));
    color: var(--text-white);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
}


footer {
    background-color: #fef6f3;
    padding-top: 40px;
}

.footer--features ul li {
    list-style: none;
}

.footer--features ul li a {
    text-decoration: none;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 500;
}

.footer--features ul li a:hover {
    color: var(--secondary);
}

.social-box img {
    height: 21px;
}

.social-box li {
    list-style: none;
    background: #33333341;
    padding: 8px;
    border-radius: 8px;
    margin: 4px;
}

.bottom-footer {
    background: var(--primary);
}


/* login style start */

.login-container {
  height: calc(100vh - 140px);
  display: flex;
  align-items: center;
  background-image: url('../assets/images/login-bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.login-form {
  background: #fef6f3;
  padding: 24px;
  border-radius: 8px;
  position: relative;
}

.fw-text a {
  font-weight: 600;
  color: var(--text-dark);
  text-decoration: none;
}

.fw-text a:hover {
  color: var(--secondary);
}

/* login3 style end */

/* form style css start  */

.csr-form img {
    width: 100%;
    height: 150px;
}

.form-bg {
    /* background: #f7f7f7; */
    border-radius: 4px;
    border: 1px solid #dedede;
}

.form-heading {
    background: #f7f7f7;
    color: var(--text-dark);
    font-family: "Roboto Slab", serif;
    font-size: 21px;
    padding: 12px 0;
}

        .lazy{ 
              float: left;
    width:  200px;
    height: 200px;
    object-fit: cover;
    border-radius:10px;
    border:2px solid #ddd;
        }
        .gallery-item{list-style:none;padding:0;margin:0}
        .gallery-item-img{float:left;padding:10px}
        #form-year{ width:200px;float:right}

        .pre-header--link a{
            text-decoration:none;
        }

        .lang-switch{list-style:none}
        .lang-switch > li{float:left;padding:3px}
        .page-title{text-align:center;padding-top:20px}
        .pt-50{padding-top:50px}
        .pb-50{padding-bottom:50px}
        .link-orange{
            color:#ef5f34;
            text-decoration: none;
            font-size:14px;
        }
        .link-orange:hover{
            color:#983315;
        }
        .mt-20{
            margin-top:20px;
        }
        .back-to-gallery{
            position: relative;
    left: 90%;
    padding-bottom: 10px;
    text-decoration: none;
    color: #ef5f34;
        }


        .row-margin-bottom-20{
    margin-bottom:25px;
}
span.required{color:red}
.align-center{display:table;margin:auto}
.line{
    position: absolute;
    width: 90%;
    height: 2px;
    background-color: #dedcdc;
    top: 17px;
    z-index: 1;
}
.heading-wrapper h4{   
padding: 7px;
    display: inline-block;
    background-color: #06675d;
    border-radius: 10px;
    z-index: 2;
    position: relative;
    color: #fff;
    left:10px;
    font-size:16px;
}
.heading-wrapper{
    margin-bottom:2em;
    margin-top:2em;
    position:relative;
}
#s-w{position:relative}


@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
.loading{   -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    display:none;
    position:absolute;
    top:0px;
    left:40%;
    font-size:2em;
}
.btngetotp{
    margin-top:29px;
}
.error-msg{color:red;font-size:12px}
.error-highlight{border:1px solid red}
.error-msg-captcha{color:red;font-size:12px}
#overlay{
background-color: #fff;
    opacity: 0.5;
    position:absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    top:0;
}

.card-body{position:relative}
#div-verify-otp{display:none}
.i-green{color:green}
.dark-grey{background-color:#f2f2f2;border-bottom:1px solid #ddd}
.grey{background-color:#f4f4f4;border-bottom:1px solid #ddd}
h6{padding: 10px;
    font-weight: bold;
    color: #727272;}
    
    #lbl-validate-otp{ color:red;font-size:12px}
    .error-msg-otp{display:block;color:red}
    .form-bg{padding:10px !important}
    .no-underline{text-decoration: none;}
    /*#thank-you{
        position: absolute;
    z-index: 999999999;
    top: 0%;
    left: 0;
    background-color: #ffa017;
    opacity: 0.95;
    width: 100%;
    text-align: center;
    color: #fff;
    
    }
    */

    #thank-you {
        position: absolute;
        z-index: 999999999;
        top: 20%;
        left: 35%;
        height: 64px;
        background-color: #06685d;
        opacity: 1;
        width: 400px;
        text-align: center;
        color: #fff;
        display: block;
        height: 200px;
        border-radius: 10px;
    }
    #thank-you ul{
        list-style:none;
        padding:0;
        margin:20px;
    }
    #thank-you li{
        float:left;
        padding:10px;
        font-size:1.2em;
    }
    #close-thank-you{
        background-color: #198754;
        color:#fff;
        text-decoration:none;
        text-align:center;
        display:block;
        padding:5px;
    }

    #close-thank-you:hover{
        background-color: #fff;
        color:#000;
    }
    .lbl-step{
        background-color: #06675d;
    width: 100px;
    margin-top: 20px;
    color: #fff;
    padding-left: 10px;
    }
    .div-file-preview{
        width:100%;
    }
    .div-file-preview ul{list-style:none;padding:2px;margin:2px}
    .div-file-preview li{float:left;padding:5px;}
    .div-file-preview a{color:orange;text-decoration:none;padding:3px;border-radius:5px;background-color:#fff}
    .div-file-preview a:hover{color:#000;text-decoration:underline}