:root{
	--green: #09bab0;
	--dark: #383840;
    --section-padding: 70px 0;
	}

body {font-family: "Inter", serif;font-optical-sizing: auto;font-weight: <weight>;font-style: normal;color:var(--dark);}
h1,h2,h3,h4,h5,h6{font-family: "Space Grotesk", serif;font-optical-sizing: auto;font-weight:600; font-style: normal; color: var(--dark);}
a{ text-decoration:none; transition:1s;} 
h1{ font-size: 4.668rem; }
h2{ font-size:48px; line-height: 3.2rem; }
h3{ font-size: 2.813rem;}
h4{ font-size: 1.25rem;}
h6 { font-size: 1.75rem; line-height: 1.95rem;}
p{ color:#6c6c74; font-size:17px;}
ul{ padding: 0; margin: 0;}
ul li{ list-style: none;}
.py-70{ padding:70px 0;}


.btn-style{padding: 13px 32px; font-size: 15px; background: var(--dark); border-radius:50px; color:white;}
.btn-style:hover{  background: var(--green); color:white;}

.btn-style-1{padding: 13px 32px; font-size: 15px; background: var(--green); border-radius:50px; color:white;}
.btn-style-1:hover{  background: white; color:var(--green);}

.header-style h4 i {background: var(--green);padding: 10px 13px;border-radius: 200px;font-size: 19px; margin-right:5px;}
.header-style h4, .header-style h2{ }
.header-style > *{ margin-bottom:30px;}
.header-style p{ margin-top:6.5rem;}
.header-style a.sample-link{ color:var(--dark); border-bottom:2px solid var(--dark); padding-bottom:2px;}
.header-style p a{ color: var(--dark: #323e3c;)}
@media (max-width:990px){.header-style p{ margin-top:1rem;}}

.slider-style, .bg-dark-1,.testimonials, footer , .inner-banner { position: relative; overflow: hidden;background: #383840;
    background-image: repeating-linear-gradient(
        to right,
        rgb(255, 255, 255,.05) 0px,
        rgb(255, 255, 255,.05) 1px,
        transparent 1px,
        transparent 50%);
    background-size: 35% 100%;
    color: white; padding-top: 70px; }

    @media (max-width:990px){ .slider-style, .bg-dark-1,.testimonials, footer { position: relative; overflow: hidden;background: #383840;
        background-image: repeating-linear-gradient(
            to right,
            rgb(255, 255, 255,.05) 0px,
            rgb(255, 255, 255,.05) 1px,
            transparent 1px,
            transparent 50%);
        background-size: 75% 100%;
        color: white; padding-top: 70px; }} 

.navbar a{ color: var(--dark);}
.navbar a:hover{ color: var(--green);}

.slider-content h1{ color: white; line-height: 80px;}
.slider-counter h4{ color: white; font-size: 36px; border-bottom: 1px solid var(--green); width: 50%;}
.counter {display: block;color: #fff;}
@media (max-width:996px){.slider-content{ text-align: center;} .slider-style{ padding-top: 120px;} .slider-counter{ text-align: center;} .slider-counter h4{ width: 100%;} }
@media (max-width: 556px) {
    .slider-counter h4 {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 50%;
        margin: 0 auto;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
}
@media (max-width:556px){.slider-content h1{ font-size: 3rem; line-height: 50px;}}

#tilt {display: block;height: 100%;width: 100%;margin: 0 auto;transition: box-shadow 0.1s, transform 0.1s;background-size: 100%;background-repeat: no-repeat;}
#tilt:hover {cursor: pointer;}
.navbar-expand-lg .navbar-nav .nav-link {padding-right: 1rem;padding-left: 1rem;}

.about-us{ background-image: url('logo-only-bg.png'), url('bg-round-about-us.png'); background-position: top left, bottom right;  background-repeat: no-repeat, no-repeat; background-size: 121px 276px, 333px 541px; padding:70px 0;  }
.about-us-shell { position:relative;}
.about-us-shell h2 {font-size: 6.25rem; line-height: 6.25rem; opacity: .1; position: absolute; top: 0; left: -20px;}
.about-us-shell h3{ font-size:28px; padding-top:70px;}
.about-us-shell hr {background: var(--green); width: 62px;height: 5px;opacity: 1;}
.about-us-shell-mt-10rem{ margin-top:7rem;}
@media (max-width:996px){.about-us-shell-mt-10rem{ margin-top:0rem;} .about-us-shell { margin-bottom: 2.5rem; margin-left: 1.5rem;}}

.bg-dark-1{ padding: 70px 0 70px 0;}
.bg-dark-1 .header-style h2{ color: white;}

.buttons {margin-bottom: 20px;text-align: right; /* Align buttons to the left */}
.filter-btn {padding: 10px 20px;font-size: 16px;border: none;cursor: pointer;background: none;color:#09bab0;border-radius: 5px;transition: 0.3s;position: relative;}
.filter-btn::before {content: '';position: absolute;width: 5px;height: 5px;background: #09bab0;border-radius: 50%;top: 50%;left: 11%;transform: translate(-50%, -50%);transition: background 0.3s ease;}
.filter-btn:hover {color: #fff;}
.active {color: #fff;}
.gallery {display: flex;flex-wrap: wrap;justify-content: flex-start; /* Align filtered items left to right */gap: 5px;max-width: 100%; /* Optional: Set max width */}
.gallery-item {width: 32.4%;border-radius: 8px;overflow: hidden;transition: all 0.5s ease;opacity: 1;transform: scale(1); border-radius: 15px; margin-bottom: 20px; position: relative;}
.gallery-item img {width: 100%;object-fit: cover; border-radius: 10px 10px 0 0;}
.gallery-item h4{ font-size:20px; text-transform: uppercase; margin-bottom: 10px;}
.gallery-item h4 i{ font-size: 20px;margin-top: 10px; color: var(--green);}
.gallery-style {background: white;padding: 25px 45px 15px 25px; border-radius:0 0 10px 10px;}
.hidden {opacity: 0;transform: scale(0.8);pointer-events: none;position: absolute;}
@media (max-width:996px){.gallery-item {width: 49%;} .buttons{ text-align: left;}}
@media (max-width:556px){.gallery-item {width: 100%;}}

.faq-style { padding: 70px 0;}
.accordion-button:not(.collapsed) {color: var(--dark); background-color: rgba(0, 0, 0, 0); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0); }
.accordion-item{background: linear-gradient(to bottom,  rgb(9, 185, 176,.15) 0%,rgb(9, 185, 176,.15) 0%,#ffffff 100%); }
.accordion-body {padding: 0rem 2rem 2rem 2rem;}
.accordion-button {padding: 1rem 2rem 1rem 2rem; font-weight: 700;}
.accordion-item {background-color: #fff;border: 1px solid rgba(0, 0, 0, 0);}
.accordion-button:not(.collapsed)::after , .accordion-button::after {background-image: none;}
.faq-img-style { position: relative;}
.faq-img-style .round-img-black { position: absolute;left: -100px; top: 50px;}
.GeneratedMarquee {width: 100%;font-size: 7em;font-weight: 700;line-height: 1.3em;color: rgb(50, 62, 60, .1);background-color: ;padding: 10px;font-family: "Space Grotesk", serif;margin: 25px 0;
}
.marquee-style {position: relative; display: flex;align-items: center;justify-content: center; height: 100%; text-align: center;}
.marquee-style h3 {position: absolute;margin-top: 25px; font-size: 35px;}
@media (max-width:768px){.faq-style .header-style{ margin-top: 35px;}}

.testimonials{ padding: 90px 0 70px 0; }
.testimonials .header-style{ z-index: 15;}
.testimonials .header-style h2, .testimonials .header-style h4 { color: #fff;}
.testimonials .header-style p { margin-top: 0;color: #88898d;}
.testimonials ul{ width: 100%;}
.testimonials ul li{ color: #fff; display: inline-block; font-family: "Space Grotesk", serif; margin-right: 25px; padding-right: 25px; }
.testimonials ul li:first-child{ font-size: 3.438rem; font-weight: 700; border-right: 1px solid #fff; line-height: 0.75;}
.testimonials .carousel-item{ color: white; }
.testimonials .carousel { background: white; border-radius: 15px;}
.testimonials img{ border-radius: 15px 0 0 15px;}
.carousel-inner p span {background: #f1991d; padding: 0px 10px 4px 10px; border-radius: 25px; color: white;}
.carousel-inner p span i { margin-right: 5px; font-size: 10px;}
.testimonial-style img{ width: 100%; object-fit: cover; height: 350px; border-radius: 43px 0px 0px 39px;}
@media (max-width:466px){.testimonials ul li { margin-bottom: 25px;} .testimonials ul li:first-child{ border: none;}}

.latest-news{ padding: 70px 0; background: #ecf1f1; }
.latest-news-container{-webkit-box-shadow: 0 0 25px rgba(0, 0, 0, .08); box-shadow: 0 0 25px rgba(0, 0, 0, .08); border-radius: 5px; background: #fff;}
.latest-news-container h3{ font-size: 25px;}
.latest-news-data{ padding: 25px;}
.author p img{ width: 25px; height: 25px; border-radius: 200px;}
.author{ padding: 15px 15px 0px 15px;}
.latest-news-data h3{ font-size: 22px;}

.action-section { background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#383840 50%,#383840 100%);  text-align: center;  }
.gradient-2-footer {background: linear-gradient(to bottom, #ecf1f1 0%, #ecf1f1 50%, #383840 50%, #383840 100%);}
.action-section .row { background: var(--green); border-radius: 15px; padding: 10px 0; background-image: url(./img/demo-elearning-bg-06.webp); background-repeat: no-repeat; background-position: left;}
.action-section h3{ font-size: 1.75rem; line-height: 1.95rem; padding: 25px; }
.action-section p{ color: #fff; margin-top: 13px; font-weight: 500;}
.action-section .btn-style:hover{ background: white; color: var(--green);}
@media (max-width:556px){ .action-section .row { background-image: none;} .action-section p{ margin-top: 35px;}}


.social-tails li{ font-size: 22px; font-weight: 500; display: inline-block; margin-right: 25px;}
.social-tails li a{ color:#6c6c74; border-bottom: 2px solid #6c6c74;}
footer{padding: 90px 0 70px 0; }
.social li{ display:inline-block; }
.social li a{ color:white;}
footer h4{ color:white; margin-bottom: 20px;}
.quick-links li{ margin-bottom: 10px;}
.quick-links li a{ color:#6c6c74; transition: 1s; }
.quick-links li a:hover{ color: var(--green);}
.copy-right a{ transition: 1s; color: #fff; }
.copy-right a:hover{ color: var(--green);}

.clearHeader {height: 100px;background: rgba(255, 255, 255, 0);position: fixed;top: 0;left: 0;width: 100%;z-index: 9999;-webkit-transition: 1s;transition: .3s ease-in-out;}
.clearHeader a{ color: #fff;}
.clearHeader .dark-logo{ visibility: hidden; width: 0;}
.clearHeader .white-logo{ visibility: visible; }
.darkHeader .white-logo{ visibility: visible;}
.darkHeader .white-logo{ visibility: hidden; width: 0;}

@media (max-width:996px){
.clearHeader .navbar-toggler i{ color: #fff; }
.clearHeader .navbar-toggler { border: 1px solid #fff;}
.clearHeader .nav-link, .clearHeader .dropdown-item{ color: #6c6c74;}
.darkHeader .navbar-toggler { border: 1px solid #6c6c74;}}

.darkHeader {height: 100px;background: #fff;position: fixed;top: 0;left: 0;width: 100%;z-index: 999;-webkit-transition: 1s;transition: .3s ease-in-out;}
.darkHeader .navbar {padding: .5rem 0rem;}

@media (max-width:996px){.navbar-nav{ background:white;}}
@media (min-width:996px){.clearHeader .dropdown-menu{ background: var(--dark);}}

.inner-banner{ padding: 150px 0;}
.inner-banner h1{ color: #fff;}
@media (max-width:556px){.inner-banner h1{ font-size: 48px;}}

.google-map, .form-style{ padding: 70px 0;}
.contact-us-dentails-container{ position: relative;}
.contact-us-details{ position: absolute; bottom: 0; right: 0; background: var(--green); padding: 45px 75px 45px 45px; width: 35%; background-image: url(./img/demo-elearning-bg-06.webp); background-position: bottom right; background-repeat: no-repeat;}
.contact-us-details h3{ font-size: 36px; color: #fff;}
.contact-us-details p{ color: #fff;}
.mail-id span{ color: var(--dark); border-bottom: 2px solid var(--dark);}
@media (max-width:996px){.contact-us-details{ width: 100%;}}

.form-control {
    display: block;
    width: 100%;
    padding: 1rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
     border-radius: 0; 
    transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
    border-width: 0px 0px 1px 0px; /* Top Right Bottom Left */
  border-style: solid;
  border-color: #ced4da;
}

.courses-inner-page{ padding: 70px 0; background: #ecf1f1;}
.courses-inner-page .active, .courses-inner-page .filter-btn:hover {color: var(--dark);}

.navbar-nav .active{ color: var(--green);}

.photo-gallery{ background: #ecf1f1; padding: var(--section-padding);}
.photo-gallery .buttons{ text-align: center; margin-bottom: 35px;}
.photo-gallery .buttons .active { color: var(--dark);}
.photo-gallery img{ transition: 1s;}
.photo-gallery img:hover{ opacity: .65;}

.faculty-style{ padding: var(--section-padding); background-color: #ecf1f1;}

.image-container {
    position: relative;
    cursor: pointer;
    background-color: white;
  }

  @media (max-width:996px){.image-container { margin-top: 1rem;}}

  .image-text {
    padding: 15px 20px 10px 20px;
    background-color: #09bab0;
    border-radius: 0 0 10px 10px;
    /* color: #fff; */
}
  .image-text h3{ font-size: 24px;}
  .image-text h3 , .image-text p{ color: #fff;}

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgb(9, 186, 176, 0.6);
    opacity: 0;
    transition: 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 1.5rem;
  }

  .overlay span{ color: white; font-size: 16px; background-color: white; color:var(--dark); padding: 8px 20px; border-radius: 10px;}


  .image-container:hover .overlay {
    opacity: 1;
  }

  .modal-content {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .modal-body {
    /*display: flex;*/
    gap: 20px;
  }

  .modal-img {
    width: 100%;
    /* height: auto; */
    border-radius: 10px;
    margin-bottom: 25px;
}

  .modal-text {
    flex: 1;
  }

  .modal-text h3{ font-size: 30px;}
  .modal-text hr{ background-color: var(--green);}

  .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    z-index: 9999999;
    background: #09bab0;
    border-radius: 25px;
    padding: 5.5px 16.5px;
    border: 1px solid #09bab0;
    transition: 1s;
  }

  .close-btn:hover{ color: var(--green); background: #fff;}


/*gallery section */