/* =====================================================
   GLOBAL CSS
   Creative Institute Website
   Version : 1.0
====================================================== */


/* =====================================================
   GOOGLE FONT
====================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');


/* =====================================================
   RESET
====================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
    font-size:16px;

}

body{

    font-family:'Poppins',sans-serif;
    background:var(--background);
    color:#000000;
    overflow-x:hidden;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;

}


/* =====================================================
   ROOT VARIABLES
====================================================== */

:root {

    /* =========================
       FEATURE FRAMES COLORS
    ========================= */

    --primary: #F99B1D;
    --secondary: #000000;
    --accent: #F99B1D;

    --background: #FFFFFF;
    --surface: #F7F7F7;
    --card: #FFFFFF;

    --white: #FFFFFF;
    --black: #000000;

    --gray100: #F5F5F5;
    --gray200: #E5E5E5;
    --gray300: #D4D4D4;
    --gray400: #737373;
    --gray500: #525252;


    /* =========================
       GRADIENTS
    ========================= */

    --gradient1:
    linear-gradient(
        135deg,
        #F99B1D,
        #FFB52E
    );

    --gradient2:
    linear-gradient(
        135deg,
        #000000,
        #F99B1D
    );


    /* =========================
       SHADOWS
    ========================= */

    --shadow-sm:
    0 10px 25px rgba(0,0,0,.10);

    --shadow-md:
    0 20px 40px rgba(0,0,0,.15);

    --shadow-lg:
    0 30px 60px rgba(0,0,0,.20);


    /* =========================
       RADIUS
    ========================= */

    --radius-sm:10px;
    --radius:18px;
    --radius-lg:28px;


    /* =========================
       TRANSITION
    ========================= */

    --transition:.35s ease;

}


/* =====================================================
   TYPOGRAPHY
====================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    line-height:1.2;

}

h1{

    font-size:4.5rem;

}

h2{

    font-size:3rem;

}

h3{

    font-size:1.7rem;

}

p{

    color:var(--gray400);

}

span{

    display:inline-block;

}

img{

    max-width:100%;
    display:block;

}

a{

    color:inherit;
    text-decoration:none;

}

ul{

    list-style:none;

}


/* =====================================================
   SELECTION
====================================================== */

::selection{

    background:var(--primary);
    color:#fff;

}


/* =====================================================
   SCROLLBAR
====================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#FFFFFF;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);
    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--secondary);

}


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

.container{

    width:min(1280px,92%);
    margin:auto;

}


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

.section{

    padding:120px 0;
    position:relative;

}

/* ==========================================================
   FEATURE FRAMES - UNIVERSAL SECTION TITLE THEME
   Works for ALL section title boxes
========================================================== */

.section-title{
    text-align:center;
    margin-bottom:80px;
}

/* Small title - Our Courses / FAQ / About Us etc. */
.section-title span{
    display:block;
    width:100%;
    color:#F99B1D;
    font-weight:600;
    letter-spacing:3px;
    margin-bottom:10px;
}

/* Main heading - orange box with white text */
.section-title h2{
    display:table;
    margin:0 auto 20px auto;

    background:#F99B1D;
    color:#FFFFFF;

    padding:4px 12px;
}

/* Description below the orange box */
.section-title p{
    max-width:700px;
    margin:auto;
    color:#000000;
}


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

.btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:16px 34px;

    border-radius:50px;

    cursor:pointer;

    transition:var(--transition);

    font-weight:600;

    gap:10px;

}

.btn-primary{

    background:var(--gradient1);

    color:#fff;

    box-shadow:

    0 15px 30px rgba(249,155,29,.35);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

    0 25px 50px rgba(249,155,29,.45);

}

.btn-outline{

    border:2px solid rgba(0,0,0,.15);

    backdrop-filter:blur(10px);

    color:#000000;

}

.btn-outline:hover{

    background:#0000000D;

}


/* =====================================================
   GLASS CARD
====================================================== */

.glass{

    background:

    rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    border:

    1px solid rgba(0,0,0,.08);

    border-radius:var(--radius);

}


/* =====================================================
   COMMON CARD
====================================================== */

.card{

    background:var(--card);

    border-radius:var(--radius);

    padding:35px;

    transition:var(--transition);

    border:

    1px solid rgba(0,0,0,.05);

}

.card:hover{

    transform:translateY(-10px);

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

}


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

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.space-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


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

.grid{

    display:grid;

    gap:30px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}


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

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

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

.pt-1{padding-top:20px;}
.pt-2{padding-top:40px;}
.pt-3{padding-top:60px;}

.pb-1{padding-bottom:20px;}
.pb-2{padding-bottom:40px;}
.pb-3{padding-bottom:60px;}


/* =====================================================
   BACKGROUND HELPERS
====================================================== */

.bg-dark{

    background:var(--background);

}

.bg-surface{

    background:var(--surface);

}

.bg-gradient{

    background:

    linear-gradient(
        135deg,
        #FFFFFF 0%,
        #F7F7F7 50%,
        #FFFFFF 100%
    );

}

.bg-primary{

    background:var(--gradient1);

}

.bg-secondary{

    background:var(--gradient2);

}


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

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

.text-primary{

    color:var(--primary);

}

.text-secondary{

    color:var(--secondary);

}

.text-accent{

    color:var(--accent);

}

.text-white{

    color:#fff;

}

.text-gray{

    color:var(--gray400);

}


/* =====================================================
   BORDER RADIUS
====================================================== */

.rounded{

    border-radius:var(--radius);

}

.rounded-lg{

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

}

.rounded-full{

    border-radius:50%;

}


/* =====================================================
   SHADOW HELPERS
====================================================== */

.shadow-sm{

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

}

.shadow-md{

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

}

.shadow-lg{

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

}


/* =====================================================
   IMAGE HELPERS
====================================================== */

.img-cover{

    width:100%;
    height:100%;
    object-fit:cover;

}

.img-contain{

    width:100%;
    height:100%;
    object-fit:contain;

}


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

input,
textarea,
select{

    width:100%;

    padding:16px 20px;

    background:#FFFFFF;

    border:1px solid rgba(0,0,0,.12);

    border-radius:14px;

    color:#000000;

    font-family:Poppins,sans-serif;

    transition:.3s;

    outline:none;

}

textarea{

    resize:none;

}

input:focus,
textarea:focus,
select:focus{

    border-color:var(--primary);

    box-shadow:
    0 0 20px rgba(249,155,29,.25);

}


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

.hover-lift{

    transition:.35s;

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:.35s;

}

.hover-scale:hover{

    transform:scale(1.05);

}

.hover-glow{

    transition:.35s;

}

.hover-glow:hover{

    box-shadow:
    0 0 40px rgba(249,155,29,.45);

}


/* =====================================================
   ANIMATIONS
====================================================== */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(60px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;
        transform:translateX(-60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;
        transform:translateX(60px);

    }

    to{

        opacity:1;
        transform:translateX(0);

    }

}

@keyframes zoomIn{

    from{

        opacity:0;
        transform:scale(.8);

    }

    to{

        opacity:1;
        transform:scale(1);

    }

}

@keyframes float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes rotateSlow{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 rgba(249,155,29,.2);

    }

    50%{

        box-shadow:0 0 35px rgba(249,155,29,.6);

    }

    100%{

        box-shadow:0 0 0 rgba(249,155,29,.2);

    }

}
/* =====================================================
   ANIMATION CLASSES
====================================================== */

.fade-up{

    animation:fadeUp .8s ease both;

}

.fade-left{

    animation:fadeLeft .8s ease both;

}

.fade-right{

    animation:fadeRight .8s ease both;

}

.zoom-in{

    animation:zoomIn .8s ease both;

}

.float{

    animation:float 5s ease-in-out infinite;

}

.rotate{

    animation:rotateSlow 20s linear infinite;

}

.glow{

    animation:pulseGlow 3s infinite;

}


/* =====================================================
   DIVIDERS
====================================================== */

.divider{

    width:100%;

    height:1px;

    background:

    rgba(0,0,0,.08);

}


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

.blur-circle{

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.20;

    z-index:-1;

}

.blur-blue{

    background:#F99B1D;

}

.blur-purple{

    background:#F99B1D;

}

.blur-pink{

    background:#F99B1D;

}


/* =====================================================
   RESPONSIVE
====================================================== */

@media(max-width:1200px){

    h1{

        font-size:3.8rem;

    }

    h2{

        font-size:2.6rem;

    }

}


@media(max-width:992px){

    .grid-4{

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

    }

    .grid-3{

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

    }

}


@media(max-width:768px){

    html{

        font-size:15px;

    }

    .section{

        padding:40px 0;

    }

    h1{

        font-size:2.8rem;

    }

    h2{

        font-size:2.1rem;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .btn{

        width:100%;

    }

}


@media(max-width:576px){

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.8rem;

    }

    .container{

        width:94%;

    }

}


/* =====================================================
   REDUCE SPACING BETWEEN HOMEPAGE SECTIONS
====================================================== */

section.section {

    padding-top:50px !important;
    padding-bottom:50px !important;

}

section.section + section.section {

    margin-top:0 !important;

}