/*======================================================

The IdeaGen Technologies

File :
layout.css

Version :
1.0

======================================================*/


/*======================================================
                    CONTAINER
======================================================*/

.container{

    width:min(92%,var(--container));

    margin-inline:auto;

}


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

.section{

    padding:var(--space-10) 0;

    position:relative;

}

.section-sm{

    padding:var(--space-8) 0;

}

.section-lg{

    padding:180px 0;

}


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

.grid{

    display:grid;

    gap:40px;

}

.grid-2{

    grid-template-columns:repeat(2,1fr);

}

.grid-3{

    grid-template-columns:repeat(3,1fr);

}

.grid-4{

    grid-template-columns:repeat(4,1fr);

}


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

.flex{

    display:flex;

}

.items-center{

    align-items:center;

}

.justify-center{

    justify-content:center;

}

.justify-between{

    justify-content:space-between;

}

.flex-column{

    flex-direction:column;

}

.wrap{

    flex-wrap:wrap;

}

.gap-10{

    gap:10px;

}

.gap-20{

    gap:20px;

}

.gap-30{

    gap:30px;

}

.gap-40{

    gap:40px;

}

.gap-60{

    gap:60px;

}


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

.section-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}

.section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:13px;

    margin-bottom:18px;

}

.section-title{

    font-size:clamp(2.4rem,4vw,4rem);

    line-height:1.1;

    margin-bottom:25px;

    color:var(--heading);

}

.section-description{

    font-size:18px;

    color:var(--muted);

    line-height:1.8;

}


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

.mt-20{

    margin-top:20px;

}

.mt-40{

    margin-top:40px;

}

.mt-60{

    margin-top:60px;

}

.mt-80{

    margin-top:80px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

.mb-80{

    margin-bottom:80px;

}


/*======================================================
                    BACKGROUNDS
======================================================*/

.bg-light{

    background:var(--background);

}

.bg-white{

    background:var(--white);

}

.bg-primary{

    background:var(--primary);

}

.bg-dark{

    background:var(--heading);

}


/*======================================================
                    WIDTH
======================================================*/

.w-100{

    width:100%;

}

.max-600{

    max-width:600px;

}

.max-800{

    max-width:800px;

}

.max-1000{

    max-width:1000px;

}


/*======================================================
                    POSITION
======================================================*/

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.overflow-hidden{

    overflow:hidden;

}


/*======================================================
                    IMAGE WRAPPER
======================================================*/

.image-box{

    overflow:hidden;

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}

.image-box img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s ease;

}

.image-box:hover img{

    transform:scale(1.05);

}


/*======================================================
                    DIVIDER
======================================================*/

.divider{

    width:80px;

    height:4px;

    border-radius:20px;

    background:var(--primary);

    margin-top:25px;

}


/*======================================================
                    BLUR
======================================================*/

.blur-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:-1;

}

.blur-blue{

    width:420px;

    height:420px;

    background:rgba(37,99,235,.20);

}

.blur-light{

    width:320px;

    height:320px;

    background:rgba(96,165,250,.18);

}


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

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#EFF6FF;

    color:var(--primary);

    font-weight:700;

    font-size:14px;

}


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

.hover-up{

    transition:var(--transition);

}

.hover-up:hover{

    transform:translateY(-8px);

}


/*======================================================
                    Z INDEX
======================================================*/

.z-1{

    z-index:1;

}

.z-2{

    z-index:2;

}

.z-3{

    z-index:3;

}

.z-10{

    z-index:10;

}