@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Nunito:wght@300;400&display=swap');

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

:root {
    --purple: #66397C;
    --white: #FFFFFF;
    --black: #000000;
    --pink: #E6258C;
    --yellow: #F9C023;
    --kpk-blue: #1E62AF;
    --blurBlack: #333333;
    --darkblue: linear-gradient(91.99deg, #253470 -11.94%, #2A7AC1 113.74%);
    --dimWhite: #F7F6F7;
}

.kpk-background-wrapper {
    max-width: 1366px;
    margin: auto;
}

.kjk-wrapper {
    background: var(--kpk-blue);
    /* background: #1E62AF; */
}

.kpk-navigation-first {
    background: var(--kpk-blue);
    /* background: #1E62AF; */
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1140px;
    margin: auto;
}

.kpk-contact-section {
    display: flex;
    gap: 52px;
}

.kpk-media-section {
    display: flex;
    gap: 35px;
    padding-bottom: 10px;
}

.kpk-locate {
    display: flex;
    gap: 5px;
    align-items: center;
}

.kpk-add .kpk-locate-detail {
    font-family: 'lato';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    color: var(--white);
    text-decoration: none;

}

.kpk-twitt {
    width: 18px;
    height: 19px;
}

.kpk-twitt img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.kpk-location {
    width: 17px;
    height: 17px;
    margin-bottom: 10px;
}

.kpk-location img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.kj-nav {
    display: flex;
    justify-content: space-between;
    max-width: 1175px;
    margin: auto;
    align-items: center;
}

.kpk-logo-section {
    width: 104px;
    height: 78px;
}

.kpk-logo-section img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.kj-nav-ul {
    display: flex;
    gap: 30px;
    align-items: center;
    padding-right: 17px;
}

.kpk-nav-elements {
    display: flex;
    gap: 41px;
    list-style: none;
}
ul{
    padding-left: unset !important;
    margin-bottom: unset !important;
}


.kpk-nav-elements>li>a {
    font-family: 'Nunito', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    color: var(--black);
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}
.kpk-nav-elements>li>a:hover{
    color: var(--yellow);
}


.kpk-start-button .kpk-click-btn:hover {
    color: var(--kpk-blue);
      color:var(--kpk-blue);
    background-color: #FFFFFF;
    padding: 10px 12px 10px 12px;
    border: 2px solid var(--kpk-blue);
}
.kpk-start-button .kpk-click-btn {
    font-family: 'lato';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    color: var(--white);
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: 1px;
    background: var(--kpk-blue);
    border-radius: 5px;
    padding: 12px 14px 12px 14px;
    cursor: pointer;
}








.kj-navbar.show {
    z-index: 1;
}

.kj-menu {

    padding-right: 26px;
}


.kj-menu .kj-menu-click {
    font-size: 30px;
    color: var(--black);
}


.kj-navbar {
    position: fixed;
    top: 0;
    left: 100%;
    margin: 0;
    width: 100%;
    padding: 20px;
    transition: left 0.3s;
    background-color: var(--kpk-blue);

}

.kj-navbar.show {
    left: 0 !important;
}

.hide-scroll {
    overflow: hidden;
}

/* .kj-navbar .kj-nav-ul {
    all: unset;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
} */

/* .kj-navbar .kj-nav-ul .kj-home {

    color: var(--black);
    text-transform: uppercase;
    cursor: pointer;
    font-size: 18px;
} */



.close-nav {
    text-align: right;

}



.close-nav button {
    all: unset;
    font-size: 54px;
    cursor: pointer;
    padding-right: 15px;
    border-radius: 3px;
    color: white;

}

.close-nav button:hover {
    color: #222222;
    background:
        white;
}



.click {

    cursor: pointer;
}

.touch {
    display: none;
    position: absolute;
    width: 230px;
    background-color: #2A5B2B;
    z-index: 1;
    margin-top: 30px;
    padding-top: 10px;
    padding-bottom: 20px;
    border-top: 2px solid #F3C41C;
    z-index: 1;
}

.click .touch1 {
    display: none;
    position: absolute;
    max-width: 860px;
    background-color: #2A5B2B;
    z-index: 1;
    left: 0;
    margin-top: 30px;
    border-top: 2px solid #F3C41C;
    /* display: flex; */
    flex-wrap: wrap;
    padding: 8px 20px 18px 20px;


}


.click:hover .touch {
    display: block;
}



.click:hover .touch1 {
    display: flex;
}

/* footer sextion */

.kpk-footer-section {

    max-width: 1100px;
    margin: auto;
    padding: 50px 0px 80px 0px;
}

.kpk-foot-wrapper {
    background: #F2F2F2;
}

.kpk-footer-logo {
    max-width: 179px;
    height: 180px;
    padding-bottom: 20px;
}

.kpk-footer-logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}


.kj-foot-first .kpk-footer-logo-des {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.015em;
    color: #565656;
    width: 71%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


.kpk-footer-btn {
    max-width: 262px;
    height: 48px;
    background: #1E62AF;
    border-radius: 5px;
    text-align: center;
    padding: 10px;
    margin-top: 40px;
    text-decoration: none;
}
.kpk-footer-btn:hover {
    border: 2px solid var(--kpk-blue);
    background-color: #FFFFFF;
    color: var(--kpk-blue);
    
}

.kpk-footer-btn .kpk-getter:hover{
    color: var(--kpk-blue);
}

.kpk-footer-btn .kpk-getter {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF ;
    text-decoration: none;
    padding: 33px;
}

.kj-foot-first3 .kj-touch {
    font-family: 'Montaga';
    font-style: normal;
    font-weight: 400;
    font-size: 22px;
    line-height: 26px;
    color: #1E62AF;
    text-transform: capitalize;
    letter-spacing: 1px;
    padding-top: 50px;
}

hr {
    margin: 10px 0px 25px 0px !important;
    Width: 65px !important;
    height: 1px !important;
    border-width: 0 !important;
    background: #565656 !important;
    border: 0;
    border-top: 1px solid;
    opacity: 1 !important;
}

/* .kj-for .kj-forward {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.065em;
    color: #565656;
    text-decoration: none;
    text-transform: capitalize;


} */

.kj-foot-first3>li>a {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.065em;
    color: #565656;
    text-decoration: none;
    text-transform: capitalize;


}

.kj-email {
    display: flex;

}

.kj-input-field input::placeholder {

    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14.455px;
    color: #6C757D;
    text-transform: capitalize;
    padding: 0px 0px 10px 15px;
}

.kj-signup {

    padding: 10px 10px 15px 10px;
    background: var(--kpk-blue);
    border: 0.903439px solid var(--kpk-blue);
    height: 51px;
    border-radius: 0px 5px 5px 0px;


}
.kj-foot-first3{
    list-style: none;
}

.kj-signup .kj-sign {

    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: 0.5px;
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 14.455px;
    text-align: center;
    color: #FFFFFF;
background-color: transparent;
border: none;
}



.kj-input-field input {

    height: 51px;
    width: 277px;
    border-radius: 7.22751px 0px 0px 7.22751px;
}

input {
    border-top-style: hidden;
    border-right-style: hidden;
    border-left-style: hidden;
    border-bottom-style: hidden;
    background-color: #FFFFFF;
}

.kj-foot-first3 .kj-followus {

    font-family: 'Nunito';
    font-style: normal;
    font-weight: 500;
    font-size: 19px;
    line-height: 26px;
    color: #1E62AF;
    padding-top: 40px;
}

.kpk-footer-media {
    display: flex;
    gap: 20px;

}

.kpk-face {
    width: 18px;
    height: 19px;
    margin-top: -15px;
}

.kpk-face img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.kpk-copyright-section {
    background-color: var(--kpk-blue);
    padding: 20px 0px 20px 0px;
}

.kpk-copyright-section .kpk-copy {
    font-family: 'Heebo';
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 17px;
    color: #FFFFFF;
    text-align: center;
}

.row {
    --bs-gutter-x: 0rem !important;
}

/* footer section end */

/* trend section */
.kpk-hero-trend {
    height: 370px;
    position: relative;

}

.kj-cont-space .kj-clickable {
    font-family: 'Montaga';
    font-style: normal;
    font-weight: 400;
    font-size: 25px;
    line-height: 31px;
    color: var(--kpk-blue);
    text-decoration: none;
    letter-spacing: 1px;

}

.kpk-hero-trend img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.kj-cont-space {
position: absolute;
bottom: 20%;
    word-spacing: 2px;
}

.kpk-trend-wrapper {
    max-width: 1123px;
    margin: auto;
}

.kpk-trend-wrapper .kpk-trending {
    font-family: 'Montaga';
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 43px;
    color: var(--kpk-blue);
    text-align: center;
    letter-spacing: 1px;
    margin-top: 40px;
}

.kpk-trend-part {
    margin-top: 40px;
}

.kpk-trend-part .kpk-confuse {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    color: rgba(51, 51, 51, 0.9);
    width: 70%;
    position: relative;
    left: 27%;
    top: 20px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}

.kpk-inside {
    display: flex;
    position: absolute;
    bottom: 19%;
    left: 10%;
    gap: 8px;
}

.kpk-inside2 {
    display: flex;
    position: absolute;
    bottom: 24%;
    left: 5%;
    gap: 8px;
}

.kpk-inside1 {
    display: flex;
    position: absolute;
    bottom: 34%;
    left: 7%;
    gap: 8px;
}

.kpk-inside3 {
    display: flex;
    position: absolute;
    bottom: 34%;
    left: 12%;
    gap: 8px;
}

.kpk-inside4 {
    display: flex;
    position: absolute;
    bottom: 25%;
    left: 12%;
    gap: 8px;
}
.kpk-inside5{
    position: absolute;
    bottom: 10%;
    left: 12%;
    gap: 8px;
}
.kpk-arrow{
    display: flex;
}
.kpk-circle-wrapper{
    width: 64px;
height: 25.77px;
}
.kpk-circle-wrapper img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.kpk-inside-arrow{
    width: 14px;
    height: 23px;
    position: relative;
    right: 10%;
    top: 16px;
}
.kpk-inside-arrow img{
    height: 100%;
    width: 100%;
    object-fit: contain;
} 

.kpk-inside-pic {
    width: 16px;
    height: 16px;
}

.kpk-inside-pic img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}


.kpk-fix .kpk-white {
    font-family: 'nunito';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1px;
    color: #FFFFFF;
    text-transform: capitalize;

}


.kpk-fix .kpk-white1{
    font-family: 'nunito';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 1px;
    color: #FFFFFF;
    text-transform: capitalize;
    width: 79%;
}

.kpk-fix {
    padding-top: 4px;
}

.kpk-picture-collection2 {
    max-width: 1123px;
    display: flex;
    gap: 10px;
    margin: auto;
    padding: 0px 54px 0px 40px;
    margin-top: -20px;
}


.kpk-shades .kpk-korean-shades {
    font-family: 'Montaga';
    font-style: normal;
    font-weight: 400;
    font-size: 35px;
    line-height: 122.8%;
    color: var(--kpk-blue);
    padding-bottom: 10px;
}


.kpk-shades .kpk-variety-shade {

    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 25px;
    color: rgba(51, 51, 51, 0.9);

}

.kpk-shades {
    padding: 80px 0px 40px 0px;
}



.kpk-grey-back {
    background: #F8F8F8;
    border-radius: 5px;
}

.kpk-shade-box {
   width: 25%;
    height: 67px;
    margin-bottom: 2%;
    background: red;
    border-radius: 20px 0px;
}
.kpk-shade-box1 {
    width: 192px;
    height: 95px;
    background: rgba(255, 0, 0, 0.622);
    border-radius: 20px 0px;
}
.kpk-shade-box2 {
    width: 192px;
    height: 95px;
    background: rgba(99, 79, 79, 0.622);
    border-radius: 20px 0px;
}
.kpk-shade-box3 {
    width: 192px;
    height: 95px;
    background: darkred;
    border-radius: 20px 0px;
}
.kpk-shade-box4 {
    width: 192px;
    height: 95px;
    background: rgba(249, 67, 67, 0.897);
    border-radius: 20px 0px;
}

.kpk-shade-box-yellow{
    width: 192px;
    height: 95px;
    background: gold;
    border-radius: 20px 0px;
}
.kpk-shade-box-pink{
       width: 25%;
    height: 67px;
    margin-bottom: 2%;
    background: #d066ae;
    border-radius: 20px 0px;
}
.kpk-shade-box-blue{
      width: 25%;
    height: 67px;
    margin-bottom: 2%;
    background: blue;
    border-radius: 20px 0px;
}

.kpk-shade-box-purple{
        width: 25%;
    height: 67px;
    margin-bottom: 2%;
    background: purple;
    border-radius: 20px 0px;
}

.kpk-shade-box-orange{
       width: 25%;
    height: 67px;
    margin-bottom: 2%;
    background: orangered;
    border-radius: 20px 0px;
}
.kpk-shade-box-black{
       width: 25%;
    height: 67px;
    margin-bottom: 2%;
    background: black;
    border-radius: 20px 0px;
}
.kpk-shade-box-brown{
      width: 25%;
    height: 67px;
    margin-bottom: 2%;
    background: #594230;
    border-radius: 20px 0px;
}

.kpk-shade-box-green{
       width: 25%;
    height: 67px;
    margin-bottom: 2%;
    background: green;
    border-radius: 20px 0px;
}


.nav-link {
    font-family: 'Lato' !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 25px !important;
    color: #1E62AF !important;
text-transform: capitalize;
}
.nav-tabs {
    --bs-nav-tabs-border-width: 0px !important;
    padding: 12px 60px 12px 60px !important;
    background: #F8F8F8 !important;
    border-radius: 5px !important;
    gap: 30px !important;
}
.nav-tabs .nav-link.active{
    background-color: transparent !important;
    color: var(--yellow);
}
.kpk-new{
   
margin-bottom: 30px;
  
}
/* trend section end */

@media screen and (max-width: 1200px) {
    .kpk-navigation-first {
        padding: 0px 40px 0px 40px;
    }

    .kj-nav {
        padding: 0px 16px 0px 19px;
    }


    .kpk-footer-section {
        padding: 50px 40px 80px 40px;
    }
    .kpk-trend-wrapper {
        padding: 0px 40px 0px 40px;
    }
}
@media (max-width: 940px) {
.kj-nav-ul {
      
    gap: 12px;
}
.kpk-nav-elements {
    gap: 20px;
}

/* .kpk-nav-elements>li>a {
    gap: 20px;
} */
}

@media (max-width: 900px) {
    .kpk-wrap {
        margin-top: 25% !important;
    }
    .kj-nav-ul {
      
        gap: 8px;
    }
    .kpk-nav-elements {
        gap: 10px;
    }

     /* .kpk-nav-elements>li>a {
        gap: 10px;
    } */
}

@media (max-width: 768px) {
    .kpk-navigation-first {
        height: auto;
        display: block;
        padding: 10px 40px 10px 40px;
    }

    .kpk-media-section {
        padding-bottom: 20px;
    }

    .kpk-navigation-first {
        padding: 16px 40px 16px 40px;
    }

    .kj-nav-ul {
        display: block;
        line-height: 35px;
        padding-right: unset;
    }

    .kpk-nav-elements {
        display: block;
        text-align: center;
    }

    .kpk-nav-elements>li>a{
       color: white;
    }

    .kpk-start-button {
        text-align: center;
border: 2px solid white;
margin-top: 10px;
    }
.kpk-start-button .kpk-click-btn {
    font-size: 20px !important;
    letter-spacing: 1px !important;
    background: none;
}
    .kpk-nav .kj-home {
        color: var(--white);
    }

    .kpk-contact-section {
        gap: 40px;
        flex-wrap: wrap;
    }
 

}

@media (min-width: 768px) {

    .kj-navbar {
        all: unset;
        display: block;
    }

    .kj-menu {
        display: none;
    }

    .kj-navbar .kj-nav-ul {
        flex-direction: row;

    }

    .close-nav,
    .menu-bar {
        display: none;
    }


}

@media (max-width: 568px) {
    .kpk-contact-section {
        gap: 13px;

    }

    .kj-foot-first .kpk-footer-logo-des {
        width: 100%;
    }

    .kpk-navigation-first {
        padding: 16px 25px 16px 25px;
    }

    .kpk-footer-section {
        padding: 50px 25px 80px 25px;
    }
    .kpk-trend-wrapper {
        padding: 0px 25px 0px 25px;
    }
/*    .kpk-shade-box {*/
/*        width: 100%;*/
/*}*/
}



@media (max-width: 480px) {
    .kpk-contact-section {
        gap: 13px;

    }
    .kpk-trend-wrapper {
        padding: 0px 16px 0px 16px;
    }

    .kpk-navigation-first {
        padding: 16px 16px 16px 16px;
    }

    .kpk-footer-section {
        padding: 50px 16px 80px 16px;
    }

    .kj-input-field input {

        width: 195px;
    }

}