/*
Table of content

1. Default css
2. Preloader css
3. Navbar css
4. Banner area css
5. About area css
6. Services area css
7why choose us
7. career starts css
8. Blog area css
9. Team
10. Contact area css
11. Footer area css

*/
    /*--- 1. Default CSS Starts ---*/
    
    a:focus,
    a:active,
    a:link {
        outline: none;
        text-decoration: none;
    }
    
    a {
        cursor: pointer;
        text-decoration: none;
        color: #d81515;
        transition: all 0.25s ease 0s;
        -moz-transition: all 0.25s ease 0s;
        -webkit-transition: all 0.25s ease 0s;
        -o-transition: all 0.25s ease 0s;
    }
    
    a:hover {
        color: #60ff68;
        text-decoration: none;
        transition: all 0.25s ease 0s;
        -moz-transition: all 0.25s ease 0s;
        -webkit-transition: all 0.25s ease 0s;
        -o-transition: all 0.25s ease 0s;
    }
    
    a:focus {
        outline: none;
        outline-offset: 0;
    }
    
    a:link,
    a:visited {
        text-decoration: none;
    }
    
    p {
        line-height: 26px;
        font-size: 14px;
        font-weight: 400;
        position: relative;
        /* for paragraph */
    }
    /* img {
        height: auto;
        max-width: 100%;
        border: none;
        outline: none;
        transition: all 0.2s ease 0s;
        -moz-transition: all 0.2s ease 0s;
        -webkit-transition: all 0.2s ease 0s;
        -o-transition: all 0.2s ease 0s;
    } */
    /* Ensure all lists (from CKEditor) display correctly */
    
    h1,
    h3,
    h4,
    h6 {
        font-weight: 550;
        margin-top: 0;
        margin-bottom: 10px;
        color: black;
    }
    
    h2 {
        font-weight: 550;
        margin-top: 0;
        margin-bottom: 10px;
        color: white;
        text-transform: none;
    }
    
    h5 {
        font-weight: 700;
        margin-top: 0;
        margin-bottom: 10px;
        color: goldenrod;
        text-transform: uppercase;
    }
    
    .section-padding {
        padding: 90px 0;
    }
    
    .bg-overlay {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
    }
    
    .bg-overlay.black {
        position: absolute;
        background: royalblue;
    }
    /* section for icon */
    
    .section-header {
        margin-bottom: 100px;
        text-align: center;
        position: relative;
        /* ensures ::before and ::after are positioned correctly */
    }
    
    .section-header h2 {
        font-size: 27px;
        line-height: 37px;
        margin-bottom: 20px;
        padding-top: 10px;
        font-weight: 600;
        color: #333333;
        position: relative;
        /* required for pseudo-elements */
        display: inline-block;
        /* keeps decoration centered with text */
    }
    
    .section-header h2::before {
        position: absolute;
        content: "";
        height: 2px;
        width: 80px;
        left: 50%;
        bottom: -15px;
        /* place relative to text instead of fixed top */
        transform: translateX(-50%);
        background: #b89d05;
    }
    
    .section-header h2::after {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 50%;
        bottom: -22px;
        /* keeps diamond below the line */
        transform: translateX(-50%) rotate(45deg);
        background: royalblue;
    }
    /* Responsive adjustments */
    
    @media (max-width: 768px) {
        .section-header h2 {
            font-size: 22px;
            line-height: 30px;
        }
        .section-header h2::before {
            width: 60px;
        }
    }
    
    @media (max-width: 480px) {
        .section-header h2 {
            font-size: 18px;
            line-height: 26px;
        }
        .section-header h2::before {
            width: 40px;
        }
        .section-header h2::after {
            height: 10px;
            width: 10px;
            bottom: -18px;
        }
    }
    /*--- 1. Default CSS Ends ---*/
    /*-------------- 2. Preloader css starts ---------------*/
    
    .loader_bg {
        position: fixed;
        z-index: 9999999;
        background: #fff;
        width: 100%;
        height: 100%;
    }
    
    .loader {
        border: 0 solid transparent;
        border-radius: 50%;
        width: 150px;
        height: 150px;
        position: absolute;
        top: calc(50vh - 75px);
        left: calc(50vw - 75px);
    }
    
    .loader:before,
    .loader:after {
        content: '';
        border: 1em solid royalblue;
        border-radius: 50%;
        width: inherit;
        height: inherit;
        position: absolute;
        top: 0;
        left: 0;
        animation: loader 2s linear infinite;
        opacity: 0;
    }
    
    .loader:before {
        animation-delay: .5s;
    }
    
    @keyframes loader {
        0% {
            transform: scale(0);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: scale(1);
            opacity: 0;
        }
    }
    /*---------- preloader css ends -------------*/
    /* Topbar Styling */
    /* slide section */
    /* ======================  Slider Wrapper===================== */
    
    .slider-wrapper {
        position: relative;
        width: 100%;
        height: 100vh;
        max-height: 600px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 0;
    }
    /* ====================== Navigation Arrows==================== */
    
    .nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2rem;
        color: #fff;
        background: rgba(0, 0, 0, 0.4);
        padding: 10px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 10;
        transition: 0.3s;
        user-select: none;
    }
    
    .nav-arrow:hover {
        background: rgba(0, 0, 0, 0.7);
    }
    
    .nav-arrow.left {
        left: 20px;
    }
    
    .nav-arrow.right {
        right: 20px;
    }
    /* =====================Slides==================== */
    /* ===================== Page Slide ===================== */
    
    .page-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        opacity: 0;
        transition: left 0.6s ease-in-out, opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
        font-family: 'Poppins', sans-serif;
        color: #fff;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* Active slide with smooth zoom */
    
    .page-slide.active {
        left: 0;
        opacity: 1;
        z-index: 1;
        transform: scale(1);
    }
    /* Title */
    
    .page-slide h2 {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 15px;
        color: rgb(178, 138, 39);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
    /* Paragraph */
    
    .page-slide p {
        font-size: 1rem;
        line-height: 1.6;
        max-width: 700px;
        margin: 20px 0;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        color: #fff;
    }
    /* Buttons/Links */
    
    .page-slide a {
        display: inline-block;
        margin-top: 20px;
        padding: 12px 24px;
        background: #ffcc00;
        color: #000;
        text-decoration: none;
        border-radius: 30px;
        font-weight: bold;
        transition: 0.3s ease;
    }
    
    .page-slide a:hover {
        background: #ffaa00;
        transform: scale(1.05);
    }
    /* ===================== Background Images ====================== */
    
    .cyber-security {
        background: url('../img/a1.jpg') no-repeat center center/cover;
    }
    
    .data-protection {
        background: url('../img/data-protection1.webp') no-repeat center center/cover;
    }
    
    .data-science {
        background: url('../img/a7.jpg') no-repeat center center/cover;
    }
    
    .it-services {
        background: url('../img/a5.jpg') no-repeat center center/cover;
    }
    
    .digital-consulting {
        background: url('../img/a4.jpg') no-repeat center center/cover;
    }
    
    .blog-update {
        background: url('../img/a5.jpg') no-repeat center center/cover;
    }
    /* Overlay only for hero section */
    
    .cyber-security::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 0;
    }
    
    .hero-content {
        position: relative;
        z-index: 1;
        max-width: 700px;
        text-align: center;
    }
    /* ====================== Typing Effect ====================== */
    
    .typing {
        overflow: hidden;
        border-right: 3px solid #ffcc00;
        white-space: nowrap;
        width: 0;
        animation: typing 4s steps(60, end) forwards, blink 0.75s step-end infinite;
    }
    
    @keyframes typing {
        from {
            width: 0;
        }
        to {
            width: 100%;
        }
    }
    
    @keyframes blink {
        from,
        to {
            border-color: transparent;
        }
        50% {
            border-color: #ffcc00;
        }
    }
    /* ====================== Responsive ====================== */
    
    @media (max-width: 1024px) {
        .page-slide h2 {
            font-size: clamp(4rem, 3vw, 2.5rem);
        }
        .page-slide p {
            font-size: clamp(1.5rem, 1.8vw, 1.2rem);
            padding: 0 15px;
        }
    }
    
    @media (max-width: 768px) {
        .nav-arrow {
            font-size: 1.5rem;
            padding: 8px;
        }
        .page-slide h2 {
            font-size: 1.3rem;
        }
        .page-slide p {
            font-size: 0.71rem;
        }
    }
    
    @media (max-width: 480px) {
        .page-slide {
            padding: 10px;
        }
        .page-slide h2 {
            font-size: 1.3rem;
        }
        .page-slide p {
            font-size: 0.9rem;
            line-height: 1.4;
        }
        .page-slide a {
            padding: 10px 18px;
            font-size: 2rem;
        }
    }
    /*--- 4. Banner area css starts ---*/
    /*--- 5. About area css starts ---*/
    
    .about-area {
        background: whitesmoke;
        color: #ffffff;
    }
    
    .about-area img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        display: block;
        margin: 0 auto;
    }
    
    .about-left h2 {
        font-size: 27px;
        line-height: 37px;
        margin-bottom: 20px;
        padding-top: 10px;
        font-weight: 600;
        color: #333333;
        position: relative;
        /* required for pseudo-elements */
        display: inline-block;
        /* keeps decoration centered with text */
    }
    
    .about-left h2::before {
        position: absolute;
        content: "";
        height: 2px;
        width: 150px;
        left: 50%;
        bottom: -15px;
        /* place relative to text instead of fixed top */
        transform: translateX(-50%);
        background: rgb(184, 157, 5);
    }
    
    .about-left h2::after {
        position: absolute;
        content: "";
        height: 15px;
        width: 15px;
        left: 50%;
        bottom: -22px;
        /* keeps diamond below the line */
        transform: translateX(-50%) rotate(45deg);
        background: royalblue;
    }
    
    @media (max-width: 768px) {
        .about-left h2 {
            font-size: 22px;
            line-height: 30px;
        }
        .about-left h2::before {
            width: 90px;
        }
    }
    
    @media (max-width: 480px) {
        .about-left h2 {
            font-size: 18px;
            line-height: 26px;
        }
        .about-left h2::before {
            width: 50px;
        }
        .about-left h2::after {
            height: 10px;
            width: 10px;
            bottom: -18px;
        }
    }
    
    .about-left h4 {
        color: black;
        text-transform: capitalize;
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;
        margin: 20px 0 30px;
        width: 80%;
        font-family: ("Kumbh Sans", Sans-serif);
        margin-block-end: 14.4px;
        margin-block-start: 0px;
    }
    
    .about-left p {
        font-size: 16px;
        line-height: 30px;
        color: #555;
        font-family: ("Kumbh Sans", Sans-serif);
        margin-block-end: 14.4px;
        margin-block-start: 0px;
    }
    /*--- 5. About area ends ---*/
    /*--- 6. Services area css starts ---*/
    /* Make sure the row aligns all columns equally */
    
    .services .row {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        /* equal height for all */
        margin: -5px;
        /* compensate column padding */
    }
    
    .services .col-lg-4,
    .services .col-md-6 {
        display: flex;
        /* allows children to stretch */
        padding: 5px;
    }
    /* Icon box fills full column height */
    
    .services .icon-box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        flex: 1;
        /*  stretches equally */
        padding: 20px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease-in-out;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        /* no extra gaps */
    }
    
    .services .icon-box:hover {
        transform: translateY(-5px);
    }
    /* Icon */
    
    .services .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        background: #149ddd;
        border-radius: 50%;
        border: 1px solid #149ddd;
        transition: 0.5s;
        margin-bottom: 15px;
        flex-shrink: 0;
    }
    
    .services .icon i {
        color: #fff;
        font-size: 24px;
        line-height: 1;
    }
    
    .services .icon-box:hover .icon {
        background: #fff;
    }
    
    .services .icon-box:hover .icon i {
        color: #149ddd;
    }
    /* Text */
    
    .services .title {
        font-weight: 700;
        margin-bottom: 10px;
        font-size: 18px;
        line-height: 1.3;
    }
    
    .services .title a {
        color: #343a40;
        text-decoration: none;
    }
    
    .services .title a:hover {
        color: #149ddd;
    }
    
    .services .description {
        line-height: 24px;
        font-size: 16px;
        flex-grow: 1;
        /* pushes content evenly */
        margin-bottom: 0;
    }
    /* Responsive tweaks */
    
    @media (max-width: 991px) {
        .services .title {
            font-size: 16px;
        }
        .services .description {
            font-size: 16px;
            line-height: 22px;
        }
    }
    
    @media (max-width: 767px) {
        .services .row {
            flex-direction: column;
            /* stack vertically */
        }
        .services .icon-box {
            align-items: center;
            text-align: left;
        }
        .services .icon {
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
        }
        .services .title {
            font-size: 15px;
        }
        .services .description {
            font-size: 14px;
            align-items: left;
            justify-content: left;
        }
    }
    
    @media (max-width: 480px) {
        .services .icon {
            width: 48px;
            height: 48px;
        }
        .services .icon i {
            font-size: 20px;
        }
        .services .title {
            font-size: 14px;
        }
        .services .description {
            font-size: 12px;
        }
    }
    /*--- 6. services area ends ---*/
    /* 7. Why Choose Us section starts --- */
    
    .why-choose-us-area {
        background: whitesmoke;
        color: #ffffff;
    }
    
    .why-choose-us-left h2 {
        font-size: 27px;
        line-height: 37px;
        margin-bottom: 20px;
        font-weight: 600;
        color: #333333;
    }
    
    .why-choose-us-left h4 {
        color: black;
        text-transform: capitalize;
        font-weight: 500;
        font-size: 20px;
        line-height: 34px;
        margin: 20px 0 30px;
        width: 80%;
    }
    
    .why-choose-us-left p {
        color: #555;
        font-size: 16px;
        line-height: 30px;
        font-family: ("Kumbh Sans", Sans-serif);
        margin-block-end: 14.4px;
        margin-block-start: 0px;
    }
    
    .why-choose-us-left a {
        display: inline-block;
        color: #ecd507;
        padding: 10px 20px;
        text-transform: uppercase;
        background: #0ab12e;
        margin-top: 20px;
        width: 160px;
        border-radius: 30px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 14px;
        text-align: center;
    }
    
    .why-choose-us-profile img {
        max-width: 100%;
        height: auto;
        border-radius: 10px;
        display: block;
        margin: 0 auto;
    }
    
    @media (max-width: 767px) {
        .why-choose-us-left {
            text-align: center;
        }
        .why-choose-us-left h4,
        .why-choose-us-left p {
            width: 100%;
        }
        .why-choose-us-profile img {
            margin-top: 20px;
        }
    }
    /* 7. Why Choose Us section ends --- */
    /* Careers Section */
    
    .careers-area {
        padding: 40px 0;
    }
    
    .career-item {
        border-radius: 10px;
        overflow: hidden;
        transition: transform 0.3s ease-in-out;
        background: #fff;
    }
    
    .career-item:hover {
        transform: translateY(-5px);
    }
    /* Image Wrapper */
    
    .career-img-wrapper {
        display: block;
        width: 100%;
        height: 300px;
        /* uniform height */
        overflow: hidden;
    }
    
    .career-img {
        width: 100%;
        height: 100%;
        /* match wrapper height */
        object-fit: cover;
        /* ensures no overlap */
        display: block;
    }
    /* Button/Text Outside */
    
    .career-item .card-body {
        padding: 15px;
    }
    
    .career-item .btn {
        font-size: 0.95rem;
        border-radius: 30px;
        padding: 6px 16px;
        background-color: rgb(178, 138, 39);
        color: #fff;
    }
    /* Responsive Grid */
    
    @media (max-width: 768px) {
        .careers-area .col-md-4 {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    
    @media (max-width: 576px) {
        .careers-area .col-md-4 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    /* careers ends */
    /*--- 9. gallery part starts css starts---*/
    /* Gallery Section */
    
    .gallery-area {
        padding: 60px 0;
        background: #f9f9f9;
    }
    
    .section-header h2 {
        text-align: center;
        margin-bottom: 40px;
        font-weight: bold;
        color: #333;
    }
    /* Gallery Items */
    
    .gallery-items {
        margin-bottom: 30px;
        overflow: hidden;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out;
        background: #fff;
    }
    /* Image Styling */
    
    .gallery-items img {
        width: 100%;
        /* full column width */
        height: 250px;
        /* same height across images */
        object-fit: cover;
        /* keeps aspect ratio, fills box */
        display: block;
        border-radius: 8px 8px 0 0;
        transition: transform 0.3s ease-in-out;
    }
    /* Hover Zoom Effect */
    
    .gallery-items:hover img {
        transform: scale(1.05);
    }
    /* Card Body */
    
    .gallery-items .card-body {
        padding: 15px;
        text-align: center;
        background: #fff;
    }
    /* Responsive Adjustments */
    
    @media (max-width: 992px) {
        .gallery-items img {
            height: 200px;
        }
    }
    
    @media (max-width: 576px) {
        .gallery-items img {
            height: 150px;
        }
    }
    /* gallery ends */
    /*---8. Team area css starts---*/
    /* Section Header */
    
    .section-header h2 {
        text-align: center;
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 30px;
    }
    /* Team card */
    /* Team Section */
    
    .team-area {
        padding: 40px 0;
    }
    
    .team-area .gallery-items {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out;
        height: 100%;
        /* ensures uniform cards */
    }
    
    .team-area .gallery-items:hover {
        transform: translateY(-5px);
    }
    /* Uniform Image Styling */
    
    .team-area .team-img {
        width: auto;
        height: 400px;
        /* fixed height for all images */
        object-fit: cover;
        /* fills box, keeps aspect ratio, may crop edges */
        display: block;
        margin: 0 auto;
        border-bottom: 1px solid #eee;
    }
    /* Text Styling */
    
    .team-area .gallery-text {
        padding: 15px;
        text-align: center;
    }
    
    .team-area .gallery-text h2 {
        font-size: 20px;
        font-weight: 600;
        margin-top: 15px;
        color: #222;
    }
    
    .team-area .gallery-text h3 {
        font-size: 14px;
        font-weight: 400;
        color: #555;
    }
    /* Responsive Grid */
    
    @media (max-width: 768px) {
        .team-area .col-md-4 {
            flex: 0 0 50%;
            max-width: 50%;
        }
    }
    
    @media (max-width: 576px) {
        .team-area .col-md-4 {
            flex: 0 0 100%;
            max-width: 100%;
        }
    }
    /*---8. Team area css ends---*/
    /* 9. Blog Section Styles */
    
    .blog {
        padding: 60px 0;
    }
    
    .blog .blog-item {
        margin-bottom: 30px;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    
    .blog .blog-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 35px rgba(0, 0, 0, 0.15);
    }
    
    .blog .blog-item img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
    
    .blog .blog-content {
        padding: 20px;
    }
    
    .blog .blog-content h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    .blog .blog-content h3 a {
        color: gray;
        transition: 0.3s;
    }
    
    .blog .blog-content h3 a:hover {
        color: goldenrod;
    }
    
    .blog .blog-meta {
        margin-bottom: 15px;
        color: #6c757d;
        font-size: 14px;
    }
    
    .blog .blog-meta i {
        margin-right: 5px;
        color: #149ddd;
    }
    
    .blog .blog-meta a {
        color: white;
        transition: 0.3s;
    }
    
    .blog .blog-meta a:hover {
        color: goldenrod;
    }
    
    .blog .read-more {
        display: inline-block;
        color: #149ddd;
        font-weight: 600;
        transition: 0.3s;
    }
    
    .blog .read-more:hover {
        color: #37b3ed;
    }
    
    .blog .read-more i {
        margin-left: 5px;
        transition: 0.3s;
    }
    
    .blog .read-more:hover i {
        transform: translateX(5px);
    }
    
    .blog .btn-primary {
        color: #fff;
        background-color: rgb(184, 157, 5);
        border-radius: 30px;
        padding: 10px 20px;
    }
    /* End of Blog Section Styles */
    /* Blog list styles */
    /* Grid layout for posts */
    
    .blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        /* slight tweak for smaller screens */
        gap: 24px;
        margin: 20px auto;
        padding: 0 15px;
        /* prevent items from touching screen edges */
        max-width: 1200px;
        /* keeps posts centered on big screens */
    }
    /* Post card */
    
    .blog-post {
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* ⬅ changed from space-between */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        border: 1px solid #e0e0e0;
        padding: 20px;
    }
    
    .blog-post:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
    }
    
    .blog-post-title {
        font-size: 1.3rem;
        margin-bottom: 10px;
        line-height: 1.4;
    }
    
    .blog-post-meta {
        font-size: 0.9rem;
        margin-bottom: 12px;
        color: #666;
    }
    /* Text */
    
    .blog-post p {
        flex-grow: 0;
        /* ⬅ prevents the text area from stretching too much */
        font-size: 1rem;
        line-height: 1.6;
        margin-bottom: 15px;
    }
    /* Pagination wrapper */
    /* Container with flex */
    
    .pagination-container {
        display: flex;
        justify-content: center;
        /* Center horizontally */
        align-items: center;
        /* Center vertically if needed */
        position: relative;
        /* Stick at the bottom */
        bottom: 20px;
        /* Space from bottom */
        left: 50%;
        transform: translateX(-50%);
        /* Center horizontally */
        z-index: 1000;
        /* Keep above content */
        width: auto;
    }
    /* Center counter */
    
    .page-counter {
        flex: 1;
        text-align: center;
        font-weight: 500;
        font-size: 1rem;
        color: #333;
    }
    /* Keep pagination lists neat */
    
    .pagination {
        margin: 0;
    }
    /* Responsive adjustments */
    
    @media (max-width: 768px) {
        .blog-post-title {
            font-size: 1.1rem;
        }
        .blog-post {
            padding: 15px;
        }
    }
    
    @media (max-width: 480px) {
        .blog-grid {
            grid-template-columns: 1fr;
            /* single column on very small screens */
        }
        .blog-post {
            padding: 12px;
        }
    }
    /* blog list styles */
    /* Blog tag container (grid layout) */
    
    .blog-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 25px;
        margin: 30px auto;
        max-width: 1200px;
        padding: 0 15px;
    }
    /* Blog post card */
    /* Hover effect on blog post */
    
    .blog-post:hover {
        transform: translateY(-6px);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    }
    /* Blog images */
    
    .blog-post img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        border-bottom: 1px solid #eee;
        transition: transform 0.35s ease;
    }
    /* Image hover zoom */
    
    .blog-post img:hover {
        transform: scale(1.05);
    }
    /* Blog content padding */
    
    .blog-post h2,
    .blog-post p,
    .blog-post .blog-post-meta,
    .blog-post .btn {
        padding: 0 15px;
        margin-bottom: 12px;
        font-size: 16px;
    }
    
    .blog-post .btn {
        align-self: flex-start;
        margin-top: auto;
        /* ⬅ ensures it stays at the bottom naturally */
        margin: 10px 15px 15px;
        border-radius: 8px;
        transition: all 0.3s ease;
        color: #149ddd;
    }
    /* Blog title */
    
    .blog-post-title a {
        color: #149ddd;
        font-weight: bold;
        text-decoration: none;
        font-size: 16px;
        transition: color 0.3s ease;
    }
    
    .blog-post-title a:hover {
        color: royalblue;
    }
    /* Meta text */
    
    .blog-post-meta.text-muted {
        font-size: 1.rem;
        color: #666;
    }
    /* Category & Tag badges */
    
    .blog-post-meta .badge.bg-info a {
        color: #fff !important;
        border-radius: 6px;
        padding: 6px 10px;
    }
    /* Category badge hover */
    
    .blog-post-meta .badge.bg-info a:hover {
        color: #fff !important;
        background: #0d6efd;
        border-radius: 6px;
        padding: 6px 10px;
    }
    
    .blog-post-meta .badge.bg-secondary a {
        color: whitesmoke!important;
        border-radius: 6px;
    }
    /* Tag badge hover */
    
    .blog-post-meta .badge.bg-secondary a:hover {
        background: goldenrod;
        padding: 6px 10px;
    }
    /* Read More button */
    
    .blog-post .btn {
        align-self: flex-start;
        margin: 10px 15px 15px;
        border-radius: 8px;
        transition: all 0.3s ease;
        color: #149ddd;
    }
    /* Hover effect on Read More */
    
    .blog-post .btn:hover {
        background: royalblue;
        color: #fff;
        border-color: royalblue;
        transform: translateY(-2px);
    }
    /* Pagination container */
    
    .pagination-container {
        margin-top: 30px;
    }
    /* Center pagination */
    
    .pagination {
        justify-content: center;
    }
    /* end blog tag area */
    /* --- 10. Invitation area css starts --- */
    
    .invitation-area {
        background: whitesmoke;
        color: #ffffff;
    }
    
    .single-invite h2 {
        font-size: 20px;
        line-height: 34px;
        margin-bottom: 20px;
        padding-top: 10px;
        font-weight: 600;
        color: black;
        font-family: ("Kumbh Sans", Sans-serif);
    }
    
    .single-invite p {
        width: 70%;
        margin: auto;
        color: #555;
        font-size: 16px;
        font-family: ("Kumbh Sans", Sans-serif);
    }
    
    .single-invite a {
        display: inline-block;
        color: #fff;
        padding: 10px 20px;
        text-transform: uppercase;
        background: rgb(184, 157, 5);
        margin-top: 20px;
        border-radius: 30px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 14px;
    }
    /*--- invitation area ends ---*/
    /* partners section */
    
    #partners {
        overflow: hidden;
        position: relative;
        padding: 40px 0;
    }
    /* Scrolling container */
    
    .scroll-row {
        display: flex;
        flex-wrap: nowrap;
        gap: 15px;
        width: max-content;
        animation: scroll 20s linear infinite;
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        animation-play-state: running;
        /* default state */
    }
    /* Pause the scroll when hovering anywhere inside the scroll-row */
    
    .scroll-row:hover {
        animation-play-state: paused;
    }
    /* Each card */
    
    .scroll-row .card {
        flex: 0 0 auto;
        width: clamp(180px, 25vw, 250px);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        background: #f8f9fa;
        cursor: pointer;
    }
    /* Card hover effect */
    
    .scroll-row .card:hover {
        transform: translateY(-8px) scale(1.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    }
    /* Images inside cards */
    
    .scroll-row img {
        width: 100%;
        height: clamp(120px, 20vw, 200px);
        object-fit: contain;
        background: #fff;
        padding: 10px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    /* Image hover effect */
    
    .scroll-row img:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        border-radius: 8px;
    }
    /* Typography inside cards */
    
    .scroll-row .card-body {
        padding: 10px;
        text-align: center;
    }
    
    .scroll-row .card-body h4 {
        font-size: clamp(14px, 2vw, 18px);
        margin-bottom: 8px;
    }
    
    .scroll-row .card-body p {
        font-size: clamp(12px, 1.8vw, 14px);
        color: #333;
        margin: 0;
    }
    /* Continuous scroll animation */
    
    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    /* Mobile adjustments */
    
    @media (max-width: 768px) {
        .scroll-row {
            gap: 10px;
            animation-duration: 15s;
        }
    }
    /*-------------10. Contact area css starts -------------*/
    
    .contact {
        padding-bottom: 130px;
    }
    
    .contact .info {
        padding: 30px;
        background: #fff;
        width: 100%;
        box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
    }
    
    .contact .info i {
        font-size: 20px;
        color: #149ddd;
        float: left;
        width: 44px;
        height: 44px;
        background: #dff3fc;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        transition: all 0.3s ease-in-out;
    }
    
    .contact .info h4 {
        padding: 0 0 0 60px;
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 5px;
        color: #050d18;
    }
    
    .contact .info p {
        padding: 0 0 10px 60px;
        margin-bottom: 20px;
        font-size: 14px;
        color: #173b6c;
    }
    
    .contact .info .email p {
        padding-top: 5px;
    }
    
    .contact .info .social-links {
        padding-left: 60px;
    }
    
    .contact .info .social-links a {
        font-size: 18px;
        display: inline-block;
        background: #333;
        color: #fff;
        line-height: 1;
        padding: 8px 0;
        border-radius: 50%;
        text-align: center;
        width: 36px;
        height: 36px;
        transition: 0.3s;
        margin-right: 10px;
    }
    
    .contact .info .social-links a:hover {
        background: #149ddd;
        color: #fff;
    }
    
    .contact .info .email:hover i,
    .contact .info .address:hover i,
    .contact .info .phone:hover i {
        background: #149ddd;
        color: #fff;
    }
    
    .contact .php-email-form {
        width: 100%;
        padding: 30px;
        background: #fff;
        box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
    }
    
    .contact .php-email-form .form-group {
        padding-bottom: 8px;
    }
    
    .contact .php-email-form .validate {
        display: none;
        color: red;
        margin: 0 0 15px 0;
        font-weight: 400;
        font-size: 13px;
    }
    
    .contact .php-email-form .error-message {
        display: none;
        color: #fff;
        background: #ed3c0d;
        text-align: left;
        padding: 15px;
        font-weight: 600;
    }
    
    .contact .php-email-form .error-message br+br {
        margin-top: 25px;
    }
    
    .contact .php-email-form .sent-message {
        display: none;
        color: #fff;
        background: #18d26e;
        text-align: center;
        padding: 15px;
        font-weight: 600;
    }
    
    .contact .php-email-form .loading {
        display: none;
        background: #fff;
        text-align: center;
        padding: 15px;
    }
    
    .contact .php-email-form .loading:before {
        content: "";
        display: inline-block;
        border-radius: 50%;
        width: 24px;
        height: 24px;
        margin: 0 10px -6px 0;
        border: 3px solid #18d26e;
        border-top-color: #eee;
        animation: animate-loading 1s linear infinite;
    }
    
    .contact .php-email-form .form-group {
        margin-bottom: 15px;
    }
    
    .contact .php-email-form label {
        padding-bottom: 8px;
    }
    
    .contact .php-email-form input,
    .contact .php-email-form textarea {
        border-radius: 0;
        box-shadow: none;
        font-size: 14px;
    }
    
    .contact .php-email-form input {
        height: 44px;
    }
    
    .contact .php-email-form textarea {
        padding: 10px 15px;
    }
    
    .contact .php-email-form button[type=submit] {
        background: #149ddd;
        border: 0;
        padding: 10px 24px;
        color: #fff;
        transition: 0.4s;
        border-radius: 4px;
    }
    
    .contact .php-email-form button[type=submit]:hover {
        background: #37b3ed;
    }
    
    @keyframes animate-loading {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /*------------- Contact area ends -------------*/
    /*--------------11. Footer area css starts -------------*/
    /* Footer Styling */
    /*--------------- Footer area ends -------------*/
    /* --- Base Layout --- */
    
    .featurette {
        padding: 2rem 0;
        overflow: visible;
    }
    
    .featurette-heading {
        font-weight: 600;
        color: goldenrod;
        font-size: 2rem;
        line-height: 1.3;
    }
    
    .featurette .lead {
        font-size: 20px;
        margin-top: 1rem;
        width: 90%;
    }
    
    .featurette-image {
        border-radius: 15px;
        transition: transform 0.8s ease, box-shadow 0.8s ease;
    }
    
    .featurette-image:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    /* --- Keyframes --- */
    
    @keyframes popSlideLeft {
        0% {
            opacity: 0;
            transform: translateX(-90px) scale(0.9);
        }
        60% {
            opacity: 1;
            transform: translateX(15px) scale(1.03);
        }
        100% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }
    
    @keyframes popSlideRight {
        0% {
            opacity: 0;
            transform: translateX(90px) scale(0.9);
        }
        60% {
            opacity: 1;
            transform: translateX(-15px) scale(1.03);
        }
        100% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }
    /* Hidden initial state */
    
    .pop-text-left,
    .pop-text-right,
    .pop-image-left,
    .pop-image-right {
        opacity: 0;
        will-change: transform, opacity;
    }
    /* Animate classes */
    
    .animate-text-left {
        animation: popSlideLeft 1.4s cubic-bezier(.25, .8, .25, 1) both;
    }
    
    .animate-text-right {
        animation: popSlideRight 1.4s cubic-bezier(.25, .8, .25, 1) both;
    }
    
    .animate-image-left {
        animation: popSlideLeft 1.4s cubic-bezier(.25, .8, .25, 1) 0.3s both;
    }
    
    .animate-image-right {
        animation: popSlideRight 1.4s cubic-bezier(.25, .8, .25, 1) 0.3s both;
    }
    /* Responsive */
    
    @media (max-width: 767.98px) {
        .featurette-heading {
            font-size: 1.5rem;
            text-align: center;
        }
        .featurette .lead {
            text-align: center;
            width: 100%;
        }
    }
    /* stylelint-disable selector-list-comma-newline-after */
    
    .data-header {
        line-height: 1;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .data-header-logo {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
        font-size: 2.25rem;
    }
    
    .data-header-logo:hover {
        text-decoration: none;
    }
    
    h1,
    h3,
    h4,
    h5,
    h6 {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
    }
    
    .data-post h2 {
        font-family: "Playfair Display", Georgia, "Times New Roman", serif;
        color: royalblue;
    }
    
    .display-4 {
        font-size: 2.5rem;
    }
    
    @media (min-width: 768px) {
        .display-4 {
            font-size: 3rem;
        }
    }
    
    .card-img-right {
        height: 100%;
        border-radius: 0 3px 3px 0;
    }
    
    .flex-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
    }
    
    .h-250 {
        height: 250px;
    }
    
    @media (min-width: 768px) {
        .h-md-250 {
            height: 250px;
        }
    }
    /*
 * Data posts
 */
    
    .data-post {
        margin-bottom: 0.5rem;
    }
    
    .data-post-title {
        margin-bottom: .25rem;
        font-size: 2.5rem;
        color: royalblue;
    }
    
    .data-post-meta {
        margin-bottom: 1.5rem;
        color: #504949;
    }
    
    .data-post ul li,
    .data-post ol li {
        color: rgb(41, 38, 38);
        font-weight: 600;
        text-align: left;
        justify-content: left;
    }
    
    .data-post p {
        text-align: left;
        justify-content: left;
    }
    
    .accordion-button {
        background: linear-gradient(90deg, #004aad, #007bff);
        color: #fff !important;
        font-weight: 600;
        box-shadow: none;
        transition: all 0.3s ease;
    }
    
    .accordion-button:not(.collapsed) {
        color: #fff !important;
        background: linear-gradient(90deg, #0062cc, #0096ff);
    }
    
    .accordion-item {
        border: none;
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    .accordion-body {
        background-color: #f8f9fa;
        font-size: 0.95rem;
        line-height: 1.6;
        color: #333;
        padding: 1.2rem;
        transition: all 0.3s ease;
    }
    /* Remove blue focus outline */
    
    .accordion-button:focus {
        box-shadow: none;
    }
    
    .newsletter-form .form-control {
        border-radius: 0.5rem;
        padding: 0.75rem;
        border: 1px solid #d5d9e0;
        font-size: 0.95rem;
        transition: border-color 0.3s ease;
    }
    
    .newsletter-form .form-control:focus {
        border-color: #004aad;
        box-shadow: 0 0 0 0.15rem rgba(0, 74, 173, 0.15);
    }
    /* 🔹 Button (left-aligned + pulse animation on hover) */
    
    .btn-subscribe {
        background-color: #ffffff;
        color: #ffffff;
        border: 2px solid #ffffff;
    }
    
    .btn-subscribe:hover {
        background-color: #004aad;
        color: #ffffff;
    }
    
    .btn-subscribe:hover {
        background-color: royalblue;
        transform: translateY(-2px);
        animation: pulse 1s infinite;
    }
    
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(0, 74, 173, 0.4);
        }
        70% {
            box-shadow: 0 0 0 8px rgba(236, 109, 4, 0)
        }
        100% {
            box-shadow: 0 0 0 0 rgba(0, 74, 173, 0);
        }
    }
    
    .hover-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: none;
        border-radius: 10px;
    }
    
    .hover-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 6px 20px rgba(0, 74, 173, 0.2);
    }
    
    .hover-btn {
        transition: all 0.3s ease;
        font-size: 0.9rem;
        padding: 6px 0;
    }
    
    .hover-btn:hover {
        background-color: #004aad;
        color: #fff;
        border-color: #004aad;
    }