:root{
    --main: hsl(185,84%,39%);
    --second: hsl(185, 94%, 25%);
    --third:hsl(0,0%,100%);
    --fourth:hsl(35, 44%, 85%);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: "poppin";
    src:url(font/Poppins-Regular.ttf);

    font-family: "poppinmedium";
    src:url(font/Poppins-Medium.ttf);

    font-family: "poppinsemib";
    src:url(font/Poppins-SemiBold.ttf);

    font-family: "poppinbold";
    src:url(font/Poppins-Bold.ttf);
}
body , html{
    font-family: "poppin";
    background-color:hsl(185, 84%, 39%);
    color: black;
    overflow-x: hidden;
}
/* navbar */
nav{
    background-color: var(--second);
    padding: 1rem;
    font-family: "poppinmedium";
}
.navbar{
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1em;
}
nav a{
    text-decoration: none;
    color: var(--fourth);
    font-size: 1.3rem;
}
 nav .logo{
    position: absolute;
    float: left;
    width: 50px;
    height: auto;
}
nav .text{
    display: none;
    position: absolute;
    float: left;
    top: 0.8vw;
    width: 160px;
    height: auto;
}
/* HERO SECTION */
.hero img{
    width: 100%;
    height: auto;
    background-image: linear-gradient(rgba(0, 0, 0, 0.775) , rgba(0, 0, 0, 0.123));
    backdrop-filter: blur(4px);
}
.hero-text{
    position: absolute;
    color: var(--third);
    font-family: "poppinbold";
    font-size: 0.9em;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
    letter-spacing: 1px;
    
    
    top: 10rem;
    left: 1rem;
}
.hero-text h2{
    font-size: 2.9em;
}
.hero-text p{
    color: var(--fourth);
}
.ctn{
    font-family: "poppinsemib" 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    position: inherit;
    top: 25rem;
    left: 55vw;
    padding: 0.5rem;
    background-color: var(--main);
    border-radius: 25px;
    color: var(--third);
    text-decoration: none;
}
/* FEATURES */
#why-nikhilpaints h2{
    font-size:8vw;
    text-align: center;
    font-family: "poppinbold";
    color: var(--third);
}
.class-image{
    /* background-color: var(--fourth); */
    width: 200px;
    height: 170px;
    border-radius: 25px;
    margin-bottom: 2em;
}
.class-image.back{
    background-image: url(images/logoandtext.png);
    background-size: contain;
}
.cards{
    display: flex;
    flex-wrap: wrap;

    margin: 2rem;
    padding-bottom: 2rem;

    background-color: var(--second);
    border-radius: 10px;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: var(--third);

    font-family: "poppinbold";
    font-size: 0.8rem;
    line-height: 2;

    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* PARTNERS */
.partners{
    background-color: var(--third);
    padding-bottom: 1.5em;
}
.partners h2{
    color: var(--second);
    text-align: center;
    padding: 2em;
    font-size: "poppinbold";
    font-weight: 2000;
    font-size: 2rem;
}
.partner-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 2em 0.5em 2em;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.partner-card img{
    width: 100%;
    height: auto;
}
/* FOOTER */
footer{
    background-image: url(images/footmerig.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    height: 350px;
}
.foottext{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    line-height: 1.5;
}
.foottext p{
    padding-top: 20px;
}
.foottext a{
    padding-bottom: 20px;
    text-decoration: none;
}
.foottext a:visited{
    color: blue;
}
.icons{
    display: flex;
    justify-content: center;
}
.icons img{
    transition: 100ms;
    width: auto;
}
/* ANIMATION */
.icons img:hover{
    opacity: 0.7;
    scale: 1.1;
}
/* MEDIA QUIRIES */
@media (min-width: 480px) and (max-width: 767px){
    nav{
        padding: 2rem;
    }
    .navbar{
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 2em;
    }
    /* HERO-SECTION */
    .hero-text h2{
    font-size: 11vw;
    }
    .ctn{
    top: 80vw;
    left: 65vw;
    padding: 0.8rem;  
    }
    /* FEATURES */
    .cards{
    margin: 2rem 5rem;
    padding-bottom: 5rem;
    line-height: 2;
    font-size: 1rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px){
    nav{
        padding: 3rem;
    }
    .navbar{
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 2em;
    }
    /* HEROSECTION */
    .hero-text h2{
    font-size: 8vw;
    margin-right: 4em;
    }
    .ctn{
        top: 35vw;
        left: 72vw;

        background-color: transparent;
        border: 3px var(--main) solid;

        padding: 0.6rem 1rem;
        transition: ease-in 120ms;
    }
    .ctn:hover{
        background-color: var(--fourth);
        color: var(--main);
    }
    /* FEATURE */
    .cards{
    margin: 2rem 20vw;
    padding-bottom: 5rem;
    line-height: 3;
    font-size: 1.2rem;
    }
    .containit{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .partner-card img{
    width: 100%;
    height: 200px; /* Set same height for all images */
    object-fit: cover;
    }
}
@media (min-width: 1024px) and (max-width: 1279px){
    nav{
        padding: 3rem;
    }
    .navbar{
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 2em;
    }
    /* HEROSECTION */
    .hero-text h2{
    font-size: 7vw;
    margin-right: 5em;
    }
    .ctn{
        top: 47vw;
        left: 2vw;

        background-color: transparent;
        border: 3px var(--main) solid;
        border-radius: 17px;

        padding: 0.6rem 2rem;
        transition: ease-in 120ms;
    }
    .ctn:hover{
        background-color: var(--fourth);
        color: var(--main);
    }
    /* FEATURE */
    .cards{
    margin: 2rem 30vw;
    padding-bottom: 5rem;
    line-height: 3;
    font-size: 1.2rem;
    }
    .containit{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .partner-card img{
    width: 100%;
    height: 200px; /* Set same height for all images */
    object-fit: cover;
    }
}
@media (min-width: 1280px) and (max-width: 1535px){
    nav{
        padding: 2rem;
    }
    .navbar{
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 5em;
    }
    .navbar a:hover{
        color: grey;
    }
    /* HEROSECTION */
    .hero-text h2{
    font-size: 5vw;
    margin: 1em 4em 0 4em;
    text-align: center;
    }
    .hero-text p{
        text-align: center;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 10);
        font-size: 1.5em;
    }
    .hero img{
        width: 100%;
        height: 1000px;
        object-fit: cover;
    }
    .ctn{
        top: 33vw;
        left: 43%;

        background-color: transparent;
        border: 4px var(--main) solid;
        border-radius: 17px;

        padding: 0.6rem 2rem;
        transition: ease-in 120ms;
    }
    .ctn:hover{
        background-color: var(--fourth);
        color: var(--main);
        scale: 1.1;
    }
    /* FEATURE */
    .cards{
    margin: 2rem 30vw;
    padding-bottom: 5rem;
    line-height: 3;
    font-size: 1.2rem;
    }
    .containit{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .partner-card img{
    width: 100%;
    height: 200px; /* Set same height for all images */
    object-fit: cover;
    }
    
}
@media (min-width: 1536px){
    nav{
        padding: 1.6rem;
    }
    nav .logo{
        display: none;
    }
    nav .text{
    display: inline;
    }
    .navbar{
        flex-direction: row;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 5em;
    }
    .navbar a:hover{
        color: grey;
    }
    /* HEROSECTION */
    .hero-text h2{
    font-size: 5vw;
    margin: 1em 4em 0 4em;
    text-align: center;
    }
    .hero-text p{
        text-align: center;
        text-shadow: 1px 1px 4px rgba(0, 0, 0, 10);
        font-size: 1.5em;
    }
    .hero img{
        width: 100%;
        height: 1000px;
        object-fit: cover;
    }
    .ctn{
        top: 33vw;
        left: 43%;

        background-color: transparent;
        border: 4px var(--main) solid;
        border-radius: 17px;

        padding: 0.6rem 2rem;
        transition: ease-in 120ms;
    }
    .ctn:hover{
        background-color: var(--fourth);
        color: var(--main);
        scale: 1.1;
    }
    /* FEATURE */
    #why-nikhilpaints h2{
    font-size:5vw;
    }
    .cards{
    margin: 2rem 30vw;
    padding-bottom: 5rem;
    line-height: 3;
    font-size: 1.2rem;
    }
    .containit{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .partner-card img{
    width: 100%;
    height: 200px; /* Set same height for all images */
    object-fit: cover;
    }
}