@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Freehand&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Just+Another+Hand&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fasthand&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap');



html {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
 
 
}

.logo {
  position: relative;
  scale: 1.2;
  top: -5px;
  left: 35px;
  
 
  
}

/* navbar */
.navbar {
  
  background-color: #212a58;
 height: 50px;
  
  
  
}

.offcanvas {
  background-color: #fafafa;
 font-family: Vazirmatn,sans-serif;
 

}

.navbar-toggler-icon {
  margin-bottom: 5px;
}
.offcanvas-title {
  color: #161d3f;
  font-weight: 600;
  font-size: 32px;
}
.navbar-toggler {
  border: none;
  scale: 1.5;
  margin-right: 25px;
  
}
.nav-link {
  color: #161d3f;
  float: right;
  font-weight: 400;
  font-size: 24px;
  flex-direction: column;
  column-gap: 18px;
}
.dropdown-menu {
  background-color: #fafafa;
  flex-direction: column;
  column-count: 1;
  text-align: center;
}
.dropdown-item {
  padding-top: 15px;
  font-size: 22px;
  text-align: center;

}
.dropdown-item:hover {
  color: #22577e;
  
}
.nav-link:hover {
  color: #22577e;
}
.fa-pen-to-square {
  float: right;
  text-align: justify;
}
.fa-highlighter{
  font-size: 12px;
  float: right;
}
.fa-pencil{
  font-size: 12px;
  float: right;
}
.fa-eraser{
  font-size: 12px;
  float: right;
}

/* home start */
/* swiper */

.swiper-container {
  
  width: 100%;
  max-height: 100% ;
  
  margin-left: auto;
  margin-right: auto;
}
.swiper-container2 {
  
  width: 100%;
  max-height: 100%;
 
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  
  padding: 10px;
  height: calc((100% - 30px) / 2);
  
}




  

.container {
  margin: 0;
  position: relative;
  overflow: hidden;
  max-width: 100vw;
  max-height: 940px;
  background-color: #fafafa;
 
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 33px;
  box-shadow: 10px 6px 6px 2px rgba(21, 20, 20, 0.427);
  

}
/* all products */

.item-container {
  max-width: 100vw;
  height: 513px;
  background-color: #212a58;
  justify-content: center;
  overflow: hidden;
  
}
.item-container h1 {
  font-family: Just Another Hand, sans-serif;
  color: #fafafa;
  padding: 15px;
  text-align: center;
  letter-spacing: 1 px;
  font-size: 48px;

}
#underline  {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  
  justify-content: center;
 
}


.products {
  display: flex;
  flex-direction: row;
  
}

ul > li {
  display: inline-block;
  
}




.item {
  position: relative;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
  transition: all 0.1s ease;
  
 
}
.item:hover {
  cursor: pointer;
  animation: comeUp 0.2s ease-in forwards;
}
 .item:before  .brush{
  opacity: 1;
  animation: fadeIn 2s ease-in forwards;
  animation: scaleUp 1s ease-in forwards;
}




.details {
  min-width: 100vw;
  height: 300px;
  background-color: #161d3f ;
  justify-content: center;
  
}
#title {
  padding-top: 15px;
  text-align: center;
  color: #fafafa;
  font-family: lalezar, sans-serif;
  font-size: 64px;


}
#description  {
  padding-top: 5px;
  text-align: center;
  color: #fafafa;
  font-family: Vazirmatn, sans-serif;
  font-size: 40px;

}
.button-container {
  position: relative;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;

  

}
.button {
  margin: 0;
  position: absolute;
}
.button a {
  color: #fafafa;
  text-decoration: none;
}
.button a:active {
  color: #161d3f;
  text-decoration: dashed;
}
.btn-primary {
  
  --bs-btn-font-weight: 600;
  --bs-btn-color: #fafafa;
  --bs-btn-bg: #FF7E67;
  --bs-btn-border-color: #22577e;
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
   font-size: 18px;
   font-family: Vazirmatn, sans-serif;
 
 
  
}


#fashion img{
  position: absolute;
  z-index: 2;
}
#smart-polish img {
  position: absolute;
  z-index: 3;
}
#golden img {
  position: absolute;
  z-index: 3;
}
#highlighter img {
  position: absolute;
  z-index: 3;
}
#fashion-sketch img {
  position: absolute;
  z-index: 3;
}

.brush  {
  top: 160px;
  left: 140px;
  position: relative;
  opacity: 0;
  z-index: 1;
  
  
}
/* about */

.pastel-container {
  width: 100vw ;
  height: 700px;
  overflow: hidden;
  background-color: #212a58;
 
}
  .pastel-container h1 {
  float: right;
  
  font-family: lalezar, sans-serif;
  margin-top: 25px;
  color: #fafafa;
  font-size: 48px;
  text-shadow: 2px 2px #444444;
}
.pastel-container p {
  top: 20px;
  padding-right: 180px;
  position: relative;
  color: #fafafa;
  font-size: 18px;
  font-family:  Vazirmatn , sans-serif;
  text-align: right;
  
  
}
#Persiantext {
  padding-top: 85px;
  float: left;
  width: 50vw;
  height: 100vh;
}
#englishtext {
  text-align: left;
  float: right;
  width: 50vw;
  height: 450px;
  font-family: Arial, Helvetica, sans-serif;
}
.logocontainer{
  position: relative;
  top: -620px;
  left: 65%;
  height: 450px;
  width: 100vw;
  display: grid;
  overflow: hidden;
}
.logocircle {
  display: flex;
  margin-left: 30px;
  position: relative;
  top: 10px;
  left: 39.5%;
  height: 80px;
  width: 80px;
  border-radius: 150px;
  background-color: rgba(249,249,249,0.2);
  object-fit: contain;

}

#sms img {
  display: flex;
  object-fit: contain;
  padding-top: 5px;
  padding-left: 5px;
  width: 75px;
  height: 75px;
  filter: grayscale(100%);
}
#smartkids img {
  width: 75px;
  height: 75px;
  object-fit: contain;
  padding-left: 6px;
  padding-top: 9px;
  filter: grayscale(100%)
}
#smartkids img:hover {
  filter: none;
}
#smartprince img {
  filter: grayscale(100%);
}
#sms img:hover {
  filter: none;
}
#smartprince img:hover{filter: none;}
.logocircle:hover {
  scale: 1.2;
  background-color: rgba(249,249,249,0.8);

}
/* footer */
.social-media {
  width: 100vw;
  height: 190px;
  background-color: #fafafa;
  
}

.logo-footer {
  height: 70px;
  background-color: #212a58;

  width: 100vw;
  z-index: 0;
  position: relative;
}
.logo-footer a {
 cursor: pointer;
 
 
}
.circle {
  background-color: #212a58;
 
  
  width: 100px;
  height: 100px;
  z-index: 1;
  border-bottom-right-radius: 50% ;
  border-bottom-left-radius: 50%;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
}
.logo-footer img {
   padding-bottom: 20px;
   display: flex;
   width: auto;
   height: 125px;
   margin-left: auto;
   margin-right: auto;
   justify-content: center;
   
}
.footer {
   max-height: 100px;
   max-width: 100vw;
   background-color: #444444;

}

.addreses {
  float: right;
  margin-top: 30px;
  text-align: right;
  margin-right: 40px;
}
.social-container h1{
  font-family: lalezar, sans-serif;
  color: #161d3f;
  font-size: 24px;
}
.fa-solid {
  color: #161d3f;
  font-size: 18px;
  position: relative;
  top: -5px;
}
.addreses p {
  font-family: Vazirmatn , sans-serif;
  color: #22577e;
  font-size: 18px;
  font-weight: 400;
  margin-right: 20px;
}
.phones {

  float: left;
  margin-left: 60px;
  margin-top: 25px;
  
}
.phones p {
  font-family: Vazirmatn , sans-serif;
  color: #161d3f;
  font-size: 18px;
  font-weight: 400;
  margin-right: 20px;
  text-align: left;

  margin-left: 50px;
  margin-top: -40px;
  

}
.fa-phone {
  text-align: left;
  margin-left: 0;
  font-size: 24px;
  padding-top: 25px;
  position: relative;
  top: -20px;
  
}
.follow {
 
 text-align: center;
 margin-top: 15vh;
 font-family: lalezar, sans-serif;
 color: #161d3f;
}
.follow h1 {
  font-size: 24px;
}
.fa-brands {
  color: #161d3f;
  letter-spacing: 30px;
  font-size: 24px;
}
/* footer saart */

footer {
  height: 20px;
  background-color: #fafafa;
}
footer h3{
  text-align: center;
  color: #73777B;
  font-size: 14px;
}
footer span {
  font-family: 'Freehand', cursive;;
  font-size: 18px;
}
footer a {
  text-decoration: none;
  color: #73777B;
}
footer a:hover {
  cursor: pointer;
  color: #67d6ff;

}
/* end pageindex */

/* animation */
 @keyframes comeUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px
     );
  }
 }
 @keyframes fadeIn {
   from {
    filter: opacity(0);
   }
   to {
    filter: opacity(1);
   }
 }
 @keyframes scaleUp {
  from {
   transform: scale(0.7);
  }
  to {
   transform: scale(1);
  }
}

/* end of home  */
/* writting page start */

.landing-container {
  
  width: 100vw;
  height: 700px;
  background-color: #fafafa;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='72' viewBox='0 0 36 72'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a4817f' fill-opacity='0.2'%3E%3Cpath d='M2 6h12L8 18 2 6zm18 36h12l-6 12-6-12z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  overflow: hidden;
 
}
.title-container {
  width: 50vw;
  height: 600px;
  float: left;
  
}

.title-container h1 {
  font-size: 120px;
  color: #212a58;
  font-weight: 600;
  font-family: 'Fasthand', cursive;
  text-align: center;
  padding-top: 20vh;
  text-shadow: 2px 2px #A4817F;
  

}
.title-container h2 {
  color: #161d3f;
  font-weight: 600;
  font-family: Arial, Helvetica, sans-serif;
  padding-left: 200px;
  font-size: 18px;
  

}
.banner {
  float: right;
  width: 50vw;
  height: 650px;
}
.banner img {
  
  height: 600px;
  float: right;
  padding-top: 20px;
  padding-right: 60px;
   
}
.golden-container {
  width: 100vw;
  height: 500px;
  background-color: #161d3f;
}
.golden-container h1 {
  color: #fafafa;
  text-align: center;
  padding-top: 40px;
  font-family: Just Another Hand;
  font-size: 64px;
  font-weight: 400;
  text-shadow: 3px 3px #444444;
}
.golden-roller {
  margin-top: 30px;
  width: 100px;
  height: 100px;
  position: relative;
  
  
} 
.golden-roller img {
  width: 85%;
  height: 100%;
  position: absolute;
  display: flex;
  justify-content: center;
  padding-top: 20px;
  
 
}
#blueG{
  z-index: 4;
  animation: fadeIn 10s linear infinite;
  animation-delay:  0s;
  animation-fill-mode: forwards;
}
#blackG{
  z-index: 1;
  animation: fadeIn 10s  linear infinite;
  animation-delay: 6s;
  animation-fill-mode: forwards;
}
#greenG {
  z-index: 2;
  animation: fadeIn 10s linear infinite;
  animation-delay: 4s;
  animation-fill-mode: forwards;
}
#redG {
  z-index: 3;
  animation: fadeIn 10s linear infinite;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}
.textGolden {
  width: 50vw;
  height: 100px;
  margin-top: 60px;
  margin-left: auto;
  margin-right: auto;
}
.textGolden p {
  font-size: 18px;
  text-align: center;
  color: #fafafa;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-shadow: 2px 2px #444444;
}
@keyframes fadeIn {
  from {
    filter: opacity(0);
  }
  to{
    filter: opacity(1);
  }
}

/* fashion container */

.fashion-container {
  height: 480px;
  width: 100vw;
  background-color: #fafafa;
  background-size: 20px 20px;
  
  overflow: hidden;
}
.title {
  height: 100px;
 float: right;
 margin-top: -100px;
 
}
.title h1 {
  font-size: 120px;
  color: #161d3f;
  font-weight: 800;
  font-family: 'Fasthand', cursive;
  text-align: center;
  padding-top: 20vh;
  
  font-size: 40px;
  text-align: right;
  margin-right: 250px;
}
.title h2 {
  font-size: 18px;
  text-align: right;
  margin-right: 50px;
  padding-left: 922px;
  color: #161d3f;
  font-weight: 600;
  padding-top: 18px;
  font-family: Arial, Helvetica, sans-serif;
}
.colors {
  width: 25vw;
  height: 300px;
  float: right;
  
  margin-left: auto;
  margin-top: 200px;
  margin-right: 150px;

}

.fashion-circle{
  margin-bottom: 10px;
margin-right: 18px;
height: 50px;
width: 50px;
border: 2px solid #fafafa;
border-radius: 50%;
display: inline-block;
text-align: center;


}
.fashion-circle:hover {
  cursor: pointer;
  border: 4px solid #fafafa;
  
}

#rich-black-fogra-29-circle{background-color: #ffadadff;}
#blue-sapphire-circle{background-color: #ffd6a5ff;}
#viridian-green-circle{background-color: #fdffb6ff;}
#middle-blue-green-circle{background-color:#caffbfff;}
#medium-champagne-circle{background-color: #9bf6ffff;}
#gamboge-circle{background-color: #ee9b00ff;}
#alloy-orange-circle{background-color: #fafafa;}
#rust-circle{background-color: #ffc6ffff;}
#rufous-circle{background-color: #bdb2ffff;}
#ruby-red-circle{background-color: #a0c4ffff;}

.fashionSeries {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 50vw;
  height: 500px;
  
}

.fashion-brush {
  margin-top: 135px;
  margin-left: -130px;
  margin-right: auto;
  width: 300px;
  opacity: 0.8;
  height: 180px;
  position: absolute;
  z-index: 1;
  
  
}

.fashionBody {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  margin-top: -120px;
}
.cap-changer {
  position: relative;
  top: -70px;
  z-index: 3;
  transform: translate(-70%, -70%);
  
  
}


.fashionBody:hover ~
.cap-changer  {
  animation: cabUp 1s ease-in forwards;
}
@keyframes cabUp {
  from {
    transform: translate(-78%, -80%);
  }
  to {
    transform: translate(-78%, -200%);
  }
}
/* rose container */
.rose-container {
  width: 100vw;
  height: 600px;
 

   background: linear-gradient(32deg, #ffadad, #ffd6a5, #fdffb6, #caffbf, #9bf6ff, #a0c4ff, #bdb2ff, #ffc6ff, #fffffc);
    background-size: 1800% 1800%;

    -webkit-animation: roseWrite 24s ease infinite;
    -moz-animation: roseWrite 24s ease infinite;
    animation: roseWrite 24s ease infinite;
}

@-webkit-keyframes roseWrite {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
}
@-moz-keyframes roseWrite {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
}
@keyframes roseWrite {
    0%{background-position:0% 96%}
    50%{background-position:100% 5%}
    100%{background-position:0% 96%}
}

/* rose swipper */

.roseSwiper {
  
  width: 100vw;
  position: relative;
}
.roseSwiper img {
  height: 550px;
}
.swiper-wrapper {
  padding-top: 25px;
 
}

.cards-writting:hover {
  scale: 1.02;
}
/* all products */
.all-products {
  width: 100vw;
  height: 100vh;
  background-color: #161d3f;
}
.productsWritting {
  width: 100vw;
  height: 55vh;
 overflow: hidden;
  
}
.productsWritting img {
 height: 350px;
  position: relative;
  left: 5px;
  top: 40px;
 
 
}
.productsWritting h2 {
  color: #fafafa;
  font-family: 'Nerko One', cursive;
 transform: rotate(90deg);
 position: relative;
 left: -90px;
 top: -20px;
}
.productsWritting h2:hover {
  color: #fa8140;
}
.detailsWritting {
  width: 100vw;
  height: 35vh;
  background-color: #212a58;
  display: flex;
  justify-content: center;
}
#titleWritting {
  color: #fafafa;
  font-family: Just Another Hand, sans-serif;
  position: absolute;
  font-size: 36px;
  left: 570px;
  top: 560px;
}
#descriptionwritting {
  color: #fafafa;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 200;
  position: relative;
  top: 80px;
  left: -25px;
  font-size: 24px;
}
.itemWritting {
  position: relative;
  top: 80px;
  left: 150px;
  width: 290px;

  transition: all 0.1s ease;
  
 
}
.itemWritting:hover {
  cursor: pointer;
  animation: comeUp 0.2s ease-in forwards;
}

.alltitle {
text-align: center;
padding-top: 25px;
}

.alltitle h1 {
  font-family: 'Freehand', cursive;;
  color: #fafafa;
  text-shadow: 4px 4px #444444;
}

/* package container */
.package-container {
  width: 100vw;
  height: 380px;
  overflow: hidden;
  background-color: #212a58;
}
.card {
  margin-left: 10px;
  margin-top: 20px;
  width: 320px;
  height: 350px;
  border-radius: 15px;
  box-shadow: 10px 6px 6px 2px rgba(21, 20, 20, 0.427);
}
.card img {
  object-fit: cover;
  width: 300px;
  height: 250px;
}
.card-text {
  font-family: Vazirmatn, sans-serif;
  color: #444444;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  text-align: right;
}

/* end of writting */
/* highlight page start */
.highlighterBanner {
  width: 100vw;
  height: 50vh;
  overflow: hidden;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
}
.highlighterBanner img {
  height: 100vh;
}
/* boldcontainer */
.boldcontainer {
  width: 100vw;
  height: 550px;
  overflow: hidden;
  background-color: #212a58;
background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 0C6.716 0 0 6.716 0 15c8.284 0 15-6.716 15-15zM0 15c0 8.284 6.716 15 15 15 0-8.284-6.716-15-15-15zm30 0c0-8.284-6.716-15-15-15 0 8.284 6.716 15 15 15zm0 0c0 8.284-6.716 15-15 15 0-8.284 6.716-15 15-15z' fill='%23161d3f' fill-opacity='0.37' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.detailbold {
  float: right;
  width: 50vw;
}
.detailbold h1 {
  color: #fafafa;
  font-family: 'Freehand', cursive;
  padding-top: 50px;
  font-size: 48px;
}
.detailbold ol {
  list-style-type: circle;
}
.detailbold li {
  color: #fafafa;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 20px;
  font-size: 18px;
  font-weight: 400;
}
.bannerbold {
  float: left;
  width: 50vw;

}
.bannerbold img {
  width: 450px;
  height: auto;
}
/* boldroller */
.highlightshowcase {
  width: 100vw;
 height: 420px;
 background-color: #212a58;
}
.highlighterroller {
  width: 450px;
  height: 150px;
  display: flex;
  padding-top: 50px;
  justify-content: center;

}
.highlighterroller h1 {
  color: #fafafa;
  font-family: 'Nerko One', cursive;
  position: relative;
  left: 450px;
}
.highlightshowcase h2 {
  color: #fafafa;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
  text-align: center;
  font-size: 18px;
  top: 120px;
  padding-left: 250px;
  padding-right: 250px;
}
 
.highlighterroller img {
  position: absolute;
  scale: 0.5;
}
#blueBold {
  animation: fadeIn 12s linear infinite;
  animation-delay:  10s;
  animation-fill-mode: forwards;
  z-index: 1;
}
#greenBold {
  animation: fadeIn 12s linear infinite;
  animation-delay:  8s;
  z-index: 2;
}
#orangeBold{
  animation: fadeIn 12s linear infinite;
  animation-delay:  6s;
  z-index: 3;
}
#yellowBold {
  animation: fadeIn 12s linear infinite;
  animation-delay:  4s;
  z-index: 4;
}
#pinkBold {
  animation: fadeIn 12s linear infinite;
  animation-delay:  2s;
  z-index: 5;
}
#purppleBold {
  animation: fadeIn 12s linear infinite;
  animation-delay:  0s;
  z-index: 6;
}



 h1:hover {
  color: #460863;
}
.smartboldcontainer {
  width: 100vw;
  background-color: #3D1E4E;
}
.smartboldcontainer img {
  width: 100vw;
}
/* highlight container */
.highlighter-container {
  height: 480px;
  width: 100vw;
  background-color: #fafafa;
  background-size: 20px 20px;
  overflow: hidden;
}
.titleHigh {
  height: 100px;
 float: right;
 margin-top: -100px;
 
}

.titleHigh h1 {
  font-size: 64px;
  color: #161d3f;
  font-weight: 600;
  font-family: 'Nerko One', cursive;
  text-align: center;
  padding-top: 20vh;
  text-shadow: 2px 2px #fafafa;
  font-size: 40px;
  text-align: right;
  padding-right: 10px;
  padding-left: 450px;
}
.titleHigh h2 {
  font-size: 18px;
  text-align: left;
  margin-top: 20px;
  color: #161d3f;
  text-shadow: 1px 1px #fafafa;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  padding-left: 450px;
  padding-right: 50px;
}
.titleHigh span {
  color: #444444;
  text-shadow: 1px 3px 2px whitesmoke;
  background-color: rgba(237,119,222,0.8);
 
}
.Highcolors {
  width: 25vw;
  height: 300px;
  float: right;
  
  margin-left: 250px;
  margin-top: 260px;
  margin-right: 19px;

}

.highlighter-circle{
  margin-bottom: 10px;
margin-right: 18px;
height: 50px;
width: 50px;
border: 2px solid #fafafa;
border-radius: 50%;
display: inline-block;
text-align: center;


}
.highlighter-circle:hover {
  cursor: pointer;
  border: 4px solid #fafafa;
  
}

#redHigh{background-color: #ffadadff;}
#orangeHigh{background-color: #ffd6a5ff;}
#yellowHigh{background-color: #fdffb6ff;}
#greenHigh{background-color:#caffbfff;}
#blueHigh{background-color: #9bf6ffff;}
#purppleHighcircle{background-color: #bdb2ffff;}

.highlighterSeries {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 50vw;
  height: 100vh;
  
}



.highlighterBody {
  position: relative;
  z-index: 2;
  width: 120px;
  margin-top: 20px;
  
}
.highlighterChanger img{
  max-height: 500px;
}
#highCard {
  
  margin-left: 250px;
  

}

/* mechanichal start*/
/* sketch container */
.sketch-container {
  height: 480px;
  width: 100vw;
  background-size: 20px 20px;
  background-color: #fafafa;
  overflow: hidden;
}
.titlesketch {
  height: 100px;
 float: right;
 margin-top: -100px;
 
}
.titlesketch h1 {
  font-size: 120px;
  color: #161d3f;
  font-weight: 600;
  font-family: 'Fasthand', cursive;
  text-align: center;
  padding-top: 20vh;
  text-shadow: 1px 1px #fafafa;
  font-size: 40px;
  text-align: right;
  margin-right: 150px;
}
.titlesketch h2 {
  font-size: 18px;
  text-align: left;
  margin-right: 50px;
  color: #161d3f;
  text-shadow: 1px 1px #fafafa;
  font-family: Vazirmatn, sans-serif;
  padding-top: 25px;
  padding-left: 450px;
  font-weight: 400;

}
.colorsketch {
  width: 30vw;
  height: 300px;
  float: right;
  
  
  padding-top: 350px;
  margin-right: 280px;

}
#greyCircle{background-color: #dc8a2d;}
#greenCircle{background-color: #8de087;}
#blackCircle{background-color: #3c4245;}
#orangeCircle{background-color: #41afcd;}
#pinkCircle{background-color: #de82cd;}
#redCircle{background-color: #c42e2e;}

.sketchBody {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
}
.sketchChanger img{

  height: 350px;
  
}
#sketchCard {
  
  margin-left: 30vh;
}
.landingPencil {
  width: 100vw;
  height: 100vh;
  background-color: #6e7ba0;
  background-image: url("images/landingpencilback.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  overflow: hidden;
}
.bannerPencil {
  width: 100vw;
  height: 100vh;
 
}
.bannerPencil h1 {
  color: #fafafa;
  position: absolute;
 top: 30%;
 left: 36%;
 font-size: 62PX;
 font-family: 'Nerko One', cursive; 
}
.bannerPencil h2 {
  position: absolute;
  color: #fafafa;
  top: 40%;
  left: 40%;
  font-family: 'Nerko One', cursive;
  font-size: 36px;
  border: 2px solid #fafafa;
  border-style: dotted; 
  border-radius: 50px;
}
#h22 {
  left: 60%;
}
.bannerPencil img {
  position: relative;
  display: flex;
  justify-content: center;
  left: 36%;
  top: 35%;
  

}
hr {
  position: relative;
  top: 53.5%;
  border-top: 5px solid #fafafa;
  opacity: 1;
  border-radius: 3px;
  width: 53%;
}
/* end of pencil */
/* start correction */
.polish-container {
  height: 100vh;
  width: 100vw;
  background-size: 20px 20px;
  background: rgb(249,249,249);
  background: linear-gradient(0deg, rgba(249,249,249,1) 0%, rgba(120,212,208,1) 100%);
  overflow: hidden;
}
.titlepolish {
  height: 100px;
 float: right;
 margin-top: -100px;
 
}
.titlepolish h1 {
  font-size: 120px;
  color: #fafafa;
  font-weight: 600;
  font-family: 'Fasthand', cursive;
  text-align: center;
  padding-top: 20vh;
  text-shadow: 2px 2px #4b3000;
  font-size: 40px;
  text-align: right;
  margin-right: 150px;
}
.titlepolish h2 {
  font-size: 18px;
  text-align: left;
  margin-right: 50px;
  color: #252525;
  text-shadow: 1px 1.5px #fafafa;
  font-family: Vazirmatn, sans-serif;
  padding-top: 25px;
  padding-left: 450px;
}
.colorpolish {
  width: 25vw;
  height: 300px;
  float: right;
  
  margin-left: auto;
  margin-top: 200px;
  margin-right: 19px;

}
#bluePolishCircle{background-color: #44daff;}
#greenPolishCircle{background-color: #60ff55;}
#orangePolishCircle{background-color: #ffa616;}
#yellowPolishCircle{background-color: #ffff6f;}
#pinkPolishCircle{background-color: #f6a6e7;}
#purpplePolishCircle{background-color: #e037fe;}

.polishbody {
  position: relative;
  z-index: 2;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
}
.polishChanger img{

  height: 350px;
  
}
.polishcontainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: relative;
  overflow: hidden;
  max-width: 100vw;
  max-height: 850px;
  background: rgb(236,143,247);
  background: linear-gradient(90deg, rgba(236,143,247,1) 0%, rgba(255,137,137,1) 50%, rgba(252,208,145,1) 100%);
 
 
}

/* media query */
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  /* home */
  .item-container {
    height: 350px;
  }
  .item {
    width: 55px;
    margin-left: -40px;
    margin-right: 52px ;
    margin-bottom: -190px;
    top: -100px;
    
    
  }
 .item img {
  width: 140px;
  height: auto;
  
 }
 .item-container h1 {
  font-size: 48px;
 }
 #underline {
  width: 50%;
 }
 
 #title{
  font-size: 36px;
 }
 #description {
  font-size: 18px;
 }
 .brush  {
  top: 40px;
  left: 6px;
  position: absolute;
  opacity: 0;
  scale: 0.5;
  
}

.details {
  height: 180px;
}

.pastel-container h1 {
  padding-right: 50px ;
  font-size: 32px;

}
#Persiantext {
  float: none;
  width: 100vw;
  padding-right: 25px;
  padding-left: 25px;
  height: 480px;
}
#englishtext {
  float: none;
  width: 100vw;
  height: 480px;
  padding-left: 15px;
}
.pastel-container {
  height: 980px;
  
}
.pastel-container p{
  left: 0;
  float: right;
  padding-right: 15px;
  top: 10px;
  font-size: 18px;
}
.logocontainer{
  top: -100px;
  left: -310px;
  width: 850px;
  display: inline-flex;
  
}


.social-media {
  height: 600px;
}
.phones {
  margin-top: 0;
}
.follow {
  padding-top: 300px;
  margin-right: 10px;
}
/* writting */
.landing-container {
  height: 750px;
}
.banner {
  
  width: 50vw;
  height: 150px;
  padding-left: 60px;
}
.banner img {
  height: 380px;
  width: 350px;
  padding-right: 50px;
  
}

.title-container{
  position: absolute;
  width: 50vw;
  float: left;
  margin-top: 240px;
  margin-left: 80px;
  
}
.title-container h1 {
  font-size: 48px;
  
}
.title-container h2{
  padding-left: 20px;
  font-size: 14px;
  padding-top: 25px;
}


 
.all-products {
  height: 750px;
  width: 100vw;
}
.itemWritting {

   width: 55px;
   left: 0px;
    top: 70px;
    margin-left: 15px;
    margin-right: 15px;

}
#titleWritting {
  left: 150px;
  top: 620px;
}
#descriptionwritting {
  left: 20px;
  top: 70px;
  padding-right: 50px;
  padding-left: 25px;
  font-size: 18px;
}
.productsWritting img {
  top: 150px;
}
.productsWritting h2 {
  left: 1px;
  font-size: 14px;
  width: 100px;
  
}
 

.golden-roller {
  width: 150px;
  height: 150px;
  margin-left: 20px;
  margin-bottom: -80px;
  
}
.textGolden {
  margin-top: 25px;
}
.golden-roller img {
  width: 320px;
  height: auto;
  
}
.fashion-container {
  height: 700px;
}
.fashion-circle {
  width: 35px;
  height: 35px;
  margin-right: 10px;

}
.colors {
  padding-left: 150px;
  padding-right: 15px;
}
.fashionSeries {
  width: 100vw;
  margin-top: 250px;
  margin-left: 60px;
  
}
.title {
 margin-top: -150px;
}
.title h1 {
  margin-right: 110px;
}
.title h2 {
  padding-left: 20px;
}
.fashionBody {
  margin-top: -350px;
}
.cap-changer {
  top: -170px;
}

.package-container {
  height: 1980px;
}
#writepackage {
  margin-left: 15px;
}
/* highlighter */
.boldcontainer {
  height: 850px;
}
.detailbold {
  width: 350px;
}
.detailbold h1 {
  font-size: 32px;
  padding-left: 20px;
}
.detailbold li {
  font-size: 18px;
}
.highlighterBanner {
  height: 80vh;
}
.highlighterBanner img {
  width: 1450px;
  padding-left: 15px;
  padding-bottom: 0px;
}

.highlightshowcase img {
  width: 520px;
  left: -80px;
  
  padding-top: 100px;
}
.highlighterroller {
  width: 150px;
}
.highlighterroller h1 {
  left: 160px;
  
  font-size: 36px;
}
.highlightshowcase h2 {
  top: 80px;
  padding-left: 50px;
  padding-right: 50px;
}
.highlighter-container{
  height: 650px;
}
.titleHigh {
  height: 150px;

}
.titleHigh h1 {
  font-size: 36px;
  padding-left: 30px;
  padding-right: 10px;
  text-align: center;
 
}
.titleHigh h2 {
  font-size: 18px;
  padding-left: 10px;
  padding-right: 15px;
}
.Highcolors {
  margin-top: 190px;
}
.highlighterBody {
 margin-top: -200px;
 left: -50px;
}
#highCard {
  margin-left: 20px;
}
#highlighterPackage {
  height: 790px;
}
/* pencil */
.landingPencil {
  height: 60vh;
  background-image: url('images/sketchbackiphone.png');
 background-size: contain;
  
}
.bannerPencil {
  height: 350px;
}
.bannerPencil h1 {
  font-size: 36px;
  top: 170px;
  left: 110px;
}
.bannerPencil h2 {
  top: 220px;
  font-size: 28px;
}
.bannerPencil img {
  width: 250px;
  left: 85px;
  top: 25%;
}
.sketch-container {
  height: 600px;
}
.titlesketch h1 {
  padding-top: 15vh;
  margin-right: 100px;

}
.titlesketch h2 {
  padding-top: 10px;
  padding-left: 80px;
}
.colorsketch {
  width: 30px;
  padding-top: 250px;
  margin-right: 85px;
}
.sketchChanger img {
  margin-top: -30px;
}
#sketchCard {
  margin-left: 25px;
}
#sketchPackage {
  height: 780px;
}
/* polish */
.polishcontainer {
  height: 60vh;
}
.polish-container {
  height: 580px;
}
.titlepolish h1 {
  margin-right: 80px;
  padding-top: 15vh;
}
.titlepolish h2 {
  font-size: 18px;
  padding-left: 50px;
  padding-top: 5px;
}
.polishbody {
  margin-top: 0px;
}
.colorpolish {
  width: 30vw;
  margin-left: auto;
  margin-right: 25px;
  padding-top: 55px;
}
#polishpackage{
  height: 780px;
}
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (min-width: 600px) {
  /* home */
  .item-container {
    height: 400px;
  }
  .item {
    width: 135px;
    margin-left: -50px;
    margin-right: 68px ;
    margin-bottom: -160px;
    top: -120px;
    
    
  }
 .item img {
  width: 200px;
  height: 400px;
  
 }
 .item-container h1 {
  font-size: 48px;
 }
 #underline {
  width: 50%;
 }
 
 #title{
  font-size: 36px;
 }
 #description {
  font-size: 18px;
 }
 .brush  {
  top: 60px;
  left: 5px;
  position: absolute;
  opacity: 0;
  scale: 0.5;
  
}
#polish-brush {
  height: auto;
}
#fashion-brush {
  height: auto;
}
#golden-brush {
  height: auto;
}
#highlighter-brush {
  top: 80px;
  height: auto;
}
#sketch-brush {
  height: auto;
}
.details {
  height: 180px;
}
.pastel-container h1 {
  padding-right: 10px ;
  font-size: 36px;
  float: right;
  

}
#Persiantext {


  padding-right: 25px;
  padding-left: 5px;
  height: 480px;
}
#englishtext {
  height: 450px;
  padding-left: 15px;
  padding-right: 125px;
}
.pastel-container {
  height: 1100px;
}
.logocontainer {
  left: -250px;
  top: 250px;
  display: inline-flex;
}
.pastel-container p {
  font-size: 24px;
  left: 90px;
}
.social-media {
  height: 490px;
}
.follow {
  padding-top: 80px;
  margin-right: 0px;
}
/* writting */
.landing-container {
  height: 420px;
  
}
.banner {
  
  width: 50vw;
  height: 250px;
  padding-left: 60px;
}
.banner img {
  height: 420px;
  width: 400px;
  padding-right: 10px;
  
}

.title-container{
  position: absolute;
  height: 100vh;
  width: 50vw;
  float: left;
  margin-top: -150px;
  margin-left: 60px;
  
}
.title-container h1 {
  font-size: 48px;
  padding-right: 50px;
}
.title-container h2 {
  padding-right: 85px;
  padding-left: 20px;
  padding-top: 20px;
  text-align: center;

}
.all-products {
  height: 750px;
  width: 100vw;
}
.itemWritting {
  width: 190px;
  left: 90px;
}
.productsWritting {
  height: 450px;
}
.detailsWritting {
  height: 250px;
  
}
#titleWritting {
  left: 380px;
  top: 620px;
  
}
#descriptionwritting {
  top: 85px;
  padding-left: 75px;
}
.productsWritting h2 {
  left: -30px;
}

.golden-roller {
  width: 150px;
  height: 150px;
  margin-left: 150px;
  margin-bottom: -20px;
  
}

.golden-roller img {
  width: 520px;
  height: auto;
  
}
.fashion-container {
  height: 650px;
  
}
.title {
  margin-top: -180px;
}
.title h1 {
  font-size: 48px;
}
.title h2 {
  font-size: 18px;
  padding-left: 310px;
}
.colors {
  padding-left: 50px;
  padding-top: 50px;
}

.fashionSeries {
  width: 100vw;
  margin-top: 250px;
  margin-left: 120px;
  
}
.fashion-brush {
  width: 200px;
  height: 380px;
  margin-left: -75px;
  margin-top: 180px;
  
}

.package-container {
height: 1180px;


}

.col {
margin-right: 90px;
margin-left: 90px;

}
/* highlighter */
.detailbold {
  width: 350px;
}
.detailbold h1 {
  font-size: 32px;
}
.highlighterBanner {
  height: 86vh;
}
.highlighterBanner img {
 padding-left: 35px;
}


.highlightshowcase img {
  width: 950px;
  left: -60px;
  padding-top: 50px;
  
}
.highlighterroller h1 {
  left: 190px;
}

.highlighter-container{
  height: 650px;
}
.titleHigh {
  height: 150px;
  margin-top: -190px;
}
.titleHigh h1 {
  font-size: 48px;
  text-align: center;
  padding-left: 30px;

}
.titleHigh h2 {
  font-size: 18px;
  padding-left: 180px;
}
.Highcolors {
  margin-top: 210px;
}
.highlighterBody {
 
 margin-top: 250px;
 left: -50px;
}
#highCard {
  margin-left: auto;
  width: 320px;
  
}
#highlighterPackage {
  height: 420px;
}
/* pencil */
.landingPencil {
  height: 80vh;
  background-image: url("images/sketchbackipad.png");
  background-size: cover;
}
.bannerPencil {
  height: 350px;
}
.bannerPencil h1 {
  font-size: 64px;
  top: 260px;
  left: 220px;
}
.bannerPencil h2 {
  top: 350px;
  font-size: 36px;
}
.bannerPencil img {
  width: 420px;
  left: 230px;
  top: 80%;
  
}
hr {
  top: 450px;
}
.sketch-container {
  height: 600px;
}
.titlesketch h1 {
  padding-top: 12vh;
  margin-right: 250px;
  font-size: 48px;
}
.titlesketch h2 {
  font-size: 18px;
  padding-left: 320px;
}
.colorsketch {
  padding-left: 20px;
  
  margin-right: 25px;
  padding-top: 250px;
}

.sketchChanger img {
  margin-top: -30px;
  
}
#sketchCard {
  margin-left: 85px;
}
#sketchPackage {
  height: 420px;
}
/* polish */
.polishcontainer {
  height: 50vh;
}
.polish-container {
  height: 580px;
}
.titlepolish h1 {
  margin-right: 250px;
  padding-top: 12vh;
  font-size: 48px;
}
.polishbody {
  margin-top: 0px;
}
.titlepolish h2 {
  font-size: 18px;
  padding-left: 50px;
}
.colorpolish {
  width: 30vw;
  margin-left: auto;
  margin-right: 25px;
}
#polishpackage{
  height: 420px;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 992px) {
  /* home */
  .item-container {
    height: 400px;
  }
  .item {
    width: 185px;
    margin-left: 0;
    margin-right: 0 ;
    margin-bottom: -160px;
    top: -80px;
    
    
  }
 .item img {
  width: 100%;
  height: auto;
  
 }
 .item-container h1 {
  font-size: 64px;
 }
 .item-container img{
  justify-content: center;
 }
 
 #title{
  font-size: 36px;
 }
 #description {
  font-size: 18px;
 }
 .brush  {
  top: 60px;
  left: 5px;
  position: absolute;
  opacity: 0;
 
  
}
#polish-brush {
  height: auto;
}
#fashion-brush {
  height: auto;
}
#golden-brush {
  height: auto;
}
#highlighter-brush {
  top: 80px;
  height: auto;
}
#sketch-brush {
  height: auto;
}
.details {
  height: 180px;
}
.pastel-container h1 {
  padding-right: 20px ;
  font-size: 32px;

}
.pastel-container img {
  
  position: relative;
  height: 100%;
  width: 70vw;
  
}
#englishtext {
  padding-top: 19px;
}
.logocontainer {
  left: -250px;
  top: 60px;
}
.pastel-container {
  height: 850px;
}
.social-media {
  height: 450px;
  max-width: 100vw;
}
.follow {
  padding-top: 0px;
  float: right;
  margin-right: 50px;
}
/* writting */
.landing-container {
  height: 450px;
}
.banner {
  
  width: 50vw;
  height: 250px;
  padding-left: 60px;
}
.banner img {
  height: 420px;
  width: 380px;
  padding-right: 100حط;
  
}

.title-container{
  position: absolute;
  width: 50vw;
  float: left;
  margin-top: -50px;
  margin-left: 60px;
  
}
.title-container h1 {
  font-size: 60px;
  
}

.itemWritting {
  left: 150px;
}
#titleWritting {
  left: 470px;
}
.golden-roller {

  height: 150px;
  padding-left: 110px;
  margin-bottom: -20px;
  
}
.golden-roller img {
  width: 520px;
  height: auto;
  
}
.fashion-container {
  height: 700px;
}
.title {
  margin-top: -100px;
}
.title h1 {
  font-size: 48px;
}
.title h2 {
  padding-left: 510px;
}

#writepackage {
  padding-left: 15px;
}

.fashionSeries {
  width: 100vw;
  margin-top: 250px;
  margin-left: 120px;
  
}
.fashion-brush {
  width: 200px;
  height: 380px;
  margin-left: -75px;
  margin-top: 180px;
  
}
.all-products {
  height: 750px;
}

.package-container {
height: 1180px;
}

.col {
margin-right: 90px;
margin-left: 90px;

}
/* highlighter */
.detailbold {
  width: 450px;
}
.detailbold h1 {
  font-size: 36px;
}
.highlighterroller h1 {
  left: 310px;
}
.highlighterBanner {
  height: 90vh;
}


.highlightshowcase img {
  width: 100%;
  left: 2px;
}
.slimhigh img {
  width: 550px;
}
.highlighter-container{
  height: 500px;
}
.titleHigh {
  height: 150px;
  margin-top: -80px;
}
.titleHigh h1 {
  font-size: 48px;
  text-align: center;

}
.titleHigh h2 {
  font-size: 18px;
}
.Highcolors {
  margin-top: 150px;
}
.highlighterBody {
 margin-top: 110px;
 left: -50px;
}
/* pencil */
.landingPencil {
  height: 100vh;
  background-image: url("images/sketchbacknest.png");
  background-size: cover;
}
.bannerPencil {
  height: 350px;
}
.bannerPencil h1 {
  font-size: 48px;
  top: 180px;
  left: 380px;
}
.bannerPencil h2 {
  top: 240px;
  font-size: 36px;
}
.bannerPencil img {
  width: 320px;
  left: 380px;
  top: 150px;
}
hr {
  top: 270px;
  left: -5px;
}
.sketch-container {
  height: 420px;
}
.colorsketch {
  padding-top: 180px;
}
.titlesketch h1 {
  padding-top: 18vh;
  margin-right: 250px;
  font-size: 48px;
}
.titlesketch h2 {
  font-size: 18px;
  padding-left: 250px;
}

.sketchChanger img {
  margin-top: -190px;
  
}
#sketchCard {
  margin-left: 95px;
}
#sketchPackage {
  height: 400px;
}
/* polish */
.polishcontainer {
  height: 90vh;
}
.polish-container {
  height: 580px;
}
.titlepolish h1 {
  margin-right: 350px;
  padding-top: 19vh;
  font-size: 48px;
}
.titlepolish h2 {
  font-size: 18px;
}
.colorpolish {
  width: 30vw;
  margin-left: auto;
  margin-right: 25px;
}
#polishpackage{
  height: 420px;
}

}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* home */
  .item-container {
    height: 520px;
  }
  .item {
    width: 280px;
    margin-left: 5px;
    margin-right: -50px;
    margin-bottom: -160px;
    top: -100px;
    
    
  }
 .item img {
  width: 100%;
  height: auto;
  
 }
 .item-container h1 {
  font-size: 64px;
 }

 #title{
  font-size: 36px;
 }
 #description {
  font-size: 18px;
 }
 .brush  {
  top: 60px;
  left: 10px;
  position: absolute;
  opacity: 0;
  
  
}
#polish-brush {
  height: auto;
}
#fashion-brush {
  height: auto;
}
#golden-brush {
  height: auto;
}
#highlighter-brush {
  top: 80px;
  height: auto;
}
#sketch-brush {
  height: auto;
}
.details {
  height: 180px;
}
.pastel-container {
  height: 700px;
}
.logocontainer {
  padding-left: 15px;
}
.pastel-container h1 {
  padding-right: 40px ;
  font-size: 48px;

}
.logocontainer {
 left: -255px;
 top: -50px;
}
.social-media {
  height: 410px;
}
.follow {
  margin-top: 50px;
}
/* writting */
.all-products {
  height: 750px;
}
.landing-container {
  height: 450px;
}
.banner {
  
  width: 50vw;
  height: 250px;
  padding-left: 60px;
}
.banner img {
  height: 480px;
  width: 400px;
  padding-right: 19px;
  padding-bottom: 45px;
  
}

.title-container{
  position: absolute;
  width: 50vw;
  float: left;
  margin-top: -50px;
  margin-left: 60px;
  
}
.title-container h1 {
  font-size: 72px;
  
}
.title-container h2 {
  font-size: 18px;
}


.itemWritting {
  top: 120px;
  left: 280px;
  width: 220px;
}
#titleWritting {
  left: 580px;
}
.golden-roller {

  height: 150px;
  padding-left: 220px;
  margin-bottom: -20px;
  
}
.golden-roller img {
  width: 520px;
  height: auto;
  
}
.fashion-container {
  height: 700px;
}
.title {
  margin-top: -100px;
}
.title h1 {
  font-size: 48px;
}
#writepackage {
  padding-left: 155px;
}

.fashionSeries {
  width: 100vw;
  margin-top: 250px;
  margin-left: 120px;
  
}
.fashion-brush {
  width: 200px;
  height: 380px;
  margin-left: -75px;
  margin-top: 180px;
  
}
.all-products {
  height: 750px;
}

.package-container {
height: 1180px;
}

.col {
margin-right: 90px;
margin-left: 90px;

}
/* highlighter */
.detailbold {
  width: 520px;
}
.detailbold h1 {
  font-size: 48px;
  padding-right: 50px;
}
.highlighterroller h1 {
  font-size: 36px;
  left: 420px;
}
.highlighterBanner {
  height: 88vh;
  overflow: hidden;
}
.highlighterBanner img {
  padding-left: 0px;
}
.titleHigh h1 {
  margin-top: -45px;

}
.bannerbold img {
  width: 550px;
}
#highCard2 {
  
  margin-left: 190px;
  
}
#highCard {
  width: 320px;
  margin-left: 100px;
}
#highCard img {
  width: 280px;
  padding-left: 15px;
}
/* pencil */
.landingPencil {
  height: 100vh;
  background-size: cover;
}
.bannerPencil {
  height: 480px;
}
.bannerPencil h1 {
  font-size: 52px;
  top: 180px;
  left: 500px;
}
.bannerPencil h2 {
  top: 250px;
  font-size: 36px;
}
.bannerPencil img {
  width: 350px;
  left: 450px;
  top: 150px;
}
hr {
  top: 280px;
  left: -45px;
}

.titlesketch h1 {
  padding-top: 18vh;
  margin-right: 450px;
  font-size: 48px;
}
.titlesketch h2 {
  font-size: 18px;
  padding-left: 450px;
}

.sketchChanger img {
  margin-top: -190px;
  margin-left: -10px;
  
}
#sketchCard {
  width: 180px;
  margin-left: 195px;
}

#sketchPackage {
  height: 400px;
}
/* polish */
.polishcontainer {
  height: 92vh;
}
.polish-container {
  height: 420px;
}
.titlepolish h1 {
  margin-right: 480px;
  padding-top: 18vh;
  font-size: 48px;
}
.titlepolish h2 {
  font-size: 18px;
  padding-left: 250px;
}
.colorpolish {
  width: 30vw;
  margin-left: auto;
  margin-right: 25px;
}
.polishChanger {
  margin-top: -160px;
}
#polishpackage{
  height: 420px;
}
#polishCard {
  margin-left: 180px;
}

}
/* large laptop screen 1360-1600 */
@media only screen and (min-width: 1360px) {
  /* home */
  .item-container {
    height: 420px;
  }
  .item {
    width: 230px;
    margin-left: 69px;
    margin-right: -50px;
    margin-bottom: -160px;
    top: -150px;
    
    
  }
 .item img {
  width: 100%;
  height: auto;
  
 }
 .item-container h1 {
  font-size: 64px;
 }

 #title{
  font-size: 36px;
 }
 #description {
  font-size: 18px;
 }
 .brush  {
  top: 60px;
  left: 10px;
  position: absolute;
  opacity: 0;
  
  
}
#polish-brush {
  height: auto;
}
#fashion-brush {
  height: auto;
}
#golden-brush {
  height: auto;
}
#highlighter-brush {
  top: 80px;
  height: auto;
}
#sketch-brush {
  height: auto;
}
.details {
  height: 180px;
}
.pastel-container h1 {
  padding-right: 40px ;
  font-size: 48px;

}
.pastel-container {
  height: 650px;
}
.logocontainer {
  top: -90px;
  left: -190px;
}
.social-media {
  height: 320px;
}
.follow {
  padding-top: 90px;
}
/* writting */
.landing-container {
  height: 450px;
}
.banner {
  
  width: 50vw;
  height: 250px;
  padding-left: 60px;
}
.banner img {
  height: 550px;
  width: 500px;
  padding-right: 100px;
  margin-top: -20px;
}

.title-container{
  position: absolute;
  width: 50vw;
  float: left;
  margin-top: -110px;
  margin-left: 60px;
  
}
.title-container h1 {
  font-size: 96px;
  
}
.title-container h2 {
  font-size: 18px;
}
.all-products {
  height: 700px;
}
.productsWritting {
  height: 450px;
}
.golden-roller {

  height: 150px;
  padding-left: 190px;
  margin-bottom: -20px;
  
}
#titleWritting {
  left: 650px;
}
.golden-roller img {
  width: 650px;
  height: auto;
  
}
.fashion-container {
  height: 640px;
}
.title {
  margin-top: -100px;
}
.title h1 {
  font-size: 48px;
}
#writepackage {
  padding-left: 155px;
}

.fashionSeries {
  width: 100vw;
  margin-top: 200px;
  margin-left: 320px;
  
}
.fashion-brush {
  width: 200px;
  height: 380px;
  margin-left: -75px;
  margin-top: 180px;
  
}
.all-products {
  height: 750px;
}
.fashion-circle {
  margin-top: 5px;
}

.package-container {
height: 800px;
}

.col {
margin-right: 50px;
margin-left: 50px;

}
/* highlighter */
.highlighterBanner {
  height: 88vh;
}
.highlighterBanner img {
  width: 100vw;
}
.highlightshowcase img{
  width: 99%;
  left: 5px;
}

.detailbold h1 {
  padding-right: 55px;
  
}
.bannerbold img {
  width: 580px;
}
.highlighterroller h1 {
  left: 490px;
}
.titleHigh h1 {
  margin-top: 5px;
}
.titleHigh h2 {
  padding-left: 480px;
}
#highCard {
  margin-left: 125px;
}
#highCard2 {
  margin-left: 345px;
}
.slimhigh img {
  width: 650px;
  left: 320px;
}
.highlighter-container {
  height: 500px;
}
.titleHigh {
  margin-top: -120px;
}
/* pencil */
.landingPencil {
  height: 100vh;
  background-size: cover;
}
.bannerPencil {
  height: 480px;
}
.bannerPencil h1 {
  font-size: 72px;
  top: 150px;
  left: 490px;
}
.bannerPencil h2 {
  top: 250px;
  font-size: 48px;
}
.bannerPencil img {
  width: 350px;
  left: 520px;
  top: 180px;
}
hr {
  top: 310px;
  left: -80px;
}

.titlesketch h1 {
  padding-top: 18vh;
  margin-right: 450px;
  font-size: 52px;
}
.titlesketch h2 {
  font-size: 18px;
  padding-left: 720px;
}

.sketchChanger img {
  margin-top: -150px;
  margin-left: -120px;
  
}
#sketchCard {
  width: 180px;
  margin-left: 255px;
}

#sketchPackage {
  height: 400px;
}
/* polish */
.polishcontainer {
  height: 102vh;
  max-height: 1900px;
}
.polish-container {
  height: 420px;
}
.titlepolish h1 {
  margin-right: 490px;
  padding-top: 17vh;
  font-size: 48px;
}
.titlepolish h2 {
  font-size: 18px;
  margin-left: 380px;
}
.colorpolish {
  width: 30vw;
  margin-left: auto;
  margin-right: 25px;
}
.polishbody {
  margin-top: 20px;
}
#polishpackage{
  height: 420px;
}
#polishCard {
  width: 320px;
  margin-left: 220px;
}
}

/* Extra large devices (Tvs) */
@media only screen and (min-width: 1600px) {
  /* home */
  .item-container {
    height: 520px;
  }
  .item {
    width: 280px;
    margin-left: 95px;
    margin-right: -50px;
    margin-bottom: -160px;
    top: -100px;
    
    
  }
 .item img {
  width: 100%;
  height: auto;
  
 }
 .item-container h1 {
  font-size: 64px;
 }

 #title{
  font-size: 36px;
 }
 #description {
  font-size: 18px;
 }
 .brush  {
  top: 60px;
  left: 10px;
  position: absolute;
  opacity: 0;
  
  
}
#polish-brush {
  height: auto;
}
#fashion-brush {
  height: auto;
}
#golden-brush {
  height: auto;
}
#highlighter-brush {
  top: 80px;
  height: auto;
}
#sketch-brush {
  height: auto;
}
.details {
  height: 180px;
}
.pastel-container {
  height: 550px;
}
.logocontainer {
  margin-top: 25px;
  margin-left: -125px;
}
.pastel-container h1 {
  padding-right: 40px ;
  font-size: 48px;

}
.logocontainer {
  left: 15px;
  top: -200px;
}
.social-media {
  height: 350px;
}
.follow {
  padding-top: 50px;
}
/* writting */
.landing-container {
  height: 450px;
}
.banner {
  
  width: 50vw;
  height: 250px;
  padding-left: 60px;
}
.banner img {
  height: 580px;
  width: 490px;
  padding-right: 100حط;
  
}

.title-container{
  position: absolute;
  width: 50vw;
  float: left;
  margin-top: -110px;
  margin-left: 60px;
  
}
.title-container h1 {
  font-size: 96px;
  
}
.title-container h2 {
  font-size: 18px;
}
.itemWritting {
  left: 550px;
}

#titleWritting {
  left: 910px;
}
.golden-roller {

  height: 150px;
  padding-left: 480px;
  margin-bottom: -20px;
  
}
.golden-roller img {
  width: 650px;
  height: auto;
  
}
.fashion-container {
  height: 640px;
}
.title {
  margin-top: -100px;
}
.title h1 {
  font-size: 48px;
}
#writepackage {
  padding-left: 155px;
}

.fashionSeries {
  width: 100vw;
  margin-top: 200px;
  margin-left: 320px;
  
}
.fashion-brush {
  width: 200px;
  height: 380px;
  margin-left: -75px;
  margin-top: 180px;
  
}
.all-products {
  height: 750px;
}
.fashion-circle {
  margin-top: 35px;
}

.package-container {
height: 800px;
}

.col {
margin-right: 90px;
margin-left: 90px;

}
/* highlighter */

.highlighterBanner {
  height: 88vh;
}
.highlightshowcase img{
  width: 1400px;
  left: 250px;
}
.highlighterroller h1 {
  left: 750px;

}
.titleHigh h2 {
  padding-left: 760px;
}
.bannerbold{
  width: 850px;
 
}
.detailbold {
  width: 850px;
}

#highCard {
  margin-left: 355px;
}
#highCard2 {
  margin-left: 455px;
}

.highlighter-container {
  height: 500px;
}
.titleHigh {
  margin-top: -180px;
}
/* pencil */
.landingPencil {
  height: 85vh;
  background-image: url("images/bannersketchlarge.png");

}
.bannerPencil {
  height: 480px;
}
.bannerPencil h1 {
  font-size: 96px;
  top: 120px;
  left: 730px;
}
.bannerPencil h2 {
  top: 250px;
  font-size: 48px;
}
.bannerPencil img {
  width: 350px;
  left: 795px;
  top: 180px;
}
hr {
  top: 310px;
  left: -40px;
}

.titlesketch h1 {
  padding-top: 12vh;
  margin-right: 780px;
  font-size: 52px;
}
.titlesketch h2 {
  font-size: 24px;
  padding-left: 860px;
}

.sketchChanger img {
  margin-top: -150px;
  margin-left: -50px;
  
}
#sketchCard {
  width: 320px;
  margin-left: 450px;
}
#sketchCard img {
 
  width: 320px;
  height: 240px;
}
#sketchPackage {
  height: 400px;
}
/* polish */
.polishcontainer {
  height: 105vh;
  max-height: 1900px;
}
.polish-container {
  height: 420px;
}
.titlepolish h1 {
  margin-right: 780px;
  padding-top: 12vh;
  font-size: 48px;
}
.titlepolish h2 {
  font-size: 18px;
  padding-left: 520px;
}
.colorpolish {
  width: 30vw;
  margin-left: auto;
  margin-right: 25px;
}
.polishbody {
  margin-top: 30px;
}
#polishpackage{
  height: 420px;
}
#polishCard {
  width: 320px;
  margin-left: 420px;
}
}