@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');



body {
	font-family: 'Poppins', sans-serif;
	color: #4f4f51;
}

h1, h2, h3, h4, h5 {
	font-family: 'Oswald', sans-serif;
	color: #130041;
}
p {
	font-size: 12px;
	letter-spacing: .025rem;
	line-height: 1.8;
}

.highlight {
	color: #53d8ce;
}

.bg-light {
	background-color: transparent !important;
}
.header .carousel-item {
	height: 100vh;
	min-height: 300px;
}
.header .carousel-caption {
	bottom: 220px;
	
}

.header {
	z-index: 1;
}
.header .topnav {
	z-index: 2;
	left: 50%;
	transform: translateX(-50%);
}
.topnav img {
	filter: brightness(0) invert();
}

.header .carousel-caption h5 {
	font-size: 45px;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-top: 25px;
	color: #fff!important;
}
.header .carousel-caption p {
	width: 60%;
	margin: auto;
	font-size: 14px;
	line-height: 1.9;
}
.header .carousel-caption a {
	text-transform: uppercase;
	text-decoration: none;
	background: #53d8ce;
	padding: 10px 30px;
	display: inline-block;
	color: #fff;
	margin-top: 15px;
	border-radius: 50px;
	font-family: 'Oswald', sans-serif;
}

@media only screen and (max-width: 767px) {	
	.header .carousel-caption {
		bottom: 165px;
	}
	.header .carousel-caption h5 {
		font-size: 17px;
	}
	.header .carousel-caption a {
		padding: 10px 15px;
		font-size: 15px;
	}
}

.imgbox h5 {
	letter-spacing: .025rem;
}
.imgbox {
	position: relative;
	z-index: 1;
	transition: .2s;
    overflow: hidden;
    
}
.imgbox img {
   
}
.imgbox::before {
	content: "";
	background-color: #130041;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: .9;
	z-index: -1;
	transition: .4s;
    transition-timing-function: cubic-bezier(.17,.4,.6,.2);   
    mix-blend-mode: multiply;
}



.imgbox:hover::before {
	
    background-color: #53d8ce;
    opacity: .8;
    mix-blend-mode: screen;
}

.imgbox::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    content: "";
    filter: saturate(0);
    z-index: -2;
    transition: .2s;
    transition-timing-function: cubic-bezier(.17,.67,.83,.67); 
}

.imgbox:hover::after {
    filter: saturate(0);
}

.imgbox1::after {
	background-image: url("images/img1.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.imgbox2::after {
	background-image: url("images/img2.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.imgbox3::after {
	background-image: url("images/img3.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.imgbox4::after {
	background-image: url("images/img4.jpg");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.prod {
	border: solid #f8e2de 1px;
	transition: .2s;	
}

.prod:hover {
	border: solid #53d8ce 1px;
}
.prod img {
	transition: .6s;
	opacity: 1;
}
.prod:hover img {
	opacity: .2;
	transition: .1s;
	
}

.bottles {
	position: relative;
}

.prod .buttons {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.25);
	opacity: 0;
	transition: .4s ease-in;
	transition-delay: 0;
	
}

.prod:hover .buttons{
	opacity: 1;
	transition: .4s;
	transform: translate(-50%, -50%) scale(1);
	transition-delay: .2s;
}

.btn {
	font-family: 'Oswald', sans-serif;
	background-color: #130041;
	color: #fff;
	min-width: 120px;
	font-size: 12px;
	border-radius: 30px;
	transition: .2s;
}
.btn:hover {
	background-color: #53d8ce;
	color: #fff;
	
}

.carousel-caption {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	bottom: initial;
}


@media (max-width: 767px) {
    .carousel-itemized .carousel-inner .carousel-item > div {
        display: none;
    }
     .carousel-itemized .carousel-inner .carousel-item > div:first-child {
        display: block;
    }
}

 .carousel-itemized .carousel-inner .carousel-item.active,
 .carousel-itemized .carousel-inner .carousel-item-next,
 .carousel-itemized .carousel-inner .carousel-item-prev {
    display: flex;
}

/* medium and up screens */
@media (min-width: 768px) {
    
     .carousel-itemized .carousel-inner .carousel-item-end.active,
     .carousel-itemized .carousel-inner .carousel-item-next {
      transform: translateX(25%);
    }
    
     .carousel-itemized .carousel-inner .carousel-item-start.active, 
     .carousel-itemized .carousel-inner .carousel-item-prev {
      transform: translateX(-25%);
    }
}

 .carousel-itemized .carousel-inner .carousel-item-end,
 .carousel-itemized .carousel-inner .carousel-item-start { 
  transform: translateX(0);
}


.btmdiv {
	background-color: #80f2fa;
}
footer {
	background-color: #130041;
	color: #fff;
}

.topnav a {
	color: #fff;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	letter-spacing: .025rem;
	font-weight: 300;
	transition: .2s;
}
.topnav p {
	color: #fff;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	letter-spacing: .025rem;
	font-weight: 300;
	transition: .2s;
}
.topnav a:hover {
	color: #53d8ce;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	letter-spacing: .025rem;
	font-weight: 300;
}


nav {
	background-color: rgba(255,255,255,.9)!important;
	z-index: 9999!important;
	margin-top: -80px;
	transition: .4s ease-out;
}

nav.shrink {
	margin-top: 0;
}

.nav-link {
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	letter-spacing: .025rem;
	font-weight: 300;
	transition: .2s;
	text-transform: uppercase
}


footer img {
	filter: brightness(0) invert();
}
footer a {
	color: #fff;
	text-decoration: none;
	font-family: 'Oswald', sans-serif;
	font-size: 14px;
	letter-spacing: .025rem;
	font-weight: 300;
	transition: .2s;
	
}
footer a:hover {
	color: #fff;
	text-decoration: none;
	opacity: .5;
	
}