/* ==========================================
   GLOBAL STYLES
   UFF BHABHI OTT
========================================== */

/* ===========================
   BODY SPACING
=========================== */

body{

    min-height:100vh;
    background:var(--body-bg);

    transition:

        background .55s ease,

        color .35s ease;

}

/* ===========================
   MAIN
=========================== */

main{

    position:relative;

    width:100%;

    overflow:hidden;

}

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

section{

    position:relative;

    padding:80px 0;

}

/* Hero spacing because navbar is fixed */

.hero{

    padding-top:120px;

}

/* ===========================
   TITLES
=========================== */

.section-title{

    font-size:34px;

    font-weight:700;

    margin-bottom:14px;

}

.section-subtitle{

    color:var(--text-light);

    font-size:16px;

    margin-bottom:40px;

}

/* ===========================
   SPACING UTILITIES
=========================== */

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}
.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}
.mb-5{margin-bottom:60px;}

/* ===========================
   FLEX UTILITIES
=========================== */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* ===========================
   GRID
=========================== */

.grid{

    display:grid;

    gap:24px;

}

/* ===========================
   TEXT
=========================== */

.text-center{

    text-align:center;

}

/* ===========================
   HOVER
=========================== */

.hover-up{

    transition:.35s;

}

.hover-up:hover{

    transform:translateY(-6px);

}

/* ===========================
   HIDDEN
=========================== */

.hidden{

    display:none;

}