/************ CSS Styles ************
    Template Name: Kalvin - Portfolio Template
    Author: cosmos-themes
    version: 2.0
    Copyright: 2021
************************************/


/*==================================
        Table of Content
        1. Body and Core Css
        2. Preloader
        3. Navbar
        4. Banner Section
        5. About Section
        6. Services Section
        7. Stats Section
        8. Portfolio Section
        9. Blogs Section
        10. Testimonial Section
        11. Contact Form Section
        12. Footer
        13. Blogs Page
        14. Single Blog Page
        15. Mobile Responsive
==================================*/


/*============ 1. Body and Core Css ============*/

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-decoration: none !important;
    list-style: none !important;
    outline: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222;
}

img {
    width: 100%;
    height: auto;
}

a,
a:hover,
a:focus {
    color: inherit;
}

body {
    font-family: "Raleway", san-serif;
    position: relative;
    font-size: 16px;
    line-height: 1.65;
    color: #484848;
    -webkit-font-smoothing: antialiased;
}

p {
    font-size: 16px;
    line-height: 1.65;
    font-family: "Open Sans", sans-serif;
}

span {
    display: inline-block;
}


/*===========Margin And Paddings============*/

.mt-0 {
    margin-top: 0 !important;
}
.mt-5 {
    margin-top: 5px !important;
}
.mt-10 {
    margin-top: 10px !important;
}
.mt-15 {
    margin-top: 15px !important;
}
.mt-20 {
    margin-top: 20px !important;
}
.mt-25 {
    margin-top: 25px !important;
}
.mt-30 {
    margin-top: 30px !important;
}
.mt-35 {
    margin-top: 35px !important;
}
.mt-40 {
    margin-top: 40px !important;
}
.mt-45 {
    margin-top: 45px !important;
}
.mt-50 {
    margin-top: 50px !important;
}
.mt-55 {
    margin-top: 55px !important;
}
.mt-60 {
    margin-top: 60px !important;
}
.mt-62 {
    margin-top: 62px !important;
}
.mt-65 {
    margin-top: 65px !important;
}
.mt-70 {
    margin-top: 70px !important;
}
.mt-75 {
    margin-top: 75px !important;
}
.mt-80 {
    margin-top: 80px !important;
}
.mt-85 {
    margin-top: 85px !important;
}
.mt-90 {
    margin-top: 90px !important;
}
.mt-95 {
    margin-top: 95px !important;
}
.mt-100 {
    margin-top: 100px !important;
}
/* Custom Margin Bottom */
.mb-0 {
    margin-bottom: 0 !important;
}
.mb-5 {
    margin-bottom: 5px !important;
}
.mb-10 {
    margin-bottom: 10px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.mb-20 {
    margin-bottom: 20px !important;
}
.mb-25 {
    margin-bottom: 25px !important;
}
.mb-30 {
    margin-bottom: 30px !important;
}
.mb-35 {
    margin-bottom: 35px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}
.mb-45 {
    margin-bottom: 45px !important;
}
.mb-50 {
    margin-bottom: 50px !important;
}
.mb-55 {
    margin-bottom: 55px !important;
}
.mb-60 {
    margin-bottom: 60px !important;
}
.mb-62 {
    margin-bottom: 62px !important;
}
.mb-65 {
    margin-bottom: 65px !important;
}
.mb-70 {
    margin-bottom: 70px !important;
}
.mb-75 {
    margin-bottom: 75px !important;
}
.mb-80 {
    margin-bottom: 80px !important;
}
.mb-85 {
    margin-bottom: 85px !important;
}
.mb-90 {
    margin-bottom: 90px !important;
}
.mb-95 {
    margin-bottom: 95px !important;
}
.mb-100 {
    margin-bottom: 100px !important;
}
.m-0 {
    margin: 0px !important;
}
/* Custom Padding top */
.pt-0 {
    padding-top: 0 !important;
}
.pt-5 {
    padding-top: 5px !important;
}
.pt-10 {
    padding-top: 10px !important;
}
.pt-15 {
    padding-top: 15px !important;
}
.pt-20 {
    padding-top: 20px !important;
}
.pt-25 {
    padding-top: 25px !important;
}
.pt-30 {
    padding-top: 30px !important;
}
.pt-35 {
    padding-top: 35px !important;
}
.pt-40 {
    padding-top: 40px !important;
}
.pt-45 {
    padding-top: 45px !important;
}
.pt-50 {
    padding-top: 50px !important;
}
.pt-55 {
    padding-top: 55px !important;
}
.pt-60 {
    padding-top: 60px !important;
}
.pt-65 {
    padding-top: 65px !important;
}
.pt-70 {
    padding-top: 70px !important;
}
.pt-75 {
    padding-top: 75px !important;
}
.pt-80 {
    padding-top: 80px !important;
}
.pt-85 {
    padding-top: 85px !important;
}
.pt-90 {
    padding-top: 90px !important;
}
.pt-95 {
    padding-top: 95px !important;
}
.pt-100 {
    padding-top: 100px !important;
}
/* Custom Padding top */
.pb-0 {
    padding-bottom: 0 !important;
}
.pb-5 {
    padding-bottom: 5px !important;
}
.pb-10 {
    padding-bottom: 10px !important;
}
.pb-15 {
    padding-bottom: 15px !important;
}
.pb-20 {
    padding-bottom: 20px !important;
}
.pb-25 {
    padding-bottom: 25px !important;
}
.pb-30 {
    padding-bottom: 30px !important;
}
.pb-35 {
    padding-bottom: 35px !important;
}
.pb-40 {
    padding-bottom: 40px !important;
}
.pb-45 {
    padding-bottom: 45px !important;
}
.pb-50 {
    padding-bottom: 50px !important;
}
.pb-55 {
    padding-bottom: 55px !important;
}
.pb-60 {
    padding-bottom: 60px !important;
}
.pb-65 {
    padding-bottom: 65px !important;
}
.pb-70 {
    padding-bottom: 70px !important;
}
.pb-75 {
    padding-bottom: 75px !important;
}
.pb-80 {
    padding-bottom: 80px !important;
}
.pb-85 {
    padding-bottom: 85px !important;
}
.pb-90 {
    padding-bottom: 90px !important;
}
.pb-95 {
    padding-bottom: 95px !important;
}
.pb-100 {
    padding-bottom: 100px !important;
}
.p-0 {
    padding: 0 !important;
}


/*===========Helpers Css============*/

.heading {
    margin-bottom: 50px;
}

.heading h6 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.heading h2 {
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
}

.owl-theme .owl-dot span {
    width: 20px !important;
}

.bg-gray {
    background-color: #f2f2f2;
}

.main-btn {
    display: inline-block;
    background-color: #222;
    padding: 10px 20px;
    border: 2px solid #222;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: .2s background-color ease;
    -o-transition: .2s background-color ease;
    transition: .2s background-color ease;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.main-btn:hover {
    color: #222;
    background-color: transparent;
}

.bread-crumb a {
    color: #fff;
    display: inline-block;
    margin: 0 10px;
    position: relative;
    font-size: 14px;
    text-transform: uppercase;
}

.bread-crumb a:before {
    content: "/";
    position: absolute;
    right: -15px;
}

.bread-crumb a:last-child:before {
    display: none;
}

blockquote {
    font-size: 15px;
    color: #222;
    border-left: 4px solid #222;
    padding-left: 20px;
    margin: 40px 0;
    font-weight: 500;
}


/*============ 2. Preloader  ============*/

.preloader {
    position: fixed;
    background-color: #fff;
    z-index: 9999;
    height: 100%;
    width: 100%;
    -webkit-transition: .1s all ease;
    -o-transition: .1s all ease;
    transition: .1s all ease;
    -webkit-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
}

.preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.preloader:before,
.preloader:after {
    content: "";
    position: absolute;
    height: 50%;
    width: 100%;
    background-color: #222;
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
}

.preloader:before {
    top: 0;
    left: 0;
}

.preloader:after {
    bottom: 0;
    left: 0;
}

.preloader.loaded:before,
.preloader.loaded:after {
    height: 0%;
}

.preloader .loader {
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 1;
    background-color: #fff;
    -webkit-transition: .2s all ease;
    -o-transition: .2s all ease;
    transition: .2s all ease;
    -webkit-animation: 1s infinite ease-in-out;
    animation: 1s infinite ease-in-out;
}

.preloader .loader:before,
.preloader .loader:after {
    -webkit-animation: .8s infinite ease-in-out;
    animation: .8s infinite ease-in-out;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
}

.preloader .loader:before {
    content: '';
    border: 10px solid #222;
    top: -10px;
    left: -10px;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-animation-name: anim-loader;
    animation-name: anim-loader;
}

.preloader.loaded .loader {
    opacity: 0;
}

@-webkit-keyframes anim-loader {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes anim-loader {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/*============ 3. Navbar ============*/

nav.navbar {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 999;
    padding-top: 30px;
    padding-bottom: 20px;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

nav.navbar .logo {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}

nav.navbar .navbar-toggler {
    border: 0;
}

nav.navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

nav.navbar .nav-item {
    font-size: 15px;
    font-weight: 400;
    padding-right: 13px;
    padding-left: 13px;
    color: #fff;
    text-transform: uppercase;
}

nav.navbar .nav-item:first-child {
    padding-left: 0;
}

nav.navbar .nav-item:last-child {
    padding-right: 0;
}

nav.navbar .nav-item .nav-link {
    color: #fff;
    position: relative;
    text-decoration: none;
    padding: 0;
}

nav.navbar .nav-item .nav-link:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

nav.navbar .nav-item .nav-link.active:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

nav.navbar .nav-item .nav-link.last-active:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

nav.fixed-top {
    position: fixed;
    padding-top: 3px;
    padding-bottom: 3px;
    background-color: #0000008a;
    -webkit-box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 18px 1px rgba(0, 0, 0, 0.1);
}

nav.fixed-top .logo {
    color: #000;
}

nav.fixed-top .logo:focus,
nav.fixed-top .logo:hover {
    color: #000;
}

/*nav.fixed-top .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}*/

nav.fixed-top .nav-item {
    color: #000;
}

nav.fixed-top .nav-item .nav-link {
    color: #fff !important;
}

nav.fixed-top .nav-item .nav-link:before {
    background-color: #fff;
}


/*============ 4. Banner Section============*/

.banner {
    width: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

.banner:after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*background-color: #000;*/
    z-index: 2;
    opacity: .9;
}

.banner .banner-caption {
    top: 50%;
    position: absolute;
    color: #fff;
    z-index: 11;
    width: 100%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.banner .banner-caption h1 {
    font-size: 88px;
    font-weight: 900;
    color: #fff;
}

.banner .banner-caption p {
    font-size: 24px;
    /*font-family: "Raleway", san-serif;*/
    color: #eee;
}

.cd-headline {
    font-size: 3rem;
    line-height: 1.2;
}

.cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}

.cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
}

.cd-words-wrapper b.is-visible {
    position: relative;
}

.no-js .cd-words-wrapper b {
    opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
    opacity: 1;
}


/* xclip */

.cd-headline.clip span {
    display: inline-block;
    padding: .2em 0;
}

.cd-headline.clip .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top;
}

.cd-headline.clip .cd-words-wrapper::after {
    /* line */
    content: '';
    position: absolute;
    top: 10%;
    right: 0;
    width: 2px;
    height: 70%;
    /*background-color: #aebcb9;*/
}

.cd-headline.clip b {
    opacity: 0;
}

.cd-headline b.is-visible {
    opacity: 1;
    font-weight: 700;
}

.arrow {
    position: absolute;
    bottom: 10vh;
    width: 100vw;
    z-index: 11;
    padding-left: 75px;
}

.arrow a {
    color: #fff;
}

.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

@-webkit-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}


/*===Slider Page===*/
.banner .banner-slider {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}


/*===Creative Page===*/
#home-svg {
    height: 150px;
    width: 100vw;
    position: absolute;
    bottom: 0px;
    left: 0;
    z-index: 3;
}

#home-svg .p-curve {
    fill: #fff;
}

/*===Center Banner Captions===*/

.banner-centered .banner-caption {
    text-align: center;
}

.banner-centered .arrow {
    padding-left: 0;
    text-align: center;
}

/*===Index Particles===*/

.banner #particles-js {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 15;
}


/*============ 5. About Section ============*/

section.about .about-img {
    position: relative;
}

section.about .about-img:before {
    content: "";
    background-color: #f2f2f2;
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -10%;
    left: -10%;
    z-index: 0;
}

section.about .about-img img {
    position: relative;
    width: 100%;
    z-index: 1;
    -webkit-box-shadow: 0 0 85px 0 rgba(0, 0, 0, 0.14);
    box-shadow: 0 0 85px 0 rgba(0, 0, 0, 0.14);
}

section.about .about-content .about-heading {
    margin-bottom: 20px;
}

section.about .about-content .about-heading h2 {
    font-size: 32px;
    font-weight: 600;
    text-transform: uppercase;
}

section.about .about-content .about-heading span {
    font-family: "Raleway", san-serif;
    color: #222;
    font-size: 19px;
}

section.about .about-content p {
    line-height: 28px;
}

section.about .about-content .social-icons {
    margin-top: 30px;
}

section.about .about-content .social-icons a {
    display: inline-block;
    font-size: 15px;
    line-height: 26px;
    text-align: center;
    margin-right: 10px;
    background-color: #222;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 2px solid #222;
    width: 30px;
    height: 30px;
    -webkit-transition: .2s all ease;
    -o-transition: .2s all ease;
    transition: .2s all ease;
}

section.about .about-content .social-icons a .fa {
    color: #fff;
    -webkit-transition: .2s all ease;
    -o-transition: .2s all ease;
    transition: .2s all ease;
}

section.about .about-content .social-icons a:hover {
    border: 2px solid #222;
    background: transparent;
    line-height: 26px;
}

section.about .about-content .social-icons a:hover .fa {
    color: #222;
}

section.about .about-content .about-button {
    margin-top: 40px;
}


/*============ 6. Services Section ============*/

section.services .service-item {
    text-align: center;
    margin-bottom: 50px;
}

section.services .service-item .icon {
    color: #222;
    display: inline-block;
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
    line-height: 78px;
    font-size: 30px;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
}

section.services .service-item h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
    text-transform: uppercase;
}

section.services .service-item:hover .icon {
    -webkit-box-shadow: 0 5px 30px #e3e3e3;
    box-shadow: 0 5px 30px #e3e3e3;
    border-color: #f2f2f2;
}


/*============ 7. Stats Section ============*/

.stats {
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.stats:after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    z-index: 2;
    opacity: .70;
}

.stats .single-stat {
    text-align: center;
    color: #fff;
    z-index: 10;
    position: relative;
}

.stats .single-stat .stat-icon .fa {
    font-size: 30px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 3px solid #fff;
}

.stats .single-stat h2 {
    color: #fff;
    font-weight: 800;
}

.stats .single-stat p {
    font-weight: 600;
    margin-bottom: 30px;
}


/*============ 8. Portfolio Section ============*/

section.portfolio .portfolio-filter {
    margin-bottom: 40px;
}

section.portfolio .portfolio-filter ul li {
    display: inline-block;
    font-size: 14px;
    margin-right: 20px;
    color: #222;
    position: relative;
    font-family: "Raleway", san-serif;
    cursor: pointer;
    text-transform: uppercase;
}

section.portfolio .portfolio-filter ul li:last-child {
    margin-right: 0;
}

section.portfolio .portfolio-filter ul li:last-child:before {
    visibility: hidden;
}

section.portfolio .portfolio-filter ul li:before {
    content: "/";
    position: absolute;
    right: -15px;
    font-weight: 400;
}

section.portfolio .portfolio-filter ul li.sel-item {
    font-weight: 600;
}

section.portfolio .portfolio-items .item {
    margin-bottom: 30px;
}

section.portfolio .portfolio-items .item .item-content {
    position: relative;
    overflow: hidden;
}

section.portfolio .portfolio-items .item .item-content:before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    opacity: 0;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
}

section.portfolio .portfolio-items .item .item-content:hover:before {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

section.portfolio .portfolio-items .item .item-content .item-overlay {
    position: absolute;
    width: 100%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}

section.portfolio .portfolio-items .item .item-content .item-overlay h6 {
    text-transform: uppercase;
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 0;
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

section.portfolio .portfolio-items .item .item-content .item-overlay .icons .icon {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
    opacity: 0;
}

section.portfolio .portfolio-items .item .item-content .item-overlay .icons .icon a {
    display: inline-block;
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
    height: 40px;
    width: 40px;
    margin-top: 30px;
    background-color: #fff;
    font-size: 22px;
    line-height: 40px;
    color: #222;
    -webkit-border-radius: 20%;
    border-radius: 20%;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
}

section.portfolio .portfolio-items .item .item-content:hover .item-overlay h6,
section.portfolio .portfolio-items .item .item-content:hover .item-overlay .icons .icon {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}


/*============ 9. Blogs Section ============*/

.blogs .owl-carousel .owl-stage-outer {
    padding: 15px 0;
}

.blogs .blog-item {
    -webkit-box-shadow: 0px 0px 30px -4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 30px -4px rgba(0, 0, 0, 0.1);
}

.blogs .blog-item .blog-img {
    position: relative;
    overflow: hidden;
}

.blogs .blog-item .blog-img img {
    display: block;
    width: 100%;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.blogs .blog-item .blog-img img:hover {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
}

.blogs .blog-item .blog-content {
    padding: 30px 15px 15px;
    background: #fff;
}

.blogs .blog-item .blog-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: #222;
    margin-bottom: 15px;
}

.blogs .blog-item .blog-content p {
    padding-bottom: 20px;
    border-bottom: 1px solid #f7f7f7;
    margin-bottom: 0;
}

.blogs .blog-item .blog-content .blog-meta {
    padding-top: 15px;
}

.blogs .blog-item .blog-content .blog-meta span {
    font-size: 13px;
    color: #748182;
}

.blogs .blog-item .blog-content .blog-meta .more {
    color: #222;
    border-bottom: 1px solid #aaa;
    font-weight: 600;
}

.blogs .blog-item .blog-content .blog-meta .date {
    float: right;
}

.blog-list .blog-item {
    margin-bottom: 50px;
}


/*============ 10. Testimonial Section ============*/

.testimonials {
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;
}

.testimonials:after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #000;
    z-index: 2;
    opacity: .60;
}

.testimonials .container {
    position: relative;
    z-index: 10;
}

.testimonials .testimonial-item .author-img {
    width: 120px;
    height: 120px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 15px;
}

.testimonials .testimonial-item p {
    word-spacing: 2px;
    color: #fff;
}

.testimonials .testimonial-item h5 {
    font-size: 24px;
    font-weight: 600;
    margin: 20px 0 5px;
    color: #fff;
}

.testimonials .testimonial-item span {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
    display: block;
}


/*============ 11. Contact Section ============*/

.contact .single-info {
    position: relative;
    padding: 30px;
    margin-bottom: 15px;
    background-color: #f5f5f5;
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.contact .single-info .info-icon {
    position: absolute;
    top: 25px;
    left: 30px;
    width: 50px;
    height: 50px;
    font-size: 18px;
    color: #fff;
    background-color: #222;
    text-align: center;
    line-height: 50px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.contact .single-info .info-content {
    padding-left: 70px;
}

.contact .single-info .info-content h5 {
    margin-bottom: 5px;
    text-transform: capitalize;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}

.contact .single-info .info-content p {
    margin-bottom: 0;
    font-size: 15px;
}

.contact #contact-form .form-group {
    margin-bottom: 24px;
}

.contact #contact-form .form-group .form-control {
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 0;
    border-radius: 0;
    color: #222;
    border: 0;
    border-bottom: 2px solid #222;
    height: 3em;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}

.contact #contact-form .form-group textarea.form-control {
    height: auto;
    resize: none;
}

.contact #contact-form .form-group .con-error {
    border-color: red;
}

.contact #contact-form .form-control:hover,
.contact #contact-form .form-control:active,
.contact #contact-form .form-control:focus {
    -webkit-box-shadow: none;
    -moz-webkit-box-shadow: none;
    box-shadow: none;
    border-color: #222;
}


/*============ 12. Footer  ============*/

footer {
    background: #222;
}

footer .contact-info h5 {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

footer .contact-info p {
    color: #fff;
    font-size: 14px;
}

footer hr {
    border-color: #333;
}

footer .copy {
    font-size: 14px;
    color: #aaa;
}


/*============ 13. Blogs Page ============*/

section.banner-blog {
    height: 50vh;
    background-color: #222;
    position: relative;
    overflow: hidden;
}

section.banner-blog #particles-js {
    width: 100%;
    height: 100%;
}

section.banner-blog .banner-caption {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

section.banner-blog .banner-caption h1 {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
}


/*============ 14. Single Blog Page ============*/

.blog-detail .blog-heading {
    margin-bottom: 30px;
}

.blog-detail .blog-heading h2 {
    font-size: 32px;
    font-weight: 700;
    margin: 25px 0 10px 0;
}

.blog-detail .blog-heading .blog-meta span {
    font-size: 14px;
}

.blog-detail .blog-content {
    margin-bottom: 90px;
}

.blog-detail .blog-content p {
    line-height: 28px;
}

.blog-detail .comment-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.blog-detail ul.post-comment {
    float: left;
}

.blog-detail ul.post-comment li {
    width: 100%;
    float: left;
    border-bottom: 1px solid #efefef;
    padding: 15px 0;
    list-style: none;
}

.blog-detail ul.post-comment li img {
    width: 15%;
    float: left;
}

.blog-detail ul.post-comment li .comment-info {
    float: left;
    width: 85%;
    padding-left: 15px;
    margin-top: 10px;
}

.blog-detail ul.post-comment li .comment-info h3 {
    float: left;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 0;
}

.blog-detail ul.post-comment li .comment-info a {
    float: right;
    font-size: 13px;
    font-weight: 800;
    color: #222;
}

.blog-detail ul.post-comment li .comment-info span {
    float: left;
    width: 100%;
    font-size: 13px;
}

.blog-detail ul.post-comment li .comment-info p {
    font-size: 14px;
    line-height: 1.2;
    float: left;
    margin-top: 6px;
}

.blog-detail .contact-form {
    padding-top: 60px;
    clear: both;
}

.blog-detail .contact-form .form-inpt {
    width: 100%;
    height: 45px;
    border: 0;
    color: #222;
    border-bottom: 2px solid #222;
    font-size: 14px;
    padding-left: 10px;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.blog-detail .contact-form textarea {
    width: 100%;
    border: 0;
    font-size: 14px;
    border-bottom: 2px solid #222;
    padding: 20px 0 0 10px;
    margin-bottom: 15px;
    height: 150px;
}


/*============ 15. Mobile Responsive  ============*/

@media screen and (max-width: 991px) {
    .navbar-collapse {
        text-align: center;
        background-color: rgba(34, 34, 34, 0.9);
    }
    .navbar-collapse .nav-item {
        padding: 0 !important;
    }
    .navbar-collapse .nav-item a {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .fixed-top .navbar-collapse {
        background-color: transparent;
    }
    .banner .banner-caption h1 {
        font-size: 75px;
    }
    .banner .banner-caption p {
        font-size: 21px;
    }
    section.about .about-img:before {
        display: none;
    }
    section.about .about-content {
        margin-top: 50px;
    }
    section.banner-blog .banner-caption h1 {
        font-size: 40px;
    }
}

@media screen and (max-width: 767px) {
    .banner .banner-caption h1 {
        font-size: 46px;
    }
    .banner .banner-caption p {
        font-size: 17px;
    }
    .banner #home-svg {
        height: 80px;
    }
    section.banner-blog .banner-caption h1 {
        font-size: 32px;
    }
}

@media (max-width:1024px){
  section h2{font-size:36px !important;}
  section p{font-size:16px !important;}
}
@media (max-width:768px){
  section{padding:60px 15px !important;}
  section h2{font-size:30px !important;}
  section p{font-size:15px !important;}
}
@media (max-width:480px){
  section{padding:50px 10px !important;}
  section h2{font-size:26px !important;}
  section p{font-size:16px !important;}
}

@media (max-width:992px){
  section div[style*="flex:1 1 50%"]{flex:1 1 100% !important;}
  section h3{font-size:20px !important;}
}
@media (max-width:576px){
  section div[style*="padding:40px"]{padding:20px !important;}
  section h3{font-size:18px !important;}
  section a{font-size:14px !important;}
}

.quick-takes {
  background: #fafafa;
  padding: 80px 13%;
  font-family: "Poppins", sans-serif;
}

.quick-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  /*margin-bottom: 40px;*/
  gap: 20px;
}

.quick-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  color: #ab7532;
  flex: 1 1 200px;
}

.quick-sub {
  flex: 2 1 400px;
  text-align: right;
}

.quick-sub p {
  color: #444;
  font-size: 16px;
  line-height: 1.6;
}

.view-all {
  display: inline-block;
  margin-top: 10px;
  color: #ab7532;
  text-decoration: none;
  font-weight: 600;
}

.view-all i {
  margin-left: 5px;
}

/* Card Grid */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

/* Each Card */
.quick-card {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  transition: all 0.4s ease;
  border: 1px solid #e0e0e0;
}

.quick-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* 🔥 Black overlay effect */
.quick-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 50%);
  opacity: 0.8;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.quick-card:hover::before {
  opacity: 0.6;
}

.quick-card:hover img {
  transform: scale(1.05);
}

.card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px;
  color: #fff;
  width: 100%;
  z-index: 2;
}

.card-date {
  font-size: 13px;
  color: #ddd;
}

.card-content h3 {
  font-size: 18px;
  margin: 5px 0 10px;
  font-weight: 600;
}

.play-btn {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 5px 10px;
  border: 2px solid #222;
  background-color: #263866;
}

.play-btn i {
  margin-left: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .quick-header {
    /*flex-direction: column;
    text-align: center;*/
  }

  .quick-sub {
    text-align: center;
  }

  .quick-header h2 {
    font-size: 2rem;
  }
}


/* --- Base Styling: Containers and Headings --- */
.creative-edu-section {
    padding: 25px 0; /* More generous padding */
    max-width: 1400px; /* Wider section for creative layout */
    margin: 0 auto;
    overflow: hidden; /* Important for containing shifted cards */
    position: relative;
    perspective: 1500px; /* Establishes a 3D perspective for child elements */
}

.creative-header {
    margin-bottom: 50px;
    padding: 0 25px; /* Adjust padding for text */
    text-align: center; /* Center the header text */
}

.creative-heading {
    font-family: 'the seasonal', 'Georgia', serif;
    font-size: 58px; /* Larger, more impactful heading */
    font-weight: 500;
    color: #b32626;
    margin-bottom: 15px;
    line-height: 1.1;
}

.creative-description {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    color: #444; /* Slightly softer black */
    font-weight: 400;
    margin: 0 auto;
    max-width: 800px; /* Control description width */
}

/* --- Creative Card Layout (Stack and Stagger) --- */
.creative-card-stack {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    /*justify-content: center;*/
    gap: 30px; /* Space between cards */
    padding: 0 20px; /* Inner padding */
}

.creative-card {
    position: relative;
    width: 280px; /* Fixed width for card base */
    height: 400px; /* Fixed height for card base */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); /* Deeper shadow */
    transition: transform 0.5s ease-out, box-shadow 0.3s ease;
    transform-style: preserve-3d; /* Critical for 3D rotation */
    cursor: pointer;
    background-color: #fff; /* Fallback for transparency */
}

/* Staggering effect on larger screens */
@media (min-width: 1024px) {
    .creative-card-1 { transform: rotateY(-5deg) translateY(-15px) translateX(-20px) translateZ(0px); z-index: 4; }
    .creative-card-2 { transform: rotateY(5deg) translateY(10px) translateX(0px) translateZ(50px); z-index: 3; }
    .creative-card-3 { transform: rotateY(-3deg) translateY(-5px) translateX(20px) translateZ(0px); z-index: 2; }
    .creative-card-4 { transform: rotateY(8deg) translateY(25px) translateX(-10px) translateZ(-50px); z-index: 1; }

    .creative-card:hover {
        transform: rotateY(0deg) translateY(-30px) scale(1.05) translateZ(100px) !important; /* Bring to front, larger, no rotation */
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        z-index: 10; /* Ensure hovered card is on top */
    }
}


/* Image Styling */
.creative-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: brightness(0.9); /* Slightly desaturate */
}

.creative-card:hover img {
    transform: scale(1.03); /* Gentle zoom */
    filter: brightness(0.6); /* Darken image more */
}

/* --- Content Overlay Styling --- */
.creative-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px; /* More padding */
    z-index: 2;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 100%);
    transform: translateY(100%); /* Start completely hidden */
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); /* Smoother, elastic transition */
}

.creative-card:hover .creative-card-content {
    transform: translateY(0%); /* Slide up to fully visible */
}

.creative-card-date {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 8px;
    font-weight: 300;
    opacity: 0; /* Initially hidden */
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s; /* Delayed appearance */
}

.creative-card:hover .creative-card-date {
    opacity: 1;
    transform: translateY(0);
}

.creative-card-title {
    font-size: 22px; /* Larger title */
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 15px 0;
    color: #fff;
    opacity: 0; /* Initially hidden */
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.4s, transform 0.3s ease 0.4s; /* Further delayed */
}

.creative-card:hover .creative-card-title {
    opacity: 1;
    transform: translateY(0);
}

/* --- Button Styling --- */
.creative-explore-btn {
    display: inline-flex; /* Use flex for icon alignment */
    align-items: center;
    color: #b32626; /* Highlight color for button */
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    padding: 8px 15px;
    border: 1px solid #b32626;
    border-radius: 5px;
    transition: all 0.3s ease;
    opacity: 0; /* Initially hidden */
    transform: translateY(10px);
    transition: opacity 0.3s ease 0.5s, transform 0.3s ease 0.5s, background-color 0.3s, color 0.3s; /* Even further delayed */
}

.creative-card:hover .creative-explore-btn {
    opacity: 1;
    transform: translateY(0);
}

.creative-explore-btn:hover {
    background-color: #b32626;
    color: #fff;
}

.creative-explore-btn i {
    margin-left: 8px;
    font-size: 15px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1023px) {
    .creative-heading {
        font-size: 48px;
    }
    .creative-description {
        font-size: 18px;
    }
    .creative-card {
        width: 320px; /* Slightly larger on tablets if only two columns */
        height: 450px;
    }
    /* Disable staggering and tilt on smaller screens for better readability */
    .creative-card-stack {
        flex-direction: column; /* Stack vertically */
        align-items: center;
    }
    .creative-card {
        transform: none !important; /* Remove any previous transforms */
        margin-bottom: 20px; /* Space them out */
    }
    .creative-card:hover {
        transform: translateY(-10px) scale(1.02) !important; /* Simpler hover */
        box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
    }
    .creative-card-content {
        transform: translateY(0%); /* Always show content on smaller screens */
        background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 100%);
    }
    .creative-card-date, .creative-card-title, .creative-explore-btn {
        opacity: 1; /* Always visible */
        transform: translateY(0);
        transition: none; /* No delayed transitions */
    }
}

@media (max-width: 767px) {
    .creative-heading {
        font-size: 38px;
    }
    .creative-description {
        font-size: 16px;
    }
    .creative-card {
        width: 90%; /* Fluid width on very small screens */
        height: 380px;
    }
}

/* --- Base Section Styling (The Hero Banner) --- */
.impact-hero-section {
    /* Set a minimum height for the section to ensure the image is visible */
    min-height: 500px; 
    width: 100%;
    position: relative;
    
    /* Background Image Setup */
    background-image: url('https://i.ytimg.com/vi/CcWBZXNbl4Y/maxresdefault.jpg'); /* IMPORTANT: Update this path */
    background-size: cover; /* Ensures the image covers the whole section */
    background-position: center center;
    background-repeat: no-repeat;
    
    /* Parallax or Fixed effect (Optional - adds a premium feel) */
    background-attachment: fixed; /* Keeps the background fixed while content scrolls */
}

/* --- Dark Overlay for Text Readability --- */
.impact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Gradient or solid dark background (matching the image) */
    /* Using a linear gradient provides a smooth transition from dark to light/original image */
    background: linear-gradient(to right, rgba(40, 30, 30, 0.7) 0%, rgba(40, 30, 30, 0.5) 40%, rgba(40, 30, 30, 52%) 70%);
    
    /* Flexbox for centering/positioning the text content */
    display: flex;
    align-items: center; /* Vertically center the content box */
    padding-left: 10%; /* Ensure content is pushed inward from the left edge */
}

/* --- Text Content Styling --- */
.impact-content-box {
    color: #fff;
    max-width: 100%; /* Limit the width of the text for better line length/readability */
    text-align: left;
}

.impact-heading {
    /* Font family placeholder - use your custom font if available, or a good sans-serif fallback */
    font-family: 'Georgia', serif; 
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 15px;
    line-height: 1.2;
    color: #fff;
}

.impact-subtext {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.85); /* Slightly muted white for contrast */
}

/* --- Call to Action (CTA) Link Styling --- */
.impact-cta-link {
    display: inline-flex; /* Align text and icon */
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 2px solid #fff; /* Underline effect from the image */
    padding-bottom: 5px;
    transition: all 0.3s ease;
}

.impact-cta-link:hover {
    color: #f1f1f1;
    border-color: #f1f1f1;
}

.cta-icon {
    font-size: 12px;
    margin-left: 8px;
    /* Optional: Add a smooth rotation on hover */
    transition: transform 0.3s ease;
}

.impact-cta-link:hover .cta-icon {
    transform: rotate(90deg);
}


/* --- Responsive Adjustments (Ensuring mobile friendly) --- */
@media (max-width: 992px) {
    .impact-hero-section {
        min-height: 400px; /* Shorter height on tablets */
    }
    
    .impact-overlay {
        padding-left: 5%; /* Less extreme padding on smaller screens */
        background: linear-gradient(to right, rgba(40, 30, 30, 0.8) 0%, rgba(40, 30, 30, 0.6) 50%, rgba(40, 30, 30, 0) 90%);
    }

    .impact-heading {
        font-size: 42px;
    }
    
    .impact-subtext {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .impact-hero-section {
        min-height: 350px; /* Even shorter on mobile */
        background-attachment: scroll; /* Disable fixed background on mobile for performance */
    }
    
    .impact-overlay {
        /* On small screens, center the text and use a darker overlay for full visibility */
        justify-content: center; 
        padding-left: 0;
        background: rgba(40, 30, 30, 0.7); /* Solid, darker overlay across the whole image */
    }
    
    .impact-content-box {
        text-align: center;
        padding: 0 20px;
    }

    .impact-heading {
        font-size: 32px;
    }
    
    .impact-subtext {
        font-size: 15px;
    }
}

/* Fullscreen Slider */
.hero-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* Slides */
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.8s ease-in-out, transform 2s ease-in-out;
}

.slide.active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* Overlay */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

/* Slide Content */
.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 3;
  width: 90%;
  max-width: 800px;
}

.slide-content h1 {
  font-size: 54px;
  font-weight: 600;
  margin-bottom: 10px;
}

.slide-content p {
  font-size: 18px;
  margin-bottom: 20px;
}

.highlight {
  color: #fff;
  /*background-color: #2436649e; padding: 10px 10px;  border-radius: 10px;*/
}

.btn {
  display: inline-block;
  padding: 10px 26px;
  border: 2px solid #fff;
  color: #fff;
  border-radius: 50px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn:hover {
  background: #b32626;
  border-color: #b32626;
}

/* Navigation Buttons */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 28px;
  padding: 5px 20px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: background 0.3s ease;
}

.nav-btn:hover {
  background: rgba(179, 38, 38, 0.8);
}

.nav-btn.prev {
  left: 20px;
}

.nav-btn.next {
  right: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .slide-content h1 {
    font-size: 32px;
  }

  .slide-content p {
    font-size: 16px;
  }

  .nav-btn {
    font-size: 22px;
    padding: 8px 12px;
  }
}

.main-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide-box {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide-box.show {
  opacity: 1;
  z-index: 1;
}

.slide-layer {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

.slide-info {
 position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 3;
    width: 90%;
    max-width: 800px;
}

.slide-info h1 {
  font-size: 52px;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 600;
}

.main-color {
  color: #fff;
  /*background-color: #2436649e; padding: 10px 10px;  border-radius: 10px;*/
}

.slide-info p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 25px;
}

.slide-btn {
  display: inline-block;
  background: #b32626;
  color: #fff;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  z-index: 3;
  position: relative;
}

.slide-btn:hover {
  background: #8e1d1d;
}

/* Navigation buttons */
.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  color: #b32626;
  font-size: 26px;
  border: none;
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
  z-index: 5;
  box-shadow: 0 3px 6px rgba(0,0,0,0.3);
}

.slide-nav:hover {
  background: #b32626;
  color: white;
}

.prev-slide {
  left: 25px;
}

.next-slide {
  right: 25px;
}

/* Responsive */
@media (max-width: 768px) {
  .slide-info h1 {
    font-size: 34px;
  }

  .slide-info p {
    font-size: 16px;
  }

  .slide-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .slide-nav {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
}


.hero2-slider {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.hero2-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.hero2-slide.active {
  opacity: 1;
  z-index: 1;
}

.hero2-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.hero2-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
  max-width: 850px;
  padding: 20px;
  z-index: 2;
}

.hero2-content h1 {
  font-size: 52px;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 600;
}

.hero2-highlight {
  color: #fff;
  /*background-color: #2436649e; padding: 10px 10px;  border-radius: 10px;*/
}

.hero2-content p {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 25px;
}

.hero2-btn {
  display: inline-block;
  background: #b32626;
  color: #fff;
  padding: 12px 28px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  z-index: 3;
  position: relative;
}

.hero2-btn:hover {
  background: #8e1d1d;
}

/* Navigation Buttons */
.hero2-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.85);
  color: #b32626;
  font-size: 26px;
  border: none;
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease;
  z-index: 5;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.hero2-nav:hover {
  background: #b32626;
  color: white;
}

.prev-hero2 {
  left: 25px;
}

.next-hero2 {
  right: 25px;
}

/* Responsive */
@media (max-width: 768px) {
  .hero2-content h1 {
    font-size: 34px;
  }

  .hero2-content p {
    font-size: 16px;
  }

  .hero2-btn {
    padding: 10px 20px;
    font-size: 14px;
  }

  .hero2-nav {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
}

/* Footer Base */
.modern-footer {
  background: radial-gradient(circle at top left, #001a27 0%, #004769 100%);
  color: #fff;
  font-family: 'Poppins', sans-serif;
  padding: 50px 0 20px;
  position: relative;
  overflow: hidden;
}

/* Container */
.footer-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 60px;
}

/* Top Section */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 30px;
  gap: 20px;
}

.footer-brand {
  max-width: 500px;
}

.footer-logo {
  width: 100px;
  /*margin-bottom: 10px;*/
}

.footer-brand p {
  font-size: 15px;
  color: #f3f3f3;
  line-height: 1.6;
}

/* Social Icons */
.footer-social a {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  font-size: 16px;
  transition: all 0.3s ease;
}

.footer-social a:hover {
  background: #fff;
  color: #b32626;
  transform: translateY(-3px);
}

/* Grid Layout */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  /*margin-top: 30px;*/
}

.footer-column h4 {
  font-size: 18px;
  margin-bottom: 18px;
  position: relative;
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column ul li {
  margin-bottom: 10px;
}

.footer-column ul li a {
  text-decoration: none;
  color: #ddd;
  transition: color 0.3s ease;
  font-size: 15px;
}

.footer-column ul li a:hover {
  color: #fff;
}

/* Newsletter */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-form input {
  padding: 10px 14px;
  border-radius: 25px;
  border: none;
  outline: none;
  font-size: 14px;
  color: #333;
}

.newsletter-form button {
  background: #fff;
  color: #b32626;
  border: none;
  border-radius: 25px;
  padding: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  background: #000;
  color: #fff;
  transform: scale(1.05);
}

/* Footer Bottom */
.footer-bottom {
  text-align: center;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 25px;
  color: #f2f2f2;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    text-align: center;
  }

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

  .footer-grid {
    text-align: center;
  }

  .newsletter-form {
    align-items: center;
  }

  .newsletter-form input {
    width: 80%;
  }
}

/*.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  padding: 50px 20px;
  background: linear-gradient(180deg, #1d263b 0%, #111827 100%);
  color: #fff;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
}*/

.footer-column h4 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
  position: relative;
}

.footer-column h4::after {
  content: "";
  width: 40px;
  height: 2px;
  background: #cbac5c;
  display: block;
  margin-top: 6px;
  border-radius: 5px;
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li {
  margin-bottom: 12px;
}

.footer-list li a {
  color: #ccc;
  font-size: 15px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.footer-list li a i {
  color: #fff;
  font-size: 16px;
  transition: 0.3s;
}

.footer-list li a:hover {
  color: #fff;
  transform: translateX(5px);
}

.footer-list li a:hover i {
  color: #fff;
}

/* Newsletter Styling */
.newsletter-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-form input {
  padding: 10px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}

.newsletter-form input::placeholder {
  color: #aaa;
}

.newsletter-form button {
  padding: 10px;
  border: none;
  background: #9d0505;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.newsletter-form button:hover {
  background: #263a6d;
}

/* Responsive Layout */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    /*padding: 40px 15px;*/
  }

  .footer-column h4 {
    font-size: 16px;
  }

  .footer-list li a {
    font-size: 14px;
    gap: 8px;
  }
}

/* General Body & Typography */
.sections-container {
    padding: 0px 0;
    display: flex;
    flex-direction: column; /* Stack sections vertically */
    align-items: center; /* Center cards horizontally */
}

/* Individual Content Sections */
.content-section {
    width: 100%; /* Take full width of parent */
    display: flex;
    justify-content: center; /* Center the card inside */
    align-items: center;
    min-height: 70vh; /* Make each section fill the viewport height */
    position: relative;
    overflow: hidden; /* Ensure content doesn't spill */
    padding: 20px; /* Padding around the card */
    box-sizing: border-box; /* Include padding in element's total width and height */

    /* Animation properties */
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, background-color 0.8s ease-in-out;
}

.content-section.active {
    opacity: 1;
    transform: translateY(0);
}

/* Card Styling */
.card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 60px 40px;
    max-width: 900px; /* Max width for the card */
    width: 100%; /* Occupy full width within its flex container */
    position: relative;
    z-index: 2; /* Ensure card is above any pseudo-elements */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 300px; /* Minimum height for cards */
}

.card-tag {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 4em;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.05); /* Very light, almost transparent text */
    pointer-events: none; /* Make sure it doesn't interfere with interactions */
    line-height: 1;
}

.card-title {
    color: #d12229; /* Primary red color */
    font-size: 2.8em;
    margin-bottom: 25px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.card p {
    font-size: 1.1em;
    margin-bottom: 15px;
    max-width: 700px; /* Limit paragraph width for readability */
}

.card ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 20px;
}

.card ul li {
    font-size: 1.1em;
    margin-bottom: 10px;
    padding-left: 25px;
    position: relative;
}

.card ul li::before {
    content: '✓'; /* Checkmark icon */
    color: #d12229;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* Background Colors for Sections */
#our-vision { background-color: #e6f2ff; /* Light blue */ }
#our-mission { background-color: #fff0e6; /* Light orange/peach */ }
#our-journey { background-color: #f0fff0; /* Light green */ }
#our-values { background-color: #ffe6e6; /* Light pink/red */ }


/* Responsive Design */
@media (max-width: 1200px) {
    .card {
        max-width: 800px;
        padding: 50px 35px;
    }
    .card-title {
        font-size: 2.5em;
    }
    .card-tag {
        font-size: 3.5em;
        top: 25px;
        right: 35px;
    }
}

@media (max-width: 992px) {
    .content-section {
        min-height: 80vh; /* Adjust for shorter viewports on tablets */
    }
    .card {
        max-width: 700px;
        padding: 40px 30px;
        min-height: 350px;
    }
    .card-title {
        font-size: 2.2em;
    }
    .card p, .card ul li {
        font-size: 1em;
    }
    .card-tag {
        font-size: 3em;
        top: 20px;
        right: 30px;
    }
}

@media (max-width: 768px) {
    .content-section {
        min-height: 70vh; /* Further adjust for mobile */
        padding: 15px;
    }
    .card {
        border-radius: 8px;
        padding: 30px 20px;
        min-height: auto; /* Let content dictate height on smaller screens */
    }
    .card-title {
        font-size: 1.8em;
        margin-bottom: 15px;
    }
    .card p, .card ul li {
        font-size: 0.95em;
    }
    .card-tag {
        font-size: 2.5em;
        top: 15px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .sections-container {
        padding: 20px 0;
    }
    .content-section {
        min-height: 60vh; /* Adjust for very small screens */
        padding: 10px;
    }
    .card {
        padding: 25px 15px;
    }
    .card-title {
        font-size: 1.5em;
    }
    .card p, .card ul li {
        font-size: 0.9em;
    }
    .card-tag {
        font-size: 2em;
        top: 10px;
        right: 15px;
    }
}

/* Responsive Styling */
@media (max-width: 768px) {
  #breadcrumb-banner {
    height: 200px;
    padding: 20px;
  }

  #breadcrumb-banner h2 {
    font-size: 24px;
  }

  #breadcrumb-banner nav {
    font-size: 14px;
  }
}

/* --- Base Section Styling --- */
.about-story-section {
    padding: 80px 40px;
    max-width: 1400px;
    margin: 0 auto;
    background-color: #fff; /* Assuming a white background */
}

.story-container {
    display: flex;
    /*gap: 40px; /* Space between the heading column and the content column */*/
}

/* --- Left Column: Heading and Decoration --- */
.story-heading-col {
    flex: 0 0 300px; /* Fixed width for the heading column on large screens */
    position: relative;
    padding-top: 30px; /* Align text with content */
}

.story-sub-title {
    font-size: 16px;
    color: #b32626; /* Your common red color, used for the 'About Us' text */
    font-weight: 500;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
}

.story-sub-title .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #b32626;
    border-radius: 50%;
    margin-right: 8px;
}

.story-main-title {
    font-family: 'Georgia', serif; /* Use a classic font for impact */
    font-size: 48px;
    font-weight: 700;
    color: #2c3e50; /* Dark, strong color for the main title */
    margin: 0 0 30px 0;
}

/* Decorative Dashed Line */
.story-decorator {
    position: absolute;
    width: 100px; /* Adjust size */
    height: 200px; /* Adjust size */
    bottom: -150px; /* Position it below the title */
    left: 50px;
    border: 2px dashed #e0e0e0; /* Light, dashed border */
    border-radius: 50% 10% 50% 50% / 50% 50% 50% 50%; /* Creates the irregular, flowing shape */
    transform: rotate(15deg); /* Tilt it slightly for the flowing effect */
    z-index: 1;
}


/* --- Right Column: Content --- */
.story-content-col {
    flex-grow: 1; /* Takes up the remaining space */
    max-width: 800px; /* Limits the content width */
    padding-top: 30px; /* Align text with the heading's padding */
    color: #555;
    line-height: 1.7;
}

.story-content-col p {
    margin-bottom: 20px;
    font-size: 17px;
}

.story-content-col p b {
    font-weight: 600; /* Bold text for company/brand names */
}

/* --- Contact Button Styling --- */
.contact-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    border: 1px solid #ccc;
    color: #2c3e50;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.contact-btn:hover {
    border-color: #b32626;
    color: #b32626;
}

.contact-btn i {
    margin-left: 8px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .story-container {
        flex-direction: column; /* Stack columns vertically on tablets */
    }
    
    .story-heading-col {
        flex: auto;
        width: 100%;
        padding-top: 0;
        /*margin-bottom: 30px;*/
    }
    
    .story-main-title {
        font-size: 42px;
    }
    
    .story-content-col {
        padding-top: 0;
    }

    /* Hide the complex decorator on smaller screens for simplicity/readability */
    .story-decorator {
        display: none;
    }
}

@media (max-width: 600px) {
    .about-story-section {
        padding: 40px 20px;
    }
    
    .story-main-title {
        font-size: 34px;
    }
}