/*====================================================
        COMPONENTS.CSS
        INDOVARIS TECHNOLOGIES PVT LTD
======================================================*/

/*=========================
        CARDS
==========================*/

.card{

    background:#ffffff;

    border-radius:20px;

    padding:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 60px rgba(37,99,235,.18);

}

/*=========================
        SECTION TITLE
==========================*/

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title span{

    display:inline-block;

    color:#2563EB;

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.section-title h2{

    font-size:48px;

    margin-bottom:20px;

}

.section-title p{

    max-width:850px;

    margin:auto;

}

/*=========================
        BUTTONS
==========================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 38px;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

    cursor:pointer;

}

.btn-primary{

    background:#2563EB;

    color:#ffffff;

}

.btn-primary:hover{

    background:#1E40AF;

}

.btn-outline{

    border:2px solid #2563EB;

    color:#2563EB;

}

.btn-outline:hover{

    background:#2563EB;

    color:#ffffff;

}

/*=========================
        BADGES
==========================*/

.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#DBEAFE;

    color:#2563EB;

    font-size:13px;

    font-weight:700;

}

/*=========================
        ICON BOX
==========================*/

.icon-box{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:#EFF6FF;

    margin-bottom:25px;

}

.icon-box img{

    width:42px;

}

/*=========================
        LISTS
==========================*/

.check-list{

    margin-top:25px;

}

.check-list li{

    margin-bottom:15px;

    padding-left:30px;

    position:relative;

}

.check-list li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#10B981;

}

/*=========================
        FORM
==========================*/

.form-group{

    margin-bottom:25px;

}

.form-control{

    width:100%;

    padding:16px;

    border:1px solid #D1D5DB;

    border-radius:12px;

    font-size:16px;

    transition:.3s;

}

.form-control:focus{

    outline:none;

    border-color:#2563EB;

    box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

textarea.form-control{

    resize:vertical;

    min-height:180px;

}

/*=========================
        TAGS
==========================*/

.tag{

    display:inline-block;

    padding:8px 15px;

    margin:5px;

    background:#F1F5F9;

    border-radius:30px;

    font-size:14px;

}

/*=========================
        ALERTS
==========================*/

.alert{

    padding:18px 22px;

    border-radius:12px;

    margin-bottom:20px;

}

.alert-success{

    background:#DCFCE7;

    color:#166534;

}

.alert-danger{

    background:#FEE2E2;

    color:#991B1B;

}

.alert-warning{

    background:#FEF3C7;

    color:#92400E;

}

/*=========================
        TABLE
==========================*/

.table{

    width:100%;

    border-collapse:collapse;

}

.table th{

    background:#2563EB;

    color:#ffffff;

    padding:16px;

}

.table td{

    padding:16px;

    border-bottom:1px solid #E5E7EB;

}

.table tr:hover{

    background:#F8FAFC;

}

/*=========================
        MODAL
==========================*/

.modal{

    position:fixed;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.6);

    z-index:9999;

}

.modal-content{

    width:700px;

    max-width:95%;

    background:#ffffff;

    border-radius:20px;

    padding:40px;

}

/*=========================
        LOADER
==========================*/

.spinner{

    width:60px;

    height:60px;

    border:6px solid #E5E7EB;

    border-top:6px solid #2563EB;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    100%{

        transform:rotate(360deg);

    }

}

/*=========================
        BACK TO TOP
==========================*/

.back-to-top{

    position:fixed;

    right:25px;

    bottom:25px;

    width:55px;

    height:55px;

    background:#2563EB;

    color:#ffffff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    opacity:0;

    visibility:hidden;

    transition:.35s;

}

.back-to-top.active{

    opacity:1;

    visibility:visible;

}