:root{
    --color-primary: #059DFF;
    --color-secondary: #FB5343;
    --color-tertiary: #6549D5;
    --color-pink: #E33FA1;
    --color-lessdark: #1e1e1e;
    --color-dark: #060606;
    --color-darker: rgba(6, 6, 6, 0.7);
    --color-blackest: #0f0f11;
    --img-bg-dark: #0f0f11;
    --color-white: #ffffff;
    --color-white-2: #f7f7f7;
    --color-body: #acacac;
    --color-light-green: #36C6F0;
    --color-border: #ffffff1a;
    --color-currency: #3e3e40;
    --color-white-secondary: #fdeeee;

    /* gradient */
    --default-gradient: linear-gradient(95deg, var(--color-primary) 15%, var(--color-tertiary) 45%, var(--color-pink) 75%, var(--color-secondary) 100%) 95% / 200% 100%;

    /* transition */
    --basic-transition: all 0.2s linear;

    /* shadows */
    --btn-box-shadow: 0px 10px 10px 0px rgb(34, 34, 34);
}

html{
    scroll-behavior: smooth;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
*[class^="col-"]{
    padding: 0 12px;
}


/* ============================= GENERAL PRESET ============================= */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: "Inter 18pt", sans-serif;
}

body{
    background-color: var(--color-dark);
    color: var(--color-white);
}
body.dark{
    background-color: var(--color-white);
    color: var(--color-dark);
}

.container{
    max-width: 1320px;
    margin: auto;
    
    /* border: 1px solid white; */
}

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

.text-grad{
    background: var(--default-gradient);
    text-transform: capitalize;
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
.text-center{
    text-align: center;
}
.line-height{
    line-height: 2;
}
.line-height-s{
    line-height: 1.8;
}

/*=============== FLEXBOX ===============*/

.flex{
    display: flex;
}
.wrap{
    flex-wrap: wrap;
}
.justify-between{
    justify-content: space-between;
}
.justify-around{
    justify-content: space-around;
}
.justify-center{
    justify-content: center;
}
.align-start{
    align-items: start;
}
.align-center{
    align-items: center;
}
.flex-column{
    flex-direction: column;
}

/*=============== GAP ===============*/
.gap-10{
    gap: 10px;
}
.gap-15{
    gap: 15px;
}
.gap-20{
    gap: 20px;
}
.gap-30{
    gap: 30px;
}
.gap-35{
    gap: 35px;
}
.gap-40{
    gap: 40px;
}

.pad-50{
    padding: 50px 0;
}
.pad-100{
    padding: 100px 0;
}


/* ===========================REUSABLES============================= */
.btn{
    background: var(--default-gradient);
    color: var(--color-white);
    border: transparent;
    cursor: pointer;
    transition: var(--basic-transition);
}
.btn:hover{
    filter: brightness(125%);
    transform: translateY(-3px);
    box-shadow: var(--btn-box-shadow);
}
.btn:active{
    transform: translateY(2px);
    box-shadow: none;
}

/* section top */

.section-top{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.section-sub-title-bg{
    background-color: var(--color-blackest);
    padding: 3px 15px;
    border-radius: 8px;
}
body.dark .section-sub-title-bg{
    background-color: var(--color-white);
}
.section-sub-title-bg p{
    background: var(--default-gradient);
    text-transform: capitalize;
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.section-top p{
    color: var(--color-body);
    font-size: 18px;
    text-align: center;
    line-height: 1.8;
}
body.dark .section-top p{
    color: var(--color-darker);
}

.section-title{
    font-size: 44px;
    font-weight: 600;
    text-align: center;
}
/* ==========================REUSABLES END============================ */

/* ==========================BG-THEME START============================ */

.bg-theme{
    position: fixed;
    left: -250px;
    top: 250px;
    right: auto;
    bottom: auto;
    z-index: -1;
    width: 500px;
    height: 500px;
    border-radius: 1000px;
    background-image: linear-gradient(45deg, var(--color-primary), var(--color-light-green));
    opacity: 0.25;
    -webkit-filter: blur(100px);
    filter: blur(100px);
}
.bg-theme-pink{
    top: -150px;
    position: fixed;
    height: 500px;
    width: 500px;
    border-radius: 50%;
    right: -150px;
    background: linear-gradient(45deg, var(--color-secondary), var(--color-tertiary));
    filter: blur(100px);
    opacity: 0.25;
    z-index: -1;
}

/* ==========================BG-THEME START============================ */

/* ==========================HEADER START============================ */

header{
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: var(--color-darker);
}
body.dark header{
    background-color: var(--color-white);
}

.nav-container{
    padding: 12px 12px;
}

.logo{
    cursor: pointer;
    transition: var(--basic-transition);
}

.logo img:hover{
    scale: 1.02;
}
.logo img:active{
    scale: 0.98;
}

.nav-ul-items li a{
    color: var(--color-body);
    font-weight: 500;
    transition: var(--basic-transition);
}

body.dark .nav-ul-items li a{
    color: var(--color-darker);
}

.nav-ul-items li a.light-theme{
    filter: brightness(50%);
}
.nav-ul-items li a:hover{
    color: var(--color-primary);
}
body.dark .nav-ul-items li a:hover{
    color: var(--color-primary);
}
.nav-ul-items li:active{
    scale: 0.90;
}


.nav-buy-btn{
    border-radius: 8px;
    font-weight: 600;
    padding: 13px 25px;
}

.nav-theme-btn{
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 10px;
    border-radius: 50%;
    border: transparent;
    cursor: pointer;
    text-transform: uppercase;
    transition: var(--basic-transition);
}

.nav-theme-btn:hover{
    background-color: var(--color-pink);
    transform: translateY(-3px);
    box-shadow: var(--btn-box-shadow);
}
.nav-theme-btn:active{
    transform: translateY(2px);
    box-shadow: none;
}

.nav-theme-btn i{
    font-size: 20px;
}

.nav-toggle-btn {
    display: none; /* Hide by default */
}
body.dark .nav-toggle-btn i{
    color: var(--color-blackest);
}
.nav-toggle-btn:hover{
    font-weight: bold;
}
.nav-toggle-btn:active{
    font-weight: 300;
    scale: 0.98;
}



/* ==========================HEADER END============================ */















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

/* ==========================top btn============================ */
.top-btn{
    position: fixed;
    background-color: var(--color-blackest);
    padding: 10px;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--basic-transition);
}
body.dark .top-btn{
    background-color: var(--color-primary);
}
.top-btn:hover{
    filter: brightness(125%);
}
.top-btn i{
    font-size: 25px;
    color: var(--color-white);
}

/* ==========================SECTION 1 - HERO START============================ */

.hero-container{
    flex-wrap: wrap-reverse;
}

.hero-left h1 {
    font-size: 130px;
}

.hero-left p {
    font-size: 22px;
    color: var(--color-body);
}

body.dark .hero-left p{
    color: var(--color-darker);
}

.hero-left button {
    padding: 20px 40px;
    font-size: 16px;
    border-radius: 10px;
}

.hero-right img{
    scale: 0.8;
}
.model-image{
    position: relative;
}
.model-image::before{
    content: "";
    position: absolute;
    height: 80%;
    width: 80%;
    bottom: 11%;
    left: 10%;

    background-color: var(--color-lessdark);
    opacity: 0.3;
}
body.dark .model-image::before{
    background-color: var(--color-white-2);
}


/* ==========================SECTION 1 - HERO END============================ */



/* ==========================SECTION 2 - ABOUT START============================ */

.about-left img{
    scale: 0.8;
}
.about-top{
    align-items: center;
    margin-bottom: 80px;
}

/* about nav buttons */
.about-nav{
    overflow: hidden;
}

.about-nav-top button{
    padding: 30px 40px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: white;
    font-size: 18px;
}

.about-nav-top button.active{
    background-color: var(--color-blackest);
    color: var(--color-white);
}

body.dark .about-nav-top button{
    background-color: var(--color-border);
    color: var(--color-darker);
}

body.dark .about-nav-top button.active{
    background-color: var(--color-white-secondary);
}

/* about information */
.about-info{
    background-color: var(--color-blackest);
    padding: 40px 30px;
    color: var(--color-body);
}

body.dark .about-info{
    background-color: var(--color-white-secondary);
    color: var(--color-lessdark);
}

/* ==========================SECTION 2 - ABOUT END============================ */

/* ==========================SECTION 3 - TIMELINE START============================ */

.timeline-container{
    align-items: center;
}

.timeline-bottom{
    background-color: var(--color-blackest);
    padding: 40px 0px;
    border-radius: 20px;
    width: 90%;
}
body.dark .timeline-bottom{
    background-color: var(--color-white-secondary);
}

.timeline-card{
    /* border: 1px solid white; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.timeline-card p{
    text-align: center;
    color: var(--color-body);
}

body.dark .timeline-card p{
    color: var(--color-darker);
}

.timeline-card h1{
    font-size: 20px;
}

.dot{
    height: 10px;
    width: 10px;
    background-color: var(--color-primary);
    filter: brightness(500%);
    border-radius: 50%;
    position: relative;
    z-index: 10;
}

.dot::before{
    content: "";
    background-color: var(--color-dark);
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 50%;
    filter: opacity(0.9);
    bottom: 0;
    right: 0;
    transform: translate(35%, 35%);
}
body.dark .dot::before{
    background-color: var(--color-dark);
}

.progress::after{
    content: "";
    height: 15px;
    width: 300px; 
    background-color: var(--color-dark);
    filter: opacity(0.9);
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(100%, 20%);
}
body.dark .progress::after{
    background-color: var(--color-dark);
}

/* ==========================SECTION 3 - TIMELINE END============================ */

/* ==========================SECTION 4 - FAQ START============================ */

.faq-left img{
    scale: 0.8;
}

.faqs{
    gap: 20px;
}

.faq-top{
    align-items: flex-start;
    margin-bottom: 35px;
}

.faq-title{
    text-align: start;
}

.faq-question, .faq-answer{
    background-color: var(--color-lessdark);
    padding: 10px;
    font-size: 18px;
}
body.dark .faq-question{
    background-color: var(--color-white-secondary);
}
body.dark .faq-answer{
    background-color: var(--color-white-secondary);
    color: var(--color-darker);
}

.faq-question{
    border-radius: 10px;
}

.faq-question.active .faq-items{
    padding: 20px;
}

.faq-answer{
    border-top: 1px solid var(--color-border);
    color: var(--color-body);
    line-height: 1.8;
    font-size: 16px;
}

.faq-items{
    padding: 20px;
}

.faq-items h3{
    font-weight: 400;
}

.faq-question i:hover{
    font-weight: bold;
    cursor: pointer;
}


/* ==========================SECTION 4 - FAQ END============================ */

/* ==========================SECTION 5 - PRICING START============================ */

/* BASIC PLAN*/
.basic-plan{
    background-color: var(--color-blackest);
    padding: 30px 60px;
}
body.dark .basic-plan{
    background-color: var(--color-white-2);
}
body.dark .basic-plan p{
    color: var(--color-darker);
}

.plan-title{
    padding: 20px 40px;
    border-bottom: 1px solid var(--color-border);
}
body.dark .plan-title p{
    color: var(--color-dark);
}

.basic-plan>hr{
    border: 2px solid var(--color-border);
}

.price-symbol p{
    color: var(--color-currency);
    font-size: 35px;
}

.price-number p{
    font-size: 80px;
    font-weight: bold;
}

.plan-title>p{
    color: var(--color-body);
}

.price-services{
    margin: 30px 0;
    color: var(--color-body);
}

.basic-plan-btn{
    background: none;
    color: var(--color-white);
    padding: 15px 35px;
    border: 2px solid var(--color-border);
    border-radius: 10px;
    transition: var(--basic-transition);
    font-size: 16px;
    cursor: pointer;
}
body.dark .basic-plan-btn{
    color: var(--color-dark);
    border: 2px solid var(--color-body);
}
.basic-plan-btn:hover{
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}
body.dark .basic-plan-btn:hover{
    color: var(--color-white);
    border-color: var(--color-secondary);
}


/* STANDARD PLAN */
.standard-plan{
    background-color: var(--color-lessdark);
    filter: opacity(1);
    transform: scale(1.09);
    transition: var(--basic-transition);
}
body.dark .standard-plan{
    background-color: var(--color-white-secondary);
}

.standard-plan p{
    color: var(--color-white);
}

.standard-plan-btn{
    padding: 20px 40px;
    border-radius: 10px;
}

/* ==========================SECTION 5 - PRICING END============================ */

/* ==========================SECTION 6 - BLOG START============================ */

.blog-box{
    margin-top: 40px;
    background-color: var(--color-blackest);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s linear;
}
body.dark .blog-box{
    background-color: var(--color-white-2);
}

.blog-box p, .blog-box h3{
    margin: 20px;
}

.blog-box p{
    color: var(--color-body);
    font-weight: 100;
    font-weight: 14px;
}
body.dark .blog-box p{
    color: var(--color-dark);
}

.blog-box h3{
    font-size: 20px;
    font-weight: 600;
}

.blog-box:hover{
    transform: translateY(-5px);
}

.image{
    overflow: hidden;
}

.image img{
    transition: all 0.3s linear;
}

.image img:hover{
    transform: scale(1.08);
}
/* ==========================SECTION 6 - BLOG END============================ */

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















/* ==========================FOOTER START============================ */

.footer-container{
    background-color: var(--color-blackest);
    max-width: 100%;
}
body.dark .footer-container{
    background-color: var(--color-white);
}

.footer-btn{
    padding: 16px 32px;
    border-radius: 10px;
    font-size: 18px;
}

.footer-bottom{
    margin-top: 100px;
    border-top: 2px solid var(--color-border);
    padding-top: 30px;
}

.footer-left a{
    color: var(--color-body);
    transition: var(--basic-transition);
}
body.dark .footer-left a{
    color: var(--color-blackest);
}

.footer-left a:hover{
    color: var(--color-primary);
    text-decoration: underline;
}
body.dark .footer-left a:hover{
    color: var(--color-primary);
    text-decoration: underline;
}


.social-media-circle{
    height: 50px;
    width: 50px;
    background-color: var(--color-lessdark);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: var(--basic-transition);
}
.social-media-circle:hover{
    background-color: var(--color-primary);
}

body.dark .social-media-circle{
    background-color: var(--color-white-secondary);
}
body.dark .social-media-circle:hover{
    background-color: var(--color-primary);
}

/* ==========================FOOTER END============================ */














/* ==========================MEDIA QUERIES============================ */



@media(max-width: 225px){
    /* =-=-=-=-=-=-= HEADER START=-=-=-=-=-= */
    .nav-container{
        justify-content: center;
    }
    .nav-ul-items{
        top: 90px;
    }
    /* =-=-=-=-=-=-= HEADER END =-=-=-=-=-= */
}
@media(max-width: 400px){
    /* =-=-=-=-=-=-= HERO START =-=-=-=-=-=  */
    .hero-left{
        align-items: center;
    }
    .hero-container .hero-left h1{
        font-size: 60px;
    }
    .hero-left p{
        font-size: 13px;
        text-align: center;
    }
    .hero-left button{
        scale:0.9;
    }
    /* =-=-=-=-=-=-= HERO END =-=-=-=-=-=  */
    /* =-=-=-=-=-=-= ABOUT START =-=-=-=-=-=  */
    .about-top h2{
        font-size: 30px;
    }
    .about-top p{
        font-size: 16px;
    }
    .about-nav .about-nav-top button{
        padding: 20px;
    }
    /* =-=-=-=-=-=-= ABOUT END =-=-=-=-=-=  */

    /* =-=-=-=-=-=-= TIMELINE END =-=-=-=-=-=  */
    .timeline-top h2{
        font-size: 30px;
    }
    .timeline-top p{
        font-size: 16px;
    }
    /* =-=-=-=-=-=-= TIMELINE END =-=-=-=-=-=  */

}
@media(max-width: 450px){
    /* =-=-=-=-=-=-= HEADER START=-=-=-=-=-= */
    .nav-btns .nav-buy-btn{
        display: none;
    }
    /* =-=-=-=-=-=-= HEADER END =-=-=-=-=-= */
    /* =-=-=-=-=-=-= TIMELINE START =-=-=-=-=-= */
    .timeline-bottom{
        flex-direction: column;
        align-items: center;
    }
    /* =-=-=-=-=-=-= TIMELINE END =-=-=-=-=-= */
}
@media(max-width: 660px){
    /* =-=-=-=-=-=-= PRICING START=-=-=-=-=-= */
    .standard-plan{
        margin-top: 40px;
    }
    /* =-=-=-=-=-=-= PRICING END=-=-=-=-=-= */
}
@media(max-width: 860px){
    /* =-=-=-=-=-=-= HEADER START=-=-=-=-=-= */
    .nav-ul-items{
        display: none;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 0;
        width: 150px;
        background-color: var(--color-blackest);
        padding: 20px;
        text-align: center;
        z-index: 10;
        border-radius: 20px;
    }
    .nav-ul-items.active{
        display: flex;
    }
    body.dark .nav-ul-items{
        background-color: var(--color-white);
    }
    .nav-toggle-btn{
        display: block;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--color-white);
        cursor: pointer;
    }
    /* =-=-=-=-=-=-= HEADER END =-=-=-=-=-= */
    /* =-=-=-=-=-=-= TIMELINE START =-=-=-=-=-= */
    .timeline-bottom{
        flex-wrap: wrap;
    }
    .timeline-card{
        padding: 20px 0;
    }
    /* =-=-=-=-=-=-= TIMELINE END =-=-=-=-=-= */
}
@media(max-width: 730px){
    .col-s-1 {width: 8.33%;}
    .col-s-2 {width: 16.66%;}
    .col-s-3 {width: 25%;}
    .col-s-4 {width: 33.33%;}
    .col-s-5 {width: 41.66%;}
    .col-s-6 {width: 50%;}
    .col-s-7 {width: 58.33%;}
    .col-s-8 {width: 66.66%;}
    .col-s-9 {width: 75%;}
    .col-s-10 {width: 83.33%;}
    .col-s-11 {width: 91.66%;}
    .col-s-12 {width: 100%;}
    *[class^="col-"]{
        padding: 0 12px;
    };
}
@media(max-width: 1000px){
    /* =-=-=-=-=-=-= HEADER START=-=-=-=-=-= */
    .hero-left h1{
        font-size: 85px;
        margin-top: 20px;
    }
    .hero-left p{
        font-size: 13px;
    }
    .hero-left button{
        scale:0.9;
    }
    /* =-=-=-=-=-=-= HEADER END =-=-=-=-=-= */
    /* =-=-=-=-=-=-= ABOUT START =-=-=-=-=-= */
    .about-nav-top button{
        padding: 30px 40px;
        font-size: 13px;
    }
    /* =-=-=-=-=-=-= ABOUT END =-=-=-=-=-= */
    /* =-=-=-=-=-=-= PRICING START =-=-=-=-=-= */
    .standard-plan{
        transform: none;
    }
    /* =-=-=-=-=-=-= PRICING END=-=-=-=-=-= */
}





/* progress bar */

@media(max-width:1280px){
    .progress::after{
        width: 280px;
    }
}
@media(max-width:1195px){
    .progress::after{
        content: none;
    }
}