:root{

    --mainBg: #ffffff;
    --mainGreen: #00BC7D;
    --heroText: #5EE9B5;
    --heroSub: #ffffff;
    --btnText: #ffffff;
    --textGreen: #00BC7D;
    --textDark: #101828;
    --textDarkSub: #4A5565;
    --cardBg: #ffffff;
    --cardBorder: 1px solid rgba(0, 0, 0, 0.10);
    --sectionTitle: #00BC7D;
    --sectionSub: #4A5565;
    --footerBg: #101828;
    --footerText: #D1D5DC;
    --heroFont: 64px;
    --logoFont: 28px;
    --bigFont: 20px;
    --midFont: 16px;
    --smallFont: 14px;
    --xSmallFont: 12px;
    --themeIcon: url("Images/Light.svg")
}

.darkMode{
    --mainBg: #101828;
    --mainGreen: #00BC7D;
    --heroText: #5EE9B5;
    --heroSub: #ffffff;
    --btnText: #ffffff;
    --textGreen: #00BC7D;
    --textDark: #e0e0e0;
    --textDarkSub: #b6b6b6;
    --cardBg: #1a263f;
    --cardBorder: 1px solid rgba(255, 255, 255, 0.1);
    --sectionTitle: #00BC7D;
    --sectionSub: #d8d8d8;
    --footerBg: #101828;
    --footerText: #D1D5DC;
    --themeIcon: url("Images/Dark.svg")
}

*{
    padding: 0;
    margin: 0;
    transition: all 300ms ease;
}

@keyframes popupOpacity {
    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }

}

@font-face {
    font-family: 'Baloo';
    src: url(Fonts/BalooBhaijaan2-VariableFont_wght.ttf);
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: 'Baloo';
    background: var(--mainBg);
    position: relative;
}

header{
    display: flex;
    padding: 20px 40px;
    justify-content: space-between;
    align-items: center;
}

#popup1{
    position: fixed;
    width: 1068px;
    height: 693px;
    background: url(Images/popup1.png);
    padding: 30px;
    left: 25%;
    top: 5%;
    box-sizing: border-box;
    opacity: 0;
    animation: popupOpacity 500ms linear 3s forwards;
}

.popTitle{
    color: var(--btnText);
    font-size: var(--heroFont);
    font-weight: 800;
}

.popSub{
    color: var(--btnText);
    font-size: 34px;
    width: 399px;
    margin-top: 30px;
    font-weight: 600;
}

.popBtn{
    font-size: var(--smallFont);
    color: var(--btnText);
    font-weight: 600;
    padding: 11px 30px;
    background: var(--mainGreen);
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    margin-top: 240px;
    display: block;
    width: fit-content;
}

#closer{
    position: absolute;
    right: 50px;
    top: 50px;
    cursor: pointer;
}

.logo{
    color: var(--textGreen);
    font-weight: 800;
    font-size: var(--logoFont);
}

.navButtons{
    display: flex;
    gap: 20px;
    align-items: center;
}

.navButtons a{
    text-decoration: none;
    color: var(--textDarkSub);
    font-weight: 800;
}

#themeSwitcher{
    background: var(--themeIcon);
    width: 30px;
    height: 30px;
    background-position: center;
    background-size: cover;
    cursor: pointer;
}

.hero{
    height: 90vh;
    background: url(Images/hero.jpg);
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroText{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.heroTitle{
    color: var(--heroText);
    font-size: var(--heroFont);
    font-weight: 800;
}

.heroSub{
    color: var(--heroSub);
    font-size: var(--bigFont);
    width: 731px;
    
}

.heroBtn{
    font-size: var(--smallFont);
    color: var(--btnText);
    font-weight: 600;
    padding: 11px 30px;
    background: var(--mainGreen);
    border-radius: 8px;
    margin-top: 35px;
    text-decoration: none;
}

.heroBtn:hover{
    background-color: #00774f;
    outline: 1px #00BC7D solid;
}

#categories{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
}

.sectionTitle{
    font-size: var(--bigFont);
    color: var(--sectionTitle);
    font-weight: 800;
}

.sectionSub{
    font-size: var(--midFont);
    color: var(--sectionSub);
}

.categoryBtns{
    margin-top: 40px;
    display: flex;
    padding: 0 40px;
    gap: 25px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
}

.catBtn{
    padding: 16px;
    display: flex;
    background-color: var(--cardBg);
    border: var(--cardBorder);
    border-radius: 14px;
    width: 22.78vw;
    box-sizing: border-box;
    justify-content: space-between;
    cursor: pointer;
}

.btnTitle{
    color: var(--textDark);
    font-size: var(--midFont);
    font-weight: 800;
}

.btnSub{
    color: var(--textDarkSub);
    font-size: var(--smallFont);
    font-weight: 600;
}


#discCards{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 80px;
    padding: 40px 0;
}

.dCardsContent{
    margin-top: 40px;
    display: flex;
    padding: 0 40px;
    gap: 25px;
    width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
}

.dCard{
    background: var(--cardBg);
    padding: 15px;
    border: var(--cardBorder);
    border-radius: 14px;
}

.dCardText{
    display: flex;
    align-items: center;
    gap: 10px;
}

.dCardTitle{
    color: var(--textDark);
    font-size: var(--midFont);
    font-weight: 800;
}

.dCardTag{
    padding: 2px 8px;
    border: var(--cardBorder);
    font-size: var(--xSmallFont);
    color: var(--textDark);
    font-weight: 800;
    border-radius: 8px;
    width: fit-content;
}

.dCardPrice{
    margin-top: 15px;
}

.percent{
    color: var(--textGreen);
    font-size: var(--midFont );
    font-weight: 800;
}

.price{
    color: var(--textDark);
    font-size: var(--midFont );
    font-weight: 800;
}

.dCardBtns{
    display: flex;
    gap: 40px;
    margin-top: 20px;
}

#sub{
    padding: 20px 80px;
    background: var(--mainGreen);
    display: flex;
    align-items: center;
    border-radius: 14px;
    cursor: pointer;
    border: none;
}

#num1, #num2, #num3, #num4, #num5, #num6{
    font-size: var(--logoFont);
    font-weight: 600;
    color: var(--textDark);
}

#add{
    padding: 20px 80px;
    background: var(--mainGreen);
    display: flex;
    align-items: center;
    border-radius: 14px;
    cursor: pointer;
    border: none;
}

footer{
    padding: 50px 30px;
    background-color: var(--footerBg);
    display: flex;
    justify-content: space-between;
}

.fColP{
    color: var(--heroSub);
    width: 329px;
}

.fColTitle{
    font-size: var(--midFont);
    color: var(--btnText);
    font-weight: 600;

}

.fColContent a{
    text-decoration: none;
    color: var(--footerText);
}

.fColContent a:hover{
    color: var(--textGreen);
}

.fColContent{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.socials{
    display: flex;
    gap: 15px;
}

.socials img{
    cursor: pointer;
}