#header  {
    display:grid;
    grid-template-rows: 100px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas: 
    "a a a b b b b b b c c c "
    ;
    margin:auto;
    
}
#header1{
    grid-area: a;
}
#header2{
    grid-area: b;
   
}
#header3{
    grid-area: c;
}

@media only screen and (min-width:375px) and (max-width:768px)
{
  #header{
    width:100%;
    grid-template-rows: 80px 80px 80px;
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas: 
    "a"
    "b"
    "c";
  }
}
.headerimg{
    height:80%;
    width:70%;
    margin:4px 50px;
}

#header2 input[type=text] {
   
    width:80%;
    height:30px;
    font-size: 17px;
    padding:7px;
    margin-left: 10px;
    border:none;
  }

  
.elementsContainer{
    border:1px solid #dcdcdc;
    width:100%;
    margin-top: 20px;
  
}
.searchicon{
    color:#dcdcdc;
 
}
#header3{
    display:flex;
    justify-content: space-evenly;
}
#header3 > div{
    margin-top:35px;

}
#header3 > div:nth-child(2){
    margin-top:30px;

}
.hicon1{
    text-decoration: none;
    font-size:15px;
    color:#aca1a1;
    font-style: italic;
    font-family: Arial;
}

.active{
    background:white;
    border-radius:10px;
    text-decoration: none;
    font-family: Arial;
 }

.active:hover{
     background:white;
     transition:0s;
     color:rgb(247, 64, 192);
     text-decoration: none;
        
    }

/* Menu bar */

.menubar{
    width:100%;
    height:30px;


}

nav ul{
    padding : 0;
    margin : 0;
    float : left;
    margin-right: 30px;
    color:black;
    font-weight: bold;   

}
nav ul li{
    position : relative;
    text-decoration: none;
    display : inline-block;

}
nav ul li a{
  display : block;
  padding : 0 20px;
  color: black;
  text-decoration: none;
  line-height:30px;
  font-size:15px;
  font-family: 'Poppins', sans-serif;

}
nav ul ul a{
    color:gray;

}
nav ul li a:hover{
 color:#fc2779;

 
}
nav ul ul{
  position:absolute;
  display:none;
  top:30px;
}
nav ul ul h3{
    margin-left:20px;
    margin-bottom:2px;
    font-family: 'Poppins', sans-serif;
}
nav ul li:hover > ul{
  display:block;
  background-color: white;
  margin-left:20px;


  
}
nav ul ul li{
  width:250px;
  float:none;
  height:10px;
  position:relative;
  margin-top:3px;
 
  font-size:8px;
  font-weight: lighter;
  font-family: 'Poppins', sans-serif;
}
nav ul ul li a:hover{
    width:250px;
    position:relative;
    margin-left: 10px;
    overflow: hidden;
    z-index: 1;
    position: relative;
   }


  /* slider */
  #framew {
    margin: auto;
    width:100%;
    max-width: 100%;
    margin-top:0px;
    
}
/* .sliderimg{
    width:100%;
    background-position: none;
} */

#framew input[type=radio] {
    display: none;
}

#framew label {
    cursor: pointer;
    text-decoration: none;
}

#slides2 {
    padding: 0px;
    width:100%;
    z-index: 1;
}

#overflow {
    width: 100%;
    overflow: hidden;
}

#framea:checked~#slides2 .inner {
    margin-left: 0;
}

#frameb:checked~#slides2 .inner {
    margin-left: -100%;
}

#framec:checked~#slides2 .inner {
    margin-left: -200%;
}

#framed:checked~#slides2 .inner {
    margin-left: -300%;
}

#slides2 .inner {
    transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    width: 400%;
    line-height: 0;
    height: 300px;
}

#slides2 .frame {
    width: 25%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #FFF;
}
#controls2 {
    margin: -180px 0 0 0;
    width: 100%;
    height: 50px;
    z-index: 3;
    position: relative;
}
#controls2 label {
    transition: opacity 0.2s ease-out;
    display: none;
    width: 50px;
    height: 50px;
    opacity: .4;
}

#controls2 label:hover {
    opacity: 1;
}
#slides2 .frame_a {
    	
    background: url(https://cdn.shopify.com/s/files/1/0906/2558/files/SUGAR-FABULOUS-Landing-Page-Banner-1600-X-400-2_0ba884ad-4a1e-47d2-a28c-4f1d8fc9165b.jpg?v=1639392016);
}
#slides2 .frame_b {
		
    background: url(https://cdn.shopify.com/s/files/1/0906/2558/files/Quick-tips-banner-01-1920x453_17d02458-1164-4364-868d-06eda38143a7.jpg?v=1639041471);
}
#slides2 .frame_c {
		
    background: url(https://cdn.shopify.com/s/files/1/0906/2558/files/Quick-tips-banner-01-1920x453_17d02458-1164-4364-868d-06eda38143a7.jpg?v=1639041471);
}
#slides2 .frame_d {
		
    background: url(https://cdn.shopify.com/s/files/1/0906/2558/files/Quick-tips-banner-01-1920x453_17d02458-1164-4364-868d-06eda38143a7.jpg?v=1639041471);
}

#bullets2 {
    margin: 150px 0 0;
    text-align: center;
}

#bullets2 label {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: rgb(187, 186, 186);
    margin: 0 10px;
}

#framea:checked~#bullets2 label:nth-child(1),
#frameb:checked~#bullets2 label:nth-child(2),
#framec:checked~#bullets2 label:nth-child(3),
#framed:checked~#bullets2 label:nth-child(4) {
    background: #444;
}

@media screen and (max-width: 900px) {

    #framea:checked~#controls2 label:nth-child(2),
    #frameb:checked~#controls2 label:nth-child(3),
    #framec:checked~#controls2 label:nth-child(4),
    #framed:checked~#controls2 label:nth-child(1),
    #framea:checked~#controls2 label:nth-last-child(2),
    #frameb:checked~#controls2 label:nth-last-child(3),
    #framec:checked~#controls2 label:nth-last-child(4),
    #framed:checked~#controls2 label:nth-last-child(1) {
        margin: 0;
    }

    #slides2 {
        max-width: calc(100% );
        margin: auto;
    }
}

#maindiv{
   width:100%;
}
.headtag {
    font-size: 26px;
    /* color: #1B1919; */
    color: rgb(0, 0, 0);
    font-family: "Quicksand";
    text-align: center;
    margin-top: 50px;
  }
  
  #maincard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 550px;
    width: 94%;
    margin: auto;
    grid-gap: 20px;
    margin-top: 50px;
  }

  
  #mainp {
    font-size: 15px;
    color: #000000;
    font-family: "Neutraface Display Titling";
    margin-left: 5px;
  }
  
  .ptext {
    margin-left: 5px;
  }
  
  .ptext1 {
    color: #a8a5a5;
    margin-left: 5px;
    font-family: "Quicksand";
  }
  
  .card {
    position: relative;
    display: inline-block;
    height:550px;
    width:250px;
    

  }
  
  .card .imgtop {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
  }
  
  .card:hover .imgtop {
    display: inline;
  }
  
  .colorcard {
    display: flex;
  }
  
  .a {
    width: 16px;
    height: 16px;
  
    border-radius: 50%;
    background-color: rgb(253, 66, 66);
    border: 0;
  }
  
  .b {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: rgb(72, 253, 66);
    border: 0;
  }
  
  .c {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: rgb(255, 224, 87);
    border: 0;
  }
  
  .d {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: rgb(172, 253, 66);
    border: 0;
  }
  
  .e {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: rgb(66, 253, 159);
    border: 0;
  }
  
  .f {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: rgb(66, 194, 253);
    border: 0;
  }
  
  .g {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: rgb(122, 66, 253);
    border: 0;
  }
  
  .h {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: rgb(253, 66, 144);
    border: 0;
  }
  
  .i {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    border-radius: 50%;
    background-color: rgb(253, 66, 144);
    border: 0;
  }
  
  #bigcards {
    display: grid;
    grid-template-rows: repeat(3, 400px);
    grid-template-columns:1fr 1fr;
    width: 85%;
    margin: auto;
    grid-gap: 12px;
    margin-top: 100px;
  }
  #bigcards > div >img{
      margin-right:20px;
      width:100%;
  }
  @media only screen and (min-width: 0px) and (max-width: 700px) {
    #bigcards {
      grid-template-columns: 1fr;
    }
  }
  

  
  .smallcards {
    display: grid;
    grid-template-rows: 270px;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    margin: auto;
    grid-gap: 10px;
    margin-left: 10px;
  }
  

  .mediumcard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 270px;
    width: 100%;
    grid-gap: 15px;
  }

  .para {
    font-size: 14px;
    /* color: #1B1919; */
    color: rgb(0, 0, 0);
    font-family: "Quicksand";
    text-align: center;
  }
  
  /* slider */
  .margindiv {
    width: 50px;
    height: 50px;
  }
  
  #frame {
    margin: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 0px;
  }
  .sliderimg {
    width: 100%;
    background-position: none;
  }
  
  #frame input[type="radio"] {
    display: none;
  }
  
  #frame label {
    cursor: pointer;
    text-decoration: none;
  }
  
  #slides {
    padding: 0px;
    width: 100%;
    z-index: 1;
  }
  
  #overflow {
    width: 100%;
    overflow: hidden;
  }
  
  #frame1:checked ~ #slides .inner {
    margin-left: 0;
  }
  
  #frame2:checked ~ #slides .inner {
    margin-left: -100%;
  }
  
  #frame3:checked ~ #slides .inner {
    margin-left: -200%;
  }
  
  #frame4:checked ~ #slides .inner {
    margin-left: -300%;
  }
  
  #slides .inner {
    transition: margin-left 800ms cubic-bezier(0.77, 0, 0.175, 1);
    width: 400%;
    line-height: 0;
    height: 300px;
  }
  
  #slides .frame {
    width: 25%;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
  }
  #controls {
    margin: -180px 0 0 0;
    width: 100%;
    height: 50px;
    z-index: 3;
    position: relative;
  }
  #controls label {
    transition: opacity 0.2s ease-out;
    display: none;
    width: 50px;
    height: 50px;
    opacity: 0.4;
  }
  
  #controls label:hover {
    opacity: 1;
  }
  #slides .frame_1 {
    background: url(https://cdn.shopify.com/s/files/1/0906/2558/files/Quick-tips-banner-01-1920x453_17d02458-1164-4364-868d-06eda38143a7.jpg?v=1639041471);
  }
  #slides .frame_2 {
    background: url(https://cdn.shopify.com/s/files/1/0906/2558/files/Quick_Tips_-_Banner_1-1920x453_346249df-dc33-4806-98be-b6cba8ca30ca.jpg?v=1639042068);
  }
  #slides .frame_3 {
    background: url(https://cdn.shopify.com/s/files/1/0906/2558/files/Quick-tips-banner-01-1920x453_17d02458-1164-4364-868d-06eda38143a7.jpg?v=1639041471);
  }
  #slides .frame_4 {
    background: url(https://cdn.shopify.com/s/files/1/0906/2558/files/Quick-tips-banner-01-1920x453_17d02458-1164-4364-868d-06eda38143a7.jpg?v=1639041471);
  }
  
  #bullets {
    margin: 150px 0 0;
    text-align: center;
  }
  
  #bullets label {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #ccc;
    margin: 0 10px;
  }
  
  #frame1:checked ~ #bullets label:nth-child(1),
  #frame2:checked ~ #bullets label:nth-child(2),
  #frame3:checked ~ #bullets label:nth-child(3),
  #frame4:checked ~ #bullets label:nth-child(4) {
    background: #444;
  }
  
  @media screen and (max-width: 900px) {
    #frame1:checked ~ #controls label:nth-child(2),
    #frame2:checked ~ #controls label:nth-child(3),
    #frame3:checked ~ #controls label:nth-child(4),
    #frame4:checked ~ #controls label:nth-child(1),
    #frame1:checked ~ #controls label:nth-last-child(2),
    #frame2:checked ~ #controls label:nth-last-child(3),
    #frame3:checked ~ #controls label:nth-last-child(4),
    #frame4:checked ~ #controls label:nth-last-child(1) {
      margin: 0;
    }
  
    #slides {
      max-width: calc(100%);
      margin: auto;
    }
  }
  /* paragraph box */
  .parabox {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 430px;
    width: 78%;
    grid-gap: 25px;
    margin: auto;
  }

  .parabox > div > div {
    width: 70px;
    height: 110px;
    /* border: 1px solid red; */
    margin: auto;
    margin-top: 50px;
    border-radius: 40%;
  }
  .paraimg {
    border-radius: 40%;
  }
  .paradesign {
    font-size: 16px;
    font-family: "Quicksand";
    color: #4c4c4c;
  
    text-align: justify;
    letter-spacing: 1px;
  }
  .lastcards {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 170px;
    grid-gap: 5px;
    margin-top: 50px;
  }


  /* Footer */
  .container{
    background-color: black;
    color: white;
    width:100%;
    margin-top:20px;
    min-height:50px;
    }
  .container1{
      background-color: black;
      color: white;
      width:100%;
    
      min-height:50px;
      }
    #logo{
    width:70%;
    margin:auto;
    justify-content: end;
    text-align: center;
    }
    #content{
    width:80%;
    margin:auto;
    height:450px;
    display:grid;
    grid-template-columns: repeat(4,1fr);
    /* border:1px solid red; */
    text-align:centre;
    }
    #content>div{
    font-family:Quicksand;
    width:90%;
    height:100%;
    /* border:1px solid yellow; */
    margin:10px;
    color:gray;
    font-size:16px;
    line-height:30px;
    }
    #content>div>h3{
    color:white
    }
    #content>div>div>a{
    color:gray;
    text-decoration: none;
    }
    #content>div>div>a:hover{
    text-decoration: underline;
    color:white
    }
    /* #content>a{
    color:red;
    } */
    .iOG{
    width:80%;
    display:grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap:10px
    }
    i{
    font-size:30px;
    padding:10px;
    color:gray;
    cursor:pointer;
    }
    #Email>div>input{
    border:none;
    background: transparent;
    color:white
    }
    #Email>div>button{
    padding:10px 30px;
    border-radius: 5px;
    background-color:#fc2779;
    cursor:pointer;
    border:none
    }