:root {
   --theme_color: #86B6F6;
   --theme_text: #FFFFFF;
   --contrast_text: #3C495A;
   --text: #3C495A;
   --mid: #8C9DB4;
   --mid_link: #FFFFFF;
   --background: #EEF5FF;
   --error: #F28585;
   --image_border: black;
   --img_bdr_width: 2px;

   --Soft-Blue: hsl(231, 69%, 60%);
   --Soft-Red: hsl(0, 94%, 66%);
   --Grayish-Blue: hsl(229, 8%, 60%);
   --Very-Dark-Blue: hsl(229, 31%, 21%);
   --box-shadow: .5rem .5rem  0 hsl(231, 69%, 60%);
   --text-shadow: .4rem .4rem  0 rgba(0, 0, 0, .2);
   --border: .2rem  solid var(--green);
}

[color-mode="dark"] {
   --text: #F0F0F0;
   --mid: #3C495A;
   --mid_link: #86B6F6;
   --background: #262626;
   --image_border: #F0F0F0;
   --img_bdr_width: 2px;
}

@font-face {
   font-family: "K2D";
   src: url(../fonts/K2D-Regular.ttf);
}

@font-face {
   font-family: "Museo";
   src: url(../fonts/MuseoModerno-VariableFont_wght.ttf);
}

body{
    font-family: 'K2D', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    transition: 0.2s ease-in-out;
    color: var(--text);
    background-color: var(--background);
    text-decoration: none;
}

::selection{
    background-color: var(--contrast_text);
    color: #fff;
}


::-webkit-scrollbar{
    width: 12px;
}

::-webkit-scrollbar-thumb{
    background-color: var(--theme_color);
}

section {
    padding: 1rem 10%;
    /*! margin: 0 auto; */
}

html{
    scroll-behavior: smooth;
    overflow-x: hidden;
}


/* navbar sections starts */
/*
.header{
    padding: 3rem 9%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0%;
    left: 0;
    z-index: 10000;
    background-color: #fff;
    box-shadow: 0rem 0.5rem 1.5rem rgba(0, 0, 0, .1);
}


.header .logo{
    cursor: pointer;
}


.header .navbar a{
    margin-left: 2rem;
    font-size: 1.7rem;
    text-transform: uppercase;
}


.header .navbar a:hover{
    color: var(--Soft-Red);
}


.header .navbar .btn{
    padding: .6rem 3rem;
    background-color: var(--Soft-Red);
    color: #fff;
    border-radius: .5rem;
}

.header .navbar .btn:hover{
    color: var(--Soft-Red);
    background-color: transparent;
    border: 2px solid var(--Soft-Red);
}

#menu-btn{
    padding: 1rem 1rem;
    background-color: #eee;
    font-size: 3rem;
    color: var(--Soft-Blue);
    border-radius: .5rem;
    cursor: pointer;
    display: none;
}
*/

.header {
   background-color: var(--theme_color);
   color: var(--theme_text);
   padding: 0.3rem;
   text-align: center;
   font-family: 'Museo', sans-serif;
}

.header h1 {
   margin: 0;
   font-size: 2.2rem;
   font-weight: normal;
   display: inline-block;
}

.header_btn {
   display: inline;
   background-color: var(--theme_color);
   color: var(--theme_text);
   font-size: 1.4rem;
   margin-inline: 0rem;
   padding-inline: 1rem;
   border-color: var(--contrast_text);
   border-radius: 15px;
   border-width: 0px;
   height: 3rem;
   margin-block: auto;
}

.header_btn:hover {
   filter: brightness(90%);
   cursor: pointer;
}

.name-contrast {
   color: var(--contrast_text);
}

/* Media Queries */

/*


@media (max-width: 991px){
    html{
        font-size: 55%;
    }
    .header{
        padding: 2rem;
    }

}

@media (max-width: 768px){
    #menu-btn{
        display: initial;
    }

    .header .navbar{
        position: absolute;
        top: 115%;
        right: 2rem;
        box-shadow: var(--box-shadow);
        width: 33rem;
        border-radius: .5rem;
        border: 2px solid var(--Soft-Blue);
        background-color: #fff;
        transform: scale(0);
        transform-origin: top right;
    }

    .header .navbar.active{
        transform: scale(1);
    }

    .header .navbar a{
        margin: 2.5rem;
        text-align: center;
        display: block;
        font-size: 2rem;
    }
}


@media (max-width: 450px){
    html{
        font-size: 50%;
    }
}
*/
/* navbar sections ends */


/* home section starts  */

.home{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* main property for responsiveness */
    gap: 1.5rem;
}


.home div {
    text-align: center;
}


.home .image{
    flex: 1 1 45rem;

}


.home .image img{
    width: 100%;
    margin-top: 5rem;
    border: 18px solid var(--image_border);
    border-radius: 3rem;
}


.home .content{
    flex: 1 1 25rem;
    margin-inline: 2rem;
}


.home .content h1{
    font-size: 3rem;
    padding-block-end: 1rem 0;
    color: var(--text); /*var(--Very-Dark-Blue);*/
}

.home .content p{
    font-size: 1.7rem;
    padding: 1rem 0;
    color: var(--Grayish-Blue);
    padding-bottom: 3rem;
}

.home .content .home-btn{
    padding: 1.3rem 2rem;
    background-color: #fff;
    color: #000;
    font-size: 1.4rem;
    box-shadow: .5rem .5rem var(--theme_color);
    border: 2px solid var(--text);
    border-radius: .5rem;
    text-decoration: none;
    --webkit-text-decoration: none;
    margin-inline: 0.5rem;
}


.home .content .home-btn:hover{
    background-color: var(--theme_color);
    box-shadow: none;
    color: #fff;
}

@media (max-width: 1500px){
    .home .image img{
        max-width: 95%;
    }
}

@media (max-width: 991px){
    html{
        font-size: 80%;
    }
    .home .image img{
        max-width: 93%;
        border: 12px solid var(--image_border);
    }
}

@media (max-width: 600px){
    html{
        font-size: 75%;
    }

    .home .image img{
        border: 8px solid var(--image_border);
    }
}

@media (max-width: 450px){
    html{
        font-size: 70%;
    }
}


/* home section ends */



/* features section starts  */
.heading{
    text-align: center;
    font-size: 2rem;
    color: var(--text); /*var(--Very-Dark-Blue);*/
    margin-top: 10rem;
    margin-bottom: 5rem;
}


.heading h1{
    padding-bottom: 2rem;
}


.heading p{
    max-width: 60rem;
    margin: auto;
    color: var(--Grayish-Blue);
    font-size: 1.7rem;
}


.all-btn{
    padding: 1rem 3rem;
    font-size: 1.5rem;
    background-color: var(--theme_color);
    border-radius: .5rem;
    color: #fff;
}

.all-btn:hover{
    background-color: transparent;
    color: var(--theme_color);
    border: 2px solid var(--theme_color);
}

.row{
    border-top: .1rem solid var(--text)/*rgba(0, 0, 0, .1)*/;
    padding-top: 2rem;
}

.features .row{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
    margin: 2rem 0;
}

.features .row .image{
    flex: 1 1 45rem;
    text-align: center;
    /*! margin-inline: 1rem; */
}

.features .row .image img{
    width: 90%;
    margin-top: 2rem;
    border: var(--img_bdr_width) solid var(--image_border);
    border-radius: 1.5rem;
}

.features .row .content{
    flex: 1 1 45rem;
}


.features .row .content h1{
    font-size: 2.2rem;
    padding: 1rem 0;
    color: var(--text); /*var(--Very-Dark-Blue);*/
}


.features .row .content p{
    font-size: 1.7rem;
    padding: 1rem 0;
    color: var(--Grayish-Blue);
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.desktop{
    display: block;
}

.mobile{
    display: none;
}

@media (max-width: 1900px){
    .features .row .image{
        flex: 1 1 35rem;
    }
    .features .row .content{
        flex: 1 1 35rem;
    }
}

@media (max-width: 1500px){
    .features .row .image{
        flex: 1 1 25rem;
    }
    .features .row .content{
        flex: 1 1 25rem;
    }
}

@media (max-width: 1100px){
    .desktop{
        display: none;
    }
    .mobile{
        display: block;
    }
}

/* features section ends */


/* footer section starts */
.footer .credit{
    padding: 1rem;
    padding-top: 2rem;
    margin-top: 2rem;
    text-align: center;
    font-size: 1.2rem;
    color: var(--text);
    border-top: .1rem solid var(--text)/*rgba(0, 0, 0, .1)*/;
}


.footer .credit span{
    color: var(--Soft-Red);
    cursor: pointer;
}


/* footer section ends */