/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap'); */



@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
/* ===== LAYOUT ===== */
.section-padding {@apply sm:py-16 py-10;}
.container { @apply mx-auto !max-w-[1280px] px-4; }

/* ===== HEADINGS ===== */
.banner-title {@apply text-4xl md:text-5xl font-extrabold text-slate-900 !leading-[1.2] mb-4;}
.section-title {@apply text-4xl font-bold text-slate-900 mb-2 leading-tight;}
.title-tagline{@apply text-lg text-slate-500 leading-relaxed mb-6}
.features-title{@apply text-xl font-bold text-slate-900 mb-3}

/* ===== BUTTON ===== */
.btn-primary { @apply bg-brand hover:bg-[#5341b3] text-white sm:px-8 p-3 py-4 sm:text-[16px] text-sm rounded-xl font-bold shadow-lg shadow-brand/25 transition-all inline-flex items-center gap-2;}
.btn-outline {@apply border border-slate-300 hover:border-brand sm:px-8 p-3 py-4 sm:text-[16px] text-sm rounded-xl font-semibold transition-all;}

/* ===== ICON & BOX DESIGN ===== */
.feature-row {@apply flex items-start gap-5;}
.icon-box {@apply w-12 h-12 bg-slate-50 border rounded-2xl flex items-center justify-center border-slate-200 hover:bg-brand hover:text-white group-hover:bg-brand group-hover:text-white hover:border-brand transition-all duration-300 flex-shrink-0;}
.icon-img-box {@apply w-12 h-12 flex items-center justify-center flex-shrink-0;}
.card-default {@apply flex-shrink-0 p-8 bg-white border border-slate-100 hover:border-brand/60 rounded-xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-500 flex flex-col;}

/* ===== TABLE DESIGN ===== */
@layer components {
.table_design{@apply relative overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-xl shadow-slate-200/50}
.table_design::-webkit-scrollbar {@apply h-2; }
.table_design::-webkit-scrollbar-thumb {@apply bg-brand/30 rounded-full transition-colors;}
.table_design::-webkit-scrollbar-thumb:hover {@apply bg-brand/60; }
.table_design table{@apply w-full text-left border-separate border-spacing-0}
.table_design table thead{@apply bg-slate-50/80 backdrop-blur-sm whitespace-nowrap}
.table_design table thead th{@apply px-6 py-5 text-[11px] font-black text-slate-500 uppercase tracking-[0.1em] text-center border-b border-r !border-slate-200}
.table_design table tbody tr{@apply hover:bg-slate-50/80 transition-all duration-200}
.table_design table tbody td{@apply sm:px-6 p-2 sm:py-5 text-sm text-slate-600 text-center border-b-2 border-r !border-slate-100 group-hover:text-slate-900 }}
}    

body {
    font-family: "Montserrat", sans-serif !important;
    /* font-family: 'Inter' !important; */
    margin: 0;
    padding: 0;
    font-weight: normal;
}


.card-glow:hover {
    box-shadow: 0 8px 30px rgb(99 102 241 / .15);
    transform: translateY(-2px)
}

.small-logo img {
    width: 200px !important
}

.img-width img {
    width: 45px
}

ul.data-center li {
    list-style: none;
    display: flex;
    align-items: center
}

ul.data-center li span {
    font-size: 14px;
    padding: 0 10px;
    font-weight: 600
}

ul.data-center {
    margin: 0;
    padding: 0;
    width: 100%;
    display: inline-flex
}

ul.point-list li {
    padding: 5px 0
}

ul.point-list {
    list-style: disc;
    padding: 0 0 0 25px
}

.footer-logo img {
    width: 150px
}

.text-purple {
    color: #5b3df5
}

.flex-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    text-align: left
}

.info-side {
    flex: 1
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px
}

.icon-circle {
    width: 30px;
    height: 30px;
    background: #5b3df5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: #fff;
    font-size: 12px;
    margin-top: 3px
}

.info-text h3 {
    color: #000;
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 600
}

.info-text p {
    font-size: .9rem;
    color: #000
}

.form-side {
    flex: 1;
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    color: #333
}

.input-group {
    margin-bottom: 20px;
    position: relative
}

.input-group input,
.input-group select,
.input-group textarea {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #333;
    outline: none;
    font-size: 1rem;
    background: #fff0
}

.input-group select {
    color: #666;
    cursor: pointer
}

.send-btn {
    width: 100%;
    padding: 12px;
    background-color: #6450ca;
    color: #fff;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s;
    border-radius: 6px
}

.send-btn:hover {
    background-color: #816cf0
}

.login-container {
    display: flex;
    gap: 10px;
    margin: 20px auto;
    font-family: sans-serif
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    color: #fff;
    width: 100%
}

.small-logo-dash img {
    width: 110px;
    margin: 11px auto
}

.btn i {
    margin-right: 10px
}

.btn:hover {
    opacity: .9
}

.btn-google,
.btn-facebook,
.btn-linkedin,
.btn-github {
    background-color: #6450ca
}

.btn-google {
    background: #4285f4
}

.btn-facebook {
    background: #4267B2
}

.btn-github {
    background: #1DA1F2
}

.btn-linkedin {
    background: #0077B5
}

.heading-main-bg {
    background: #ebe7ff;
    padding: 2px 50px 2px 10px;
    font-weight: 600;
    font-size: 25px;
    clip-path: polygon(0 1%, 100% 0, 85% 100%, 0% 100%);
    width: fit-content;
    min-width: 200px
}

.range-thumb::-webkit-slider-thumb {
    appearance: none;
    pointer-events: all;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 2px solid #6366f1;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 1px 3px rgb(0 0 0 / .1)
}

.range-thumb::-moz-range-thumb {
    pointer-events: all;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border: 2px solid #6366f1;
    border-radius: 50%;
    cursor: pointer
}

.table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px
}

table {
    width: 100%;
    border-collapse: collapse;
    text-align: left
}

thead {
    background-color: #fff;
    border-bottom: 1px solid var(--border-color)
}

th {
    padding: 16px;
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px
}

td {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 14px;
    vertical-align: middle
}

tr:last-child td {
    border-bottom: none
}

tr:hover {
    background-color: var(--bg-hover)
}

.gpu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f0f7ff;
    border-radius: 4px;
    margin-right: 12px;
    color: var(--accent-blue)
}

.gpu-name-cell {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: var(--text-bold)
}

.price-text {
    font-weight: 700;
    color: var(--text-bold)
}

.details-btn {
    background: #fff0;
    border: 1px solid #dcdfe6;
    padding: 8px 16px;
    border-radius: 4px;
    color: var(--text-main);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s
}

.details-btn:hover {
    border-color: var(--accent-blue);
    color: var(--accent-blue);
    background-color: #ecf5ff
}

@media (max-width:768px) {

    th,
    td {
        padding: 10px;
        font-size: 12px
    }
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out
}

.accordion-content.active {
    max-height: 500px;
    transition: max-height 0.4s ease-in
}

.search-highlight {
    background-color: #fef08a;
    font-weight: 600
}

.email-sent-alert {
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    color: #004a75;
    padding: 12px 16px;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 12px;
    font-weight: 500
}

@media (max-width:1280px) {
    .font-13 {
        font-size: 17px !important
    }
}

@media (max-width:991px) {
    #header img {
        width: 120px
    }

    ul.data-center {
        width: 100%
    }

    .form-side {
        width: 100%
    }

    .info-side {
        flex: 1;
        width: 100%
    }
}

@media (max-width:768px) {
    .flex-wrapper {
        flex-direction: column
    }

    .info-side {
        margin-bottom: 0
    }
}

#toast-container>.toast-success {
    background-color: #6450ca !important
}

#toast-container>.toast-error {
    background-color: #ef4444 !important
}

.selectCountryClass:hover {
    border-color: #60a5fa
}

/* new font */

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-Bold.woff2') format('woff2'),
        url('./fonts/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-ExtraBold.woff2') format('woff2'),
        url('./fonts/Montserrat-ExtraBold.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-Light.woff2') format('woff2'),
        url('./fonts/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-Medium.woff2') format('woff2'),
        url('./fonts/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-Regular.woff2') format('woff2'),
        url('./fonts/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-SemiBold.woff2') format('woff2'),
        url('./fonts/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat-Thin.woff2') format('woff2'),
        url('./fonts/Montserrat-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}