/* Custom styles for the Inter font */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f7f9fb;
    padding-top: 100px;
}

/* Adds space above any element targeted by an anchor link */
main, section {
    scroll-margin-top: 120px; 
}

/* Bootstrap equivalent for the card custom style - ensuring equal height and transition */
.card {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    border-left: 0.25rem solid transparent;
}

/* --- HOVER EFFECTS: Server Cards (Individual Colors) --- */

/* Base/VM Card (Light Blue) */
.card-srv:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-left-color: #4fbbfa; /* Light Blue */
}

/* Desktop Card (Red: #FF0000) */
.card-srv-red:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-left-color: #FF0000; 
}

/* Gen6 Card (Orange: #FF7F00) */
.card-srv-orange:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-left-color: #FF7F00; 
}

/* Gen8 Card (Yellow: #FFFF00) */
.card-srv-yellow:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-left-color: #FFFF00; 
}

/* Gen9 Card (Green: #00FF00) */
.card-srv-green:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-left-color: #00FF00; 
}

/* Gen10 Card (Dark Blue: #0000FF) */
.card-srv-darkblue:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-left-color: #0000FF; 
}

/* Upgrade Card (Indigo: #4B0082) */
.card-srv-indigo:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    border-left-color: #4B0082; 
}


/* Scrollbar styles */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Grid layout for cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    max-width: 1800px;
    margin: 0 auto;
    padding: 40px 20px;
}

@media (max-width: 1600px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr); 
    }
}

@media (max-width: 1200px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: 1fr; 
    }
}

/* Custom card domains/partner styles */
.card-domains,
.card-partner {
    min-height: 0;
    padding: 1rem !important;
    border-left: 0.25rem solid transparent;
}


/* --- MODIFIED PARTNER CARD STYLES --- */
.card-partner {
    min-height: 80px;
    padding: 1rem !important; /* Increased padding */
}

.card-partner .h6 {
    font-size: 1rem;
}
.card-partner .small {
    font-size: 1rem;
    line-height: 1.2rem;
}
.card-partner i {
    font-size: 2rem;
}

.card-domains {
    min-height: 175px !important;
}

/* --- Dark Mode Styles --- */
.dark-mode {
    background-color: #121212 !important;
    color: #e0e0e0;
}

.dark-mode .text-body {
    color: #e0e0e0 !important;
}

.dark-mode .text-dark {
    color: #e0e0e0 !important;
}

.dark-mode .text-secondary,
.dark-mode .text-muted,
.dark-mode a.text-secondary {
    color: #a0a0a0 !important;
}

.dark-mode .bg-white {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

.dark-mode .card,
.dark-mode header,
.dark-mode footer {
    border-color: #333333 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dark-mode .text-primary {
    color: #79c5ff !important;
}

.dark-mode .btn-primary {
    --bs-btn-bg: #4fbbfa;
    --bs-btn-border-color: #4fbbfa;
}

.dark-mode .btn-outline-primary {
    --bs-btn-color: #79c5ff;
    --bs-btn-border-color: #79c5ff;
    --bs-btn-hover-bg: #79c5ff;
    --bs-btn-hover-border-color: #79c5ff;
}

/* Custom styles for the dropdown menu */
.dropdown-item .lang-label {
    /* Ensures the text is consistently positioned whether the icon is visible or hidden */
    display: inline-block;
    width: calc(100% - 30px); 
}

/* Dark Mode Dropdown Styling */
.dark-mode .dropdown-menu {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}
.dark-mode .dropdown-item {
    color: #e0e0e0 !important;
}
.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: #333333 !important;
}
.dark-mode .dropdown-header {
    color: #a0a0a0 !important;
}