/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto+Condensed&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Roboto+Condensed&display=swap');


@media (max-width: 960px) {
  /* For a screen < 960px, this CSS will be read */
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  /* For a screen < 720px, this CSS will be read */
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  /* For a screen < 540px, this CSS will be read */
  .container {
    width: 300px;
  }
}
.header {
 
  padding: 90px;
  text-align: center;
  background: #1abc9c;
  color: white;
  font-size: 30px;
}
.header p{
    opacity: 0;
    animation: fadeInTop 4s ease forwards;
}
@keyframes fadeInTop { 
    0%{transform: translateY(-50px);}
    100%{ opacity: 1;
        transform: translateY(0px); }
  }
  h1{ font-size: 80px;
color: #ffffff;
margin: 0 ;
font-weight: normal;
font-family: 'Great Vibes', cursive;}
h1{ opacity: 0;
    animation: fadeInTop 2s ease forwards;
    animation-delay: 2s;}


  * {box-sizing:border-box}

/*default style*/
body{ margin: 0;
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
    background-color: #f3f2f1;
 }

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


a{ text-decoration: none;
color: black; }

:before,:after{ 
box-sizing: border-box; }
img{ max-width: 100%;
vertical-align: middle; 
}
.container{ 
max-width: 1140px;

margin: auto; }
header,
section,
footer{  display: block;
    width: 100%;
 }
 .row{ display: flex;
 flex-wrap: wrap; }
 .justify-content-between{
    justify-content: space-between;
 }
 .justify-content-center{
    justify-content: center;
 }
 .align-items-centre{ 
 align-items: center; }

 .section-title{ 
 flex:0 0 100%;
 max-width: 100%;
 padding: 0 15px;
 text-align: center;
 margin-bottom: 60px;
 }
 

 .section-title h2{
    font-size: 45px;
    color: #000000;
    font-weight: 700;
    font-family: "Great Vibes",cursive;
    letter-spacing: 2px;
    margin: 0;
    text-transform: capitalize;}

 /* header*/ 
 .header{ position: absolute;
 width: 100%;
 left: 0;
 top: 0;
 z-index: 99;
 border-bottom: 1px solid white; 
transition: all 0.5s ease;}
 .header.fixed{background-color: #ffffff;}




.header .logo a{font-size: 30px;
color: #ffffff;
font-weight: bold;
font-family: 'great vibes',cursive;
letter-spacing: 12px;
text-transform: uppercase;
width: 60px;}

.header .hamburger-btn{
    display: inline-block;
    height: 34px;
    width: 40px;
    border-radius: 3px;
    border: 1px solid #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header .hamburger-btn span{ 
display: block;
height: 1px;
width: 16px;
background-color: #ffffff;
position: relative; }

.header .hamburger-btn span:before,
.header .hamburger-btn span:after{
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
}




.header .nav ul{ list-style: none;
margin: 0;
padding: 0; }


.header .nav ul li{ display: inline-block; 
margin-left: 30px;}


.header .nav ul li a{display: block;
padding: 30px 0;
color: #ffffff;
font-size: 15px;
text-transform: uppercase;
transition: colour 1.9s ease;}


.header .nav ul li a:hover{color: red;}

/*home section*/

.home-section .slide{ position: absolute;
background-size:cover;
background-position: center; 
z-index: -1;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: all 2s ease-in-out;}

.home-section .slide.active{opacity: 1;
visibility: visible;}

.home-section .slide:before{ content: '';
position: absolute;
left: 0;
top: 0; 
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
z-index: -1;}




.home-section { min-height: 100vh; 
position: relative;}

.home-section .row{ 
min-height: 100vh; }

.home-section .home-content{
flex: 0 0 100%;
max-width: 100%;
padding: 0 15px;
text-align: center;}

.home-section .home-content p{
    font-size: 24px;
    color: black;
    margin: 0 0 15px;
    font-family: 'Great Vibes';
    font-weight: bold;
}

.home-section .slide.active .home-content p{
    opacity: 0;
    animation: fadeInTop 4s ease forwards;
}
@keyframes fadeInTop { 
    0%{transform: translateY(-50px);}
    100%{ opacity: 1;
        transform: translateY(0px); }
  }

.home-section .home-content h1{ font-size: 80px;
color: black;
margin: 0 ;
font-weight: normal;
font-family: 'Great Vibes', cursive;}

.home-section .slide.active .home-content h1{ opacity: 0;
    animation: fadeInTop 2s ease forwards;
    animation-delay: 2s;

}

.home-section .slide.active .home-content span{ opacity: 0;
    animation: fadeInTop 2s ease forwards;
    animation-delay: 2s; }

.home-section .home-content span{ 
font-size: 20px;
display: inline-block;
color: #ffffff;
padding: 7px 30px; }
.home-section .home-content span a{color: white;}

.categories{margin: 70px 0px;
}

.col-3 { flex-basis: 32%;
min-width: 250px;
margin-bottom: 30px;

margin-left: auto;
margin-right: auto; }

.col-3 img{
    width: 100%;
}
.col-4{ flex-basis: 25%;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 50px;
    transition: transform 0.7s;
}

.container .col-4 h5{ color: red; }

.product-title { text-align: center;
margin: 0px auto 80px ;
position: relative;
line-height: 60px;
color: #555; }

.product-title::after{
content: '';
background: #D5CAF6;
width: 120px;
height: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}

.footer{
    position: absolute;
    background-color: #111;
    height: auto;
    width: 100vw;
    font-family: "open sans-serif;";
    padding-top: 40px;
    color: #fff;

 }
 .footer-content{ 
 display: flex; 
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;}

.footer-content h3{ 
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
 }

 .footer-content p{ max-width: 500px;
 margin: 10px auto;
 line-height: 28px;
 font-size: 14px;
  }

  .socials{ 
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1rem 0 3rem 0;
   }

.socials li{ margin: 0 10px; 
}

.socials a { text-decoration: none;
color: #fff;
 }

 .socials a i {
    font-size: 1.1rem;
    transition: color 2s ease;
 }
.socials a:hover i{ color: aqua; }

.footer-bottom{ background-color: #000;
width: 100vw;
padding: 20px 0;
text-align: center;}

.footer-bottom p{ font-size: 14px;
word-spacing: 2px;
text-transform: capitalize; }

.footer-bottom span { text-transform: uppercase;
opacity: 0.4; 
font-weight: 200;}


.col-4 :hover{ transform:translateY(-5px);
cursor: pointer;}
.span: hover{transform: translateY(-5px);
    cursor: pointer;}




* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 25px;
  margin-top: -50px;
  color: black;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: black;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

h5{ text-transform: capitalize; 
color: red;}

h7{ text-transform: capitalize; 
color: black;}
h9{ text-transform: capitalize; 
color: red;}

/* Add a black background color to the top navigation */
.topnav {
  background-color: white;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: lavender;
  color: black;
  text-decoration: none;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: lavender;
  color: black;
  text-decoration: none;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

body, html {
    height: 100%;
}

/* The hero image */
.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("images/back-1.jpg");max-width:100%;height:auto;

  /* Set a specific height */
  height: 80%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}