@import url('/assets/frontend/fonts/RobotoCondensed.ttf');


:root {
    --primary-color: #000080;
    --primary-color-2: #3de4c4;
    --secondary-color: #198754;
    --hover-color: #0e5e39;
    --bg-color: #333333;
    --white-color: #FFFFFF;
    --alert-color: #DC3545;
    --dark-color: #000000;
}

body {
    max-width: 100vw !important;
    overflow-x: hidden;
    background-color: #333;
}

* {
    font-family: "Public Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.primary-bg {
    background: var(--primary-color);
}

.primary-text {
    color: var(--primary-color);
}

.text-white {
    color: #fff;
}

.nav-link {
    color: var(--primary-color) !important;
    font-weight: bold !important;
    font-size: 2.5vh !important;
}

/* Show dropdown on hover for larger screens with fade-in/out effect */
@media (min-width: 992px) {
    .navbar .nav-item.dropdown .dropdown-menu {
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0.3s, opacity 0.3s ease;
        margin-top: 0;
        /* Ensures no extra margin appears when fading */
    }

    .navbar .nav-item.dropdown:hover .dropdown-menu {
        visibility: visible;
        opacity: 1;
    }

    .navbar .nav-item.dropdown:hover .nav-link {
        color: #198754 !important;
        /* Optional: Change color on hover */
    }

    .nav-link:hover {
        color: #198754 !important;
        /* Optional: Change color on hover */
    }
}

/* Ensure dropdown closes properly on smaller screens */
@media (max-width: 991px) {
    .navbar .nav-item .dropdown-menu {
        display: none;
        /* Ensure it's hidden initially on mobile */
    }

    .navbar .nav-item .dropdown-toggle:focus+.dropdown-menu,
    .navbar .nav-item .dropdown-toggle:active+.dropdown-menu,
    .navbar .nav-item.show .dropdown-menu {
        display: block;
        /* Click functionality for mobile */
    }
}

.container-fluid-low {
    --bs-gutter-x: 0.1rem !important;
}

.navbar-toggler {
    background-color: #0174df !important;
    border: 0;
    font-size: 18px;
}

.white-icon {
    color: #fff !important;
}

.navbar {
    box-shadow: 0px 0.2px 0px 0px #000;
}

@media screen and (max-width:800px) {
    .topbar {
        display: none;
    }
}

/* information guides section */
.flagCard {
    background-size: cover;
    background-position: center center;
    position: relative;
    transition: all 0.3s ease;
}

.flagCard:hover {
    transform: scale(1.05);
    /* Optional zoom effect on hover */
}

.dropdown-item:hover {
    color: darkblue;
    background: #e3eff7;
}

.dropdown-menu {
    z-index: 999990000000000000000000;
    border: 1px solid darkblue;
}

.avatar {
    /* This image is 687 wide by 1024 tall, similar to your aspect ratio */
    background-image: url('https://i.stack.imgur.com/Dj7eP.jpg');

    /* make a square container */
    width: 150px;
    align-items: center;
    height: 150px;

    /* fill the container, preserving aspect ratio, and cropping to fit */
    background-size: cover;

    /* center the image vertically and horizontally */
    background-position: top center;

    /* round the edges to a circle with border radius 1/2 container size */
    border-radius: 50%;
}

.primary-border,
marquee .card {
    border: 1px solid var(--primary-color);
}

.primary-bg {
    background: var(--primary-color) !important;
}

.contact_us {
    background-image: url("/assets/frontend/images/contact-us.jpg");
    position: relative !important;
    padding: 30px !important;
    border-radius: 8px !important;
}

.contact_us * {
    border: 0 !important;
    /* background: transparent !important; */
}

.contact_us .card {
    background-color: rgba(255, 255, 255, 0.85) !important;
}

.card-header-primary {
    background: #214860 !important;
    color: white !important;
}

.card-header-primary2 {
    background: #e5e5e5 !important;
    color: black !important;
}

.cursor-pointer {
    cursor: pointer;
}

::-webkit-scrollbar {
    width: 4px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #214860;
    border-radius: 10px;
    border: 1px solid #3de4c4;
}

a {
    color: #214860;
    cursor: pointer;
    font-weight: 500;
}

.vError {
    border: 1px solid red !important;
}

.heightCard {
    overflow: auto;
}

/* scrollers */
.heightCard2 {
    min-height: 25rem;
    max-height: 25rem;
    overflow: auto;
    margin: 0;
    scrollbar-width: thin;
}

/* Card styles */
#scroller .card {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#scroller .card-header {
    padding: 0.75rem;
}

#scroller .card-body {
    padding: 0.75rem;
}

#scroller .card h6 {
    font-size: 1.1rem;
}

#scroller .card p {
    font-size: 0.9rem;
    color: #6c757d;
}

/* important links section */
.card-container {
    perspective: 1000px;
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
    position: relative;
    /* Ensure cards don't overflow their parent */
    width: 100%;
    height: 150px;
    /* Define a consistent height for all cards */
}

.card-flip {
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
    /* Keep flipped content inside parent */
}

.card-container:hover .card-flip {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    position: absolute;
    /* Keep both front and back in the same place */
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    padding: 20px;
}

.card-front h5 {
    font-size: medium;
}

.card-back {
    transform: rotateY(180deg);
    background-color: #f8f9fa;
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    margin-right: 8px;
}

.important-link-card {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 8px;
}

.important-link-card:hover {
    cursor: pointer;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

/* .card-spacing {
    margin-bottom: 15px;
} */

/* Responsive Behavior */
@media (min-width: 768px) and (max-width: 820px) {

    .card-container {
        margin-bottom: 10px;
        flex-direction: column;
    }

    .card-container h5 {
        font-size: 0.5rem;
    }

    .card-icon {
        font-size: 0.9rem;
    }

    .important-link-card a {
        font-size: 0.5rem !important;
    }
}

/* cic section */
/* General card styling */
#cic .card {
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: none;
}

/* Card Header */
#cic .card-header {
    background-color: #007bff;
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 8px;
    border-bottom: none;
}

/* Background block styling */
#cic .background-block {
    position: relative;
    overflow: hidden;
    height: 180px;
}

#cic .background {
    border-radius: 0 !important;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    filter: brightness(85%);
}

/* Profile Image */
#cic .profile-thumb-block {
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

#cic .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Card content styling */
#cic .card-content {
    padding-top: 80px;
    padding-bottom: 15px;
}

#cic .card-content h2 {
    font-size: 22px;
    font-weight: bold;
    color: #333;
}

#cic .card-content p {
    color: #888;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Info card content */
#cic .info-card {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 0 0 15px 15px;
}

#cic .info-card p {
    text-align: justify;
    font-size: 16px;
    color: #555;
}

/* Button styling */
#cic .btn {
    /* padding: 8px 15px; */
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
    transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

/* Custom Color for Warning Button */
#cic .btn-warning {
    background-color: #e67e22;
    /* New Orange color */
    color: white;
}

#cic .btn-warning:hover {
    background-color: #ad0900;
    /* Darker orange */
    color: #fff;
}

/* Custom Color for Success Button */
#cic .btn-success {
    background-color: #3498db;
    /* New Blue color */
    color: white;
}

#cic .btn-success:hover {
    background-color: #10108a;
    /* Darker Blue */
    color: #fff;
}

/* Button container */
#cic .button-container {
    /* margin-top: 20px; */
    display: flex;
    justify-content: space-between;
}

/* Spacing adjustments */
#cic .heightCard {
    padding: 0;
}

#cic .profile-card-3 {
    margin-bottom: 0;
}

#cic .card-content {
    padding: 15px;
}

@media (max-width: 768px) {
    #cic .button-container {
        flex-direction: column;
        gap: 10px;
    }
}

.bg-custom {
    background-color: #888;
}

.btn-custom {
    background-color: #888;
}

#full-logo {
    width: 100%;
    /* Full width of the container */
    max-width: 400px;
    /* Maximum width for larger screens */
    height: auto;
    /* Maintain aspect ratio */
}

@media (max-width: 1200px) {
    #full-logo {
        max-width: 350px;
    }
}

@media (max-width: 992px) {
    #full-logo {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    #full-logo {
        max-width: 250px;
    }
}

@media (max-width: 576px) {
    #full-logo {
        max-width: 200px;
    }
}





/* 28-07-2025 */

/* == Hero section == */


.hero-section {
    position: relative;
}

.profile-card {
    border-radius: 10px;
    overflow: hidden;
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.cover-image {
    height: 200px;
    border-radius: 6px;
    background-image: url(/assets/frontend/images/default-banner.jpg);
    background-size: cover;
    background-position: center;
}

.profile-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid var(--white-color);
    margin-top: -79px;
    object-fit: cover;
}

.btn-custom {
    background-color: var(--primary-color);
    color: var(--white-color);
    border: none;
    font-size: 15px;
    font-weight: 400;
    padding: 0.8rem 1.8rem;
    letter-spacing: 1px;
    border-radius: 6px !important;
    transition: all 0.3s ease;
}

.btn-custom:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
}

.cards {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}


/* == Cards profile == */

.headingBox {
    background-color: var(--primary-color) !important;
    color: var(--white-color) !important;
    padding: 10px;
}

.heading-content {
    font-display: 17px;
    font-weight: 500;
}

.inner-content button {
    width: 100%;
    height: 46px;
    background-color: var(--secondary-color) !important;
    color: var(--white-color) !important;
    border: var(--secondary-color);
    font-size: 15px;
    font-weight: 400;
    transition: all 0.3s ease;
    cursor: pointer;
}

.inner-content button:hover {
    background-color: var(--hover-color) !important;
    color: var(--white-color);
    border: var(--hover-color);
}

.inner-content i {
    font-size: 19px;
    font-weight: 400;
    color: var(--white-color) !important;
}


/* === media Query (Responsive) === */


@media (max-width: 767.98px) {
    .profile-card .card-body {
        padding-left: 0;
        padding-right: 0;
    }

    .d-flex.align-items-center.mt-n5.ps-4 {
        justify-content: center;
        padding-left: 0 !important;
        text-align: center;
    }
}