@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0px;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol {
margin: 0px;
padding: 0px;
}
a,
a:hover {
text-decoration: none;
}
li {
list-style: none;
}
:root {
--main-font: 'Poppins', sans-serif;
--primary:#F2C94C;
--secondery: #EB5757;
--sub-1: #333333;
--sub-2: #828282;
--sub-3 : #BDBDBD ;
--sub-4: #E0E0E0;
--white: #ffffff;
--black: #000000;
} .header-area {
background: var(--white);
padding: 10px 0px;
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 20;
}
.shrink {
backdrop-filter: blur(15px);
background: rgba(0, 0, 0, 0.15);
position: fixed;
top: 0;
width: 100%;
z-index: 20;
}
.shrink.header-area {
transition: 0.7s;
animation: smoothScroll 1s forwards;
z-index: 20;
}
@keyframes smoothScroll {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0px);
}
}
.header-area .left {
display: flex;
gap: 16px;
align-items: center;
}
.header-area .left .navbar-toggler span {
background-color: var(--black);
}
.header-area .navbar-brand {
margin: 0px auto;
max-width: 160px;
}
.header-area .navbar-brand img {
width: 100%;
}
.header-area .navbar ul li a {
font-size: 16px;
font-weight: 500;
color: var(--black);   
display: flex;
}
.header-area .navbar ul li a span {
font-size: 10px;
display: flex;
align-items: center;
margin-left: 4px;
}
.header-area .navbar ul li a:hover {
color: var(--secondery);
}
.header-area .navbar .dropdown-menu {
padding: 0px;
transition: all 300ms ease-in-out 0s;
-webkit-transform-origin: top;
-ms-transform-origin: top;
transform-origin: top;
}
.header-area .navbar .dropdown {
}
.header-area .navbar .dropdown:hover .dropdown-menu {
display: block;
}
.header-area .navbar .dropdown-item {
transition: all 0.2s ease-in;
}
.header-area .navbar .dropdown-item:hover {
padding: 0.25rem 0.75rem 0.25rem 1.25rem;
}
.header-area .navbar .dropdown-toggle::after {
display: none;
}
.header-area .navbar ul li a i {
font-size: 12px;
margin-left: 2px;
}
.header-area .right {
display: flex;
gap: 16px;
align-items: center;
}
.header-area .navbar .right li a {
font-size: 16px;
color: var(--primary);
font-weight: 500;
} .navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler {
border: none;
}
.navbar-icon {
position: relative;
width: 22px;
height: 17px;
cursor: pointer;
} .navbar-icon span {
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 5px;
transition: all 0.2s, background 0s;
background: url(//thekingofcreams.com/wp-content/themes/kingofcreams_theme/images/navbg-top.svg);
background-position: center;
background-size: cover;
}
.navbar-icon span:last-child {
background: url(//thekingofcreams.com/wp-content/themes/kingofcreams_theme/images/navbg-btm.svg);
}
.navbar-icon .line2 {
top: 5px;
}
.navbar-icon .line3 {
top: 10px;
}
.nav-open .line1,
.nav-open .line3 {
top: 5px;
}
.nav-open .line1 {
transform: rotate(45deg);
}
.nav-open .line3 {
transform: rotate(-45deg);
}
.nav-open .line2 {
opacity: 0;
visibility: hidden;
}
.primary-btn {
font-size: 16px;
font-weight: 500;
color: var(--secondery);
background: var(--primary);
border-radius: 4px;
padding: 8px 16px;
border: 1px solid var(--primary);
display: flex;
align-items: center;
gap: 8px;
transition: all 0.2s ease-in-out;
}
.primary-btn i {
width: 20px;
}
.primary-btn:hover , .primary-btn:focus {
background: var(--click);
border: 1px solid var(--click);
}  @media (max-width: 1440px) { 
}
@media (max-width: 1199px) { 
}
@media (max-width: 991px) { 
.header-area .navbar-collapse {
background: var(--backgrounds);
padding-left: 16px;
border-radius: 4px;
padding-right: 16px;
margin-top:22px;
}
.navbar-brand {
position: absolute;
left: 50%;
transform: translate(-50%);
}
.header-area .navbar-collapse {
padding: 12px 12px 0px;
border: 1px solid var(--primary);
background: var(--background);
}
.header-area .navbar-collapse .nav-link {
color: var(--secondery);
border-bottom: 0.8px solid var(--primary);
display: flex;
justify-content: space-between;
align-items: center;
}
.header-area .navbar-collapse .last-nav-links {
border-bottom: 1px solid transparent;
}
.header-area .navbar ul li a i {
font-size: 16px;
}
.header-area .navbar-collapse .nav-link.active {
color: #e5e5e5;
}
.header-area .right {
position: absolute;
top: 14px;
right: 12px;
}
.header-area .navbar ul li a:hover {
color: var(--secondery);
}
.md-colups {
position: absolute;
top: 3px;
right: 12px;
}
}
@media (max-width: 767px) { 
.header-area .right {
display: none;
}
}
@media (max-width: 576px) {
}