/* Custom CSS, overrides Bootstrap where necessary */

/* Custom utility colors */
.text-orange {
    color: #FF5722 !important;
}

.bg-orange {
    background-color: #FF5722 !important;
}

.btn-orange {
    background-color: #FF5722;
    border-color: #FF5722;
    color: #fff;
}

.btn-orange:hover {
    background-color: #e64a19;
    border-color: #e64a19;
    color: #fff;
}

/* Specific styling not easily covered by Bootstrap */
.top-bar-left span {
    white-space: nowrap;
    /* Prevent breaking on small screens */
}

.top-bar-right a:hover {
    color: #ff9900 !important;
    /* Accent color for hover */
}

.logo .godpray-text {
    color: #FF5722;
    /* Specific color for logo text */
}

.dropdown-item ul li,
.nav-link ul li a,
.nav-link,
.dropdown-item {
    font-family: "Poppins", Sans-serif;
    font-size: 17px;
    text-transform: capitalize;
    color: #0D0D0D;
    padding: 0px 15px 0px 15px;
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
    text-transform: none;
    font-weight: 600;
    letter-spacing: normal;
}

.main-nav .navbar-nav .nav-link {
    color: #333;
    font-weight: bold;
    padding: 5px 0;
    /* Bootstrap's default padding is usually more */
    margin: 0 10px;
    /* Spacing between nav items */
    transition: color 0.3s ease;
}

.main-nav .navbar-nav .nav-link:hover,
.main-nav .navbar-nav .nav-link.active {
    color: #FF5722;
}

/* Dropdown Menu Styling */
.navbar-nav .dropdown-menu {
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.3s ease-out;
    /* Simple fade-in animation */
}

.navbar-nav .dropdown-item {
    color: #333;
    font-weight: normal;
    transition: background-color 0.2s ease;
}

.navbar-nav .dropdown-item:hover {
    background-color: #FF5722;
    color: #fff;
}

/* Custom Hero Section specific styles, overriding some Bootstrap defaults */
.hero-section {
    /* Height and background colors are inline in HTML for simplicity of demonstration,
       but ideally these would be in CSS. If you move them here, ensure !important
       if they are not overriding something specific. */
}

/* Adjustments for Bootstrap Navbar Toggler */
.navbar-toggler {
    border-color: rgba(0, 0, 0, .1);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Optional: Fade-in animation for dropdown */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .main-header .container {
        flex-wrap: wrap;
    }

    .navbar-collapse {
        order: 3;
        /* Move navigation below logo/contact on small screens */
        flex-basis: 100%;
        margin-top: 15px;
        background-color: #f8f9fa;
        /* Light background for mobile nav */
        padding: 15px;
        border-radius: 5px;
    }

    .navbar-nav {
        display: block;
        /* Stack nav items vertically */
    }

    .navbar-nav .nav-item {
        margin-bottom: 10px;
    }

    .navbar-nav .nav-link {
        padding: 10px 15px;
        text-align: left;
    }

    .contact-number {
        margin-left: auto;
        font-size: 16px !important;
    }

    .logo {
        margin-right: auto;
        width: auto;
    }

    .hero-content-wrapper {
        flex-direction: column;
        text-align: center;
        padding-top: 50px;
    }

    .hero-text-container,
    .hero-image-container {
        width: 100% !important;
        padding-right: 0;
        margin-bottom: 30px;
    }

    .hero-image-container {
        justify-content: center !important;
    }

    .hero-left-bg,
    .hero-right-bg {
        width: 100% !important;
    }

    .hero-left-bg {
        height: 60% !important;
    }

    .hero-right-bg {
        height: 40% !important;
        top: 60% !important;
    }
}

@media (max-width: 767.98px) {
    .top-bar-content {
        flex-direction: column;
        text-align: center;
    }

    .top-bar-left span {
        display: block;
        margin-right: 0;
        margin-bottom: 5px;
    }

    .top-bar-right {
        margin-top: 10px;
    }

    .hero-text-container h1 {
        font-size: 2.5rem !important;
        /* Smaller heading on very small screens */
    }
}


/* Existing Custom CSS... */

/* --- New Section Styles --- */

.about-section {
    background-color: #f8f9fa;
    /* Light background for the section */
}

.about-content h2 {
    color: #333;
    /* Darker color for the main heading */
}

.about-content .lead {
    color: #666;
}

.features {
    margin-top: 30px;
}

.features .col-md-6 {
    margin-bottom: 20px;
    /* Space between feature items */
}

.features i {
    font-size: 2.5rem;
    /* Larger icon size */
    flex-shrink: 0;
    /* Prevent icon from shrinking */
    line-height: 1;
    /* Align icon vertically with text */
}

.features h5 {
    color: #333;
    /* Darker color for feature titles */
    margin-bottom: 5px;
}

.features p {
    font-size: 0.9rem;
    color: #777;
}

.cta-bottom-bar {
    background-color: #c00000;
    /* Dark red matching the hero left */
    font-size: 1.1rem;
}

.cta-bottom-bar p {
    margin-bottom: 0;
    /* Remove default paragraph margin */
}

.cta-bottom-bar .text-warning {
    color: #FFC107 !important;
    /* Yellow for "OR" */
}

/* Adjustments for smaller screens (if needed, Bootstrap handles much of it) */
@media (max-width: 991.98px) {
    .about-content {
        padding-left: 15px !important;
        /* Remove ps-lg-5 on smaller screens */
        padding-right: 15px;
    }

    .about-section .row {
        flex-direction: column-reverse;
        /* Image at top, content below */
    }
}

@media (max-width: 767.98px) {
    .about-content h2 {
        font-size: 2.5rem;
        /* Adjust heading size */
    }

    .cta-bottom-bar {
        padding: 20px 15px;
        /* More padding on small screens */
    }

    .cta-bottom-bar p {
        margin-bottom: 10px !important;
    }
}


/* Existing Custom CSS... */

/* --- Puja Section Styles --- */

.puja-section {
    background-color: #f8f9fa;
    /* Light background for the section */
}

.puja-section .display-5 {
    color: #333;
}

.puja-header-icon {
    width: 60px;
    /* Width and height for the diamond shape */
    height: 60px;
    background-color: #c00000;
    /* Dark red background */
    transform: rotate(45deg);
    /* Rotate to make it a diamond */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.puja-header-icon i {
    transform: rotate(-45deg);
    /* Rotate icon back to normal */
}

.puja-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.puja-card:hover {
    transform: translateY(-5px);
    /* Lift card on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
}

.puja-card-image {
    width: 120px;
    /* Fixed size for the circular image container */
    height: 120px;
    overflow: hidden;
    /* Ensure image stays within circle */

    /* Orange border around image */
    padding: 3px;
    /* Space between border and image */
    background-color: #fff;
    /* Background if image is smaller */
}

.puja-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cover the area, crop if necessary */
}

.puja-nav-btn {
    border-color: #c00000 !important;
    /* Dark red border */
    color: #c00000 !important;
    /* Dark red icon */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.puja-nav-btn:hover {
    background-color: #c00000 !important;
    color: #fff !important;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .puja-section .display-5 {
        font-size: 2.5rem;
    }

    .puja-card {
        padding: 20px;
    }
}

.bg-red1 {
    background-color: #c00000;
}


/* Existing Custom CSS... */

/* --- General Query Section Styles --- */

.query-section {
    min-height: 700px;
    /* Adjust height as needed */
    display: flex;
    /* To center content vertically */
    align-items: center;
    /* Center content vertically */
}

/* Background layers are defined inline in HTML for quick setup,
   but can be moved here if more complex styling is needed. */

.query-section .container {
    padding-top: 50px;
    padding-bottom: 50px;
}

.ganesha-drawing {
    max-width: 80%;
    /* Adjust size of the image */
    height: auto;
}

.contact-form-card {
    background-color: #fff;
    padding: 40px !important;
    /* Ensure padding consistency */
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.vertical-line {
    /* Defined inline in HTML for simplicity */
}

.contact-form-card h3 {
    color: #333;
}

.form-control,
.form-select {
    padding: 12px 15px;
    border-radius: 5px;
    border: 1px solid #ddd;
    font-size: 16px;
}

.form-control:focus,
.form-select:focus {
    border-color: #FF5722;
    /* Orange focus outline */
    box-shadow: 0 0 0 0.25rem rgba(255, 87, 34, 0.25);
    /* Bootstrap-like orange shadow */
}

.btn-dark-custom {
    background-color: #212529;
    /* Dark color for submit button */
    border-color: #212529;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s ease;
}

.btn-dark-custom:hover {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .query-section {
        min-height: auto;
        /* Allow height to adjust on smaller screens */
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .query-bg-left,
    .query-bg-right {
        width: 100% !important;
        /* Full width backgrounds */
        height: 50% !important;
        /* Half height each */
    }

    .query-bg-right {
        top: 50% !important;
        /* Right background starts from middle */
    }

    .ganesha-drawing {
        max-width: 60%;
        /* Adjust image size for tablets */
        margin-bottom: 30px;
    }

    .contact-form-card {
        padding: 30px !important;
    }
}

@media (max-width: 767.98px) {
    .ganesha-drawing {
        max-width: 80%;
        /* Adjust image size for phones */
    }

    .contact-form-card h3 {
        font-size: 1.5rem;
    }



}

/* Existing Custom CSS... */

/* --- Stats Section Styles --- */
.stats-section {
    background-color: #c00000;
    /* Dark red background matching hero-left */
    color: #fff;
    padding-top: 60px;
    /* More padding top/bottom */
    padding-bottom: 60px;
}

.stats-section .stat-item {
    padding: 20px 0;
    /* Internal padding for each stat box */
}

.stats-section .stat-item i {
    color: #fff;
    /* White icons */
    margin-bottom: 15px;
    /* Space below icon */
    font-size: 3.5rem;
    /* Larger icon size */
    line-height: 1;
    /* For consistent vertical spacing */
}

.stats-section .stat-item h3 {
    font-size: 2.5rem;
    /* Larger numbers */
    margin-bottom: 5px;
}

.stats-section .stat-item p {
    font-size: 1.1rem;
    /* Slightly larger text */
    opacity: 0.9;
    /* Slightly subdued text */
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .stats-section .stat-item {
        padding: 15px 0;
    }

    .stats-section .stat-item i {
        font-size: 3rem;
    }

    .stats-section .stat-item h3 {
        font-size: 2rem;
    }

    .stats-section .stat-item p {
        font-size: 1rem;
    }
}

.hero-left-bg1 {
    width: 100%;
    z-index: 0;
    background-image: linear-gradient(90deg, #B10819 60%, #FA9300 40%);
    position: relative;
}


/* Existing Custom CSS... */
.bg-red1 {
    background-color: #c00000;
}

.bg-yellow1 {
    background-color: #FFC107;
}

/* --- News Section Styles --- */
.news-section {
    background-color: #f8f9fa;
    /* Light background */
}

.news-section .display-5 {
    color: #333;
}

.news-nav-buttons .btn {
    border-color: #ced4da !important;
    /* Lighter border for navigation */
    color: #6c757d !important;
}

.news-nav-buttons .btn:hover {
    background-color: #c00000 !important;
    /* Dark red on hover */
    border-color: #c00000 !important;
    color: #fff !important;
}

.blog-card {
    border-radius: 8px !important;
    overflow: hidden;
    /* Ensure image corners are rounded */
}

.blog-card .card-img-top {
    height: auto;
    /* Fixed height for blog images */
    object-fit: cover;
}

.blog-card .blog-date {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem !important;
    border-radius: 5px;
    top: 15px;
    /* Adjust position */
}

.blog-card .card-body h5.card-title {
    color: #333;
    line-height: 1.4;
}

.blog-card .card-text {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.blog-card .btn-link {
    font-size: 0.9rem;
    padding-left: 0 !important;
    /* Remove default link padding */
}

/* --- Main Footer Styles --- */
.main-footer {
    background-color: #c00000;
    /* Dark red footer background */
}

.main-footer .godpray-text {
    color: #fff !important;
    /* White logo text in footer */
}

.main-footer h5 {
    color: #fff;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.main-footer .list-unstyled a {
    transition: color 0.3s ease;
}

.main-footer .list-unstyled a:hover {
    color: #FFC107 !important;
    /* Yellow on hover for links */
}

.newsletter-form .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    /* Transparent white input */
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.newsletter-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.newsletter-form .form-control:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: #fff;
    box-shadow: none;
}

.newsletter-form .btn-warning {
    background-color: #FFC107;
    /* Yellow button */
    border-color: #FFC107;
    color: #c00000;
    /* Dark red text on button */
    padding: 0.5rem 1.5rem;
}

.newsletter-form .btn-warning:hover {
    background-color: #e0a800;
    /* Darker yellow on hover */
    border-color: #e0a800;
}

.main-footer .social-icons .btn {
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.main-footer .social-icons .btn:hover {
    background-color: #FFC107;
    /* Yellow background on hover */
    border-color: #FFC107;
    color: #c00000;
    /* Dark red icon on hover */
}

/* --- Copyright Bar Styles --- */
.copyright-bar {
    background-color: #ff8c00;
    /* Orange background for copyright */
}


/* Responsive adjustments */
@media (max-width: 991.98px) {
    .news-nav-buttons {
        order: -1;
        /* Move buttons above title on smaller screens */
        margin-bottom: 20px;
    }

    .main-footer .col-lg-4,
    .main-footer .col-lg-2,
    .main-footer .col-lg-3 {
        text-align: center;
        /* Center footer columns on tablet/mobile */
    }

    .main-footer .footer-logo,
    .main-footer .newsletter-form {
        justify-content: center;
        /* Center logo and form */
    }

    .main-footer .list-unstyled {
        padding-left: 0;
        /* Remove default list padding */
    }

    .main-footer .social-icons {
        text-align: center;
    }

    .main-footer .social-icons .btn {
        margin: 0 5px;
        /* Adjust spacing */
    }
}


@media (max-width: 767.98px) {

    .news-section .display-5,
    .main-footer h5 {
        font-size: 2rem;
    }

    .main-footer .col-md-6 {
        margin-bottom: 25px;
        /* Space between columns on mobile */
    }
}



/* contact */
.header-c {
    position: relative;
    height: 60vh;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('../img/subbanner.png');
    /* Replace with your actual image */
    background-size: cover;
    background-position: center;
}

.header-c1 {
    position: relative;
    height: 60vh;
    color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('../img/subbanner-c.png');
    /* Replace with your actual image */
    background-size: cover;
    background-position: center;
}

.header-c::before,
.header-c::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.4);
    /* Dark overlay */
}

.header-content {
    position: relative;
    z-index: 1;
}

.header-c h1,
.header-c1 h1 {
    font-size: 4em;
    font-weight: 700;
    margin: 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.breadcrumbs {
    margin-top: 10px;
    font-size: 0.9em;
}

.breadcrumbs a {
    color: #fff;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.orange-strip {
    background-color: #ff9900;
    height: 15vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-section {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 250px;

}

.contact-card {
    background-color: #c00000;
    color: #fff;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    width: 300px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, background-color 0.3s ease;
}


.bhs img {
    border-radius: 27px;
    box-shadow: 0 0 7px;
    overflow: hidden;
}

.text-white-50 {
    --bs-text-opacity: 1;
    color: rgb(255 255 255 / 84%) !important;
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 400;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
    margin-top: 30px;
}

.section-title h1 {
    font-size: 2.5em;
    color: #222;
    font-weight: 700;
    line-height: 1.2;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    width: 100%;
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 75%;
    /* 4:3 Aspect Ratio (height / width * 100) */
    overflow: hidden;
}

.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-content {
    padding: 20px;
    flex-grow: 1;
}

.card-title-bar {
    background-color: #c00000;
    /* Dark Red */
    color: #fff;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.card-title-bar h3 {
    margin: 0;
    font-size: 1.2em;
    font-weight: 600;
}

.card-title-bar .arrow {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #fff;
    margin-left: 10px;
}

.card-description {
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
    margin-top: 15px;
}

.contact-card:hover {
    transform: translateY(-10px);
    background-color: #a00000;
}

.contact-card i {
    font-size: 3em;
    margin-bottom: 20px;
}

.contact-card h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.contact-card p {
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0;
}

/* form */


.form-container {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-width: 800px;
    box-sizing: border-box;
    margin: 0 auto;
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
}

.form-header h2 {
    font-size: 2.2em;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.form-header p {
    font-size: 1.1em;
    color: #666;
    font-weight: 400;
}

.form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.form-group.full-width {
    flex-basis: 100%;
}

.form-field {
    flex: 1 1 calc(50% - 10px);
    /* Two fields per row with gap */
    min-width: 280px;
    /* Minimum width for responsiveness */
}

.form-field.full-width {
    flex: 1 1 100%;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1em;
    color: #333;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    transition: border-color 0.3s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: #007bff;
    outline: none;
}

.form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.form-field select {
    appearance: none;
    /* Remove default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%00-13-5.4H18.4c-6.6%200-13.1%202.2-18%206.9-4.9%204.7-6.9%2011.5-6.9%2018.4V211.8c0%206.9%202.2%2013.7%206.9%2018.4%204.7%204.7%2011.2%206.9%2018.4%206.9H274c6.9%200%2013.1-2.2%2018-6.9%204.9-4.7%206.9-11.5%206.9-18.4V87.8c0-6.9-2.2-13.7-6.9-18.4z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    padding-right: 35px;
    /* Make space for the custom arrow */
}

.submit-button {
    width: 100%;
    padding: 18px;
    background-color: #2c3e50;
    /* Dark blue/grey */
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 1.2em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.submit-button:hover {
    background-color: #1a242f;
    transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .form-group {
        flex-direction: column;
        gap: 15px;
    }

    .form-field {
        flex: 1 1 100%;
        min-width: unset;
    }

    .m-n {
        display: none !important
    }

    .w-50 {
        width: 65% !important;
    }

    .form-header h2 {
        font-size: 1.8em;
    }

    .form-header p {
        font-size: 1em;
    }
}

.w-30 {
    width: 30% !important;
}

.w-50 {
    width: 50%;
}

.tc-yellow {
    color: yellow !important;
}

.nav-item {
    font-family: "Poppins", Sans-serif;
    font-size: 17px;
    font-weight: 500;
    text-transform: capitalize;
    color: #0D0D0D;
    padding: 0px 15px 0px 15px;
}

.me-auto {
    margin: 0 auto;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        margin: 10px;
    }
}

.c-n {
    border-style: solid;
    border-width: 0px 0px 0px 0px;
    border-color: #CDCDCD;
    padding: 0px 15px 0px 15px;
    border-left: 1px solid #ccc;
    height: 100px;
    line-height: 100px;
    align-items: center;
    display: block;
    justify-items: center;
    align-content: center;
}

.c-i,
.c-i a i {
    background-color: #bf000b;
    fill: #FFFFFF;
    color: #FFFFFF;
    width: 50px;
    height: 50px;
    align-content: center;
    text-align: center;
    border-radius: 50px;
    transform: rotate(90deg);
}


.m-n a {
    color: #ff5722 !important;
    text-decoration: none;
}

.m-n a :hover {
    color: #ff9900 !important;
    text-decoration: none;
}

.active {
    color: #ff5722 !important;
    font-weight: bold;
}

/*============ End Blog Single Styles  =============*/

.whatsapp {
    bottom: 20px;
    right: 20px;

    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 99;
    width: 60px;
    height: 60px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    font-size: 27px;
    position: fixed;
}

.whatsapp::after {
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 1;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
    background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

.call-query {
    bottom: 20px;
    left: 20px;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 99;
    width: 60px;
    height: 60px;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 40px;
    font-size: 27px;
    position: fixed;
}

.call-query::after {
    position: absolute;
    z-index: -1;
    content: "";
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 1;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
    background: -webkit-radial-gradient(center ellipse, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

.blink-an {
    animation: bounce 0.5s infinite linear;
    position: relative;
}

@keyframes bounce {
    0% {
        top: 0px;
    }

    50% {
        top: -0.2em;
    }

    70% {
        top: -0.3em;
    }

    100% {
        top: 0;
    }
}