/* downloaded from https://rokaweb.ir */


@font-face {
	    font-family: "iransans";
    src: url(/font/iransans.ttf);
}


html, body {
    margin: 0;
    padding: 0;
    font-family: 'iransans';
  direction: rtl;
  background-color: var(--color16);
}




:root {
--color1: #000000;
--color2: #1c1c1c;
--color3: #353535;
--color4: #4d4d4d;
--color5: #666;
--color6: #7e7e7e;
--color7: #969696;
--color8: #afafaf;
--color9: #c7c7c7;
--color10: #e0e0e0;
--color11: #d0d0d0;
--color12: #dcdcdc;
--color13: #e4e4e4;
--color14: #ececec;
--color15: #f9f9f9;
--color16: #FFFFFF;
}


:root {
  --opacity1: #00000025;
  --opacity2: #00000050;
  --opacity3: #00000075;
  --opacity4: #00000090;
  --opacity5: #00000095;  
  --opacity6: #F9F9F925;
  --opacity7: #F9F9F950;
  --opacity8: #F9F9F975;
  --opacity9: #F9F9F990;
  --opacity10: #F9F9F995;
}



:root {
--origin3: #ffd6da;
--origin4: #ffcdd2;
--origin5: #ffbdc4;
--origin6: #ff9ea8;
--origin7: #ff8592;
--origin8: #ff6474;
--origin9: #f94053;
--origin10: #b30013;
--origin11: #de0017;
--origin12: #cf061b;
--origin13: #b00012;
--origin14: #9c0010;
--origin15: #8a000e;
--origin20: #edc531;
}



:root {
  --origin10-25: #ff616125;
  --origin10-50: #ff616150;
  --origin10-75: #ff616175;
  --origin10-90: #ff616190;
  --origin10-95: #ff616195;
}


:root {
  --gap-2: .2%;
  --gap-5: .5%;
  --gap1: 1%;
  --gap2: 2%;
  --gap3: 3%;
  --gap4: 4%;
  --gap5: 5%;

  
  --item-count1:1;
  --item-count2:2;
  --item-count3:3;
  --item-count4:4;
  --item-count5:5;
  --item-count6:6;
  --item-count7:7;
  --item-count8:8;
  
  --body-line-height: 2;
  --border-radius15: 15px;
  --border-radius: 15px;
  
    --very-big: 2.5rem;
    --big: 2rem;
  	--verylarge: 1.5rem;
 	 --large: 1.2rem;
    --normal: 1rem;
    --medium: 0.9rem;
    --small: .8rem;
    --verysmall: .6rem;
    
    
}


*,
*::after,
*::before {
  box-sizing: border-box;
  
}

#signOutUser
{
  display:none;
}

a {
    text-decoration: none;
    transition: .5s ease-out;
}

figure {
    margin: 0;
    padding: 0;
  line-height: 0;
}

.wrapper {
  display: flex;
flex-wrap: wrap;
  align-items:stretch;
  justify-content: center;
}


.btn {
background-color: var(--origin10);
color: var(--color1);
padding: .5% 4%;
}



.projects , .about-company , .services , .customer-place , .certificate {
  padding: 3% 8%;
}

.certificate {
        background-color: var(--color14);
    box-shadow: 0 0 15px 2px rgb(90 97 105 / 40%), 0 2px 3px rgb(90 97 105 / 40%);
}

.service {
background-color: var(--color12);
    padding: 2%;
    border-radius: 15px 0px 0px 15px;
    border-right: 30px solid var(--origin20);
}

.money-price {
display: flex;
    flex-wrap: wrap;
      background: var(--color14);
    padding: 5px;
      border-radius: 10px;
      transition: .5s ease-out;
  margin: auto;
  width:135px;
    padding:10px;
  display:none;
  float:left;
}

.money-price span {
    font-size: var(--small);
      transition: .5s ease-out;
}

.money-price sub {
   color:var(--color7)
     
}

span.sign{ font-size:1.1em;} 

.money-price code {
   color:var(--color5);
  font-size:1.2em;
     
}

.fixed .money-price span {
    font-size: var(--small);
}



.money-price :before {
      font-size: var(--small);
}

.login {
text-align:center
}

.blog {
    display: flex;
    justify-content: center;
      align-items: stretch;
}

.blog section {
    text-align: center;
    box-shadow: 0px 0px 5px 0px rgba(133, 133, 133, 0.75);
    border-radius: var(--border-radius15);
    width: calc(100% / var(--item-count4) - var(--gap2));
    transition: .5s ease-out;
    margin: var(--gap1);
   
    position: relative;
    overflow: hidden;
}

.blog section img {
    border-radius: var(--border-radius15);
    height: 300px;
    object-fit: cover;
    width: 110%;
    transition: .5s ease-out;
  opacity: 0.8;
}

.blog section figure {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
}

.blog section:hover img {
    width: 100%;
opacity: 0.6;
}

.blog section:hover h4 {
        bottom: 30px;
  background-color: unset;
}

.blog section h4 {
    margin: 0;
    position: absolute;
    bottom: 0px;
    font-weight: bold;
 transition: 0.5s ease-out;
  width: 100%;
    color: var(--color16);
    font-size: var(--large);
      background-color: var(--opacity2);
    padding: 10px;
  min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog a {
 color: var(--color16);
}

form[id^=form] button, button {
    color: white;
    background-color: var(--origin10) !important;
}

.video-place {
text-align:center;
      
}
.video-place video {

   max-width: 100%;   
}

.customer section img {
}

.customer section {
    width: calc(100% / var(--item-count4) - var(--gap2));
}

.service h4 a
 {
    color: var(--color16);
}

.services-place {

    margin-top: var(--gap4);
    padding: 2% 8%;
}


.service section {
    width: calc(100% / var(--item-count3) - var(--gap2));
}

.products section {
    width: calc(100% / var(--item-count2) - var(--gap2));
}


.products section img {
    height: unset;
}

 
.container-text {
display: flex;
    margin-top: var(--gap4);
    padding: 2% 8%;
    flex-wrap: wrap;
}
.container-text div {
  display: flex;
flex-wrap: wrap;  
      text-align: justify;
  }

.cont-text-place section {
width: calc(100% / var(--item-count2) - var(--gap2));
    margin: 0px var(--gap1);
}

.cont-text-place img {
width:100%;
  transition: 0.5s ease-out;
  }

.cont-text-place img:hover {
transform: scale(0.95);
  }

.cont-text-place section:nth-child(1) {
flex:1.04
}

.cont-text-place section:nth-child(2) {
flex:1
}

.cont-text-place h3 {
color: var(--origin20);
}

.titr {
    color: var(--color4);
    width: 250px;
    text-align: center;
    padding: 5px;
    font-size: 1.5em;
    margin: auto;
}

.title-home {
width:100%
}

.title-home hr , .title-product hr{
    border: 1px solid var(--color10);
}

.title-home h3{
   margin: auto;
   background-color: var(--color16);
   width: fit-content;
   padding: 10px 20px;
  margin-top: -40px;
}



.dropdown {
display: flex;
justify-content: center;
align-items: center;
}

.between-menu {
width: 600px;
}


.header-fixed{
 position: sticky;
  z-index: 90;
  top: 0;
    min-height: 70px; 
  background-color: var(--color14);
}


.bot-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gap3);
}


.services-details p {
width: 100%;
    text-align: justify;
}


.logo-place img {
max-height: 90px;
}


.menu-place {
flex: 1;
  text-align: center;
}


 .fixed {
 box-shadow: 0px 0px 12px -1px rgba(148,148,148,0.75);
  max-height: 70px; 
}

.fixed .logo-place img {
max-height: 60px;
  transition: .5s ease-out;
}

.fixed .money-price {
    padding: 0px 10px;
  font-size: var(--small);
}

.image-fixed { 
right: 5%;
}



header {
 
        padding: var(--gap-5) var(--gap2);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

header section:nth-child(2)   {
 
}

header section:nth-child(3)  {

} 

header section:nth-child(4)  {
          text-align: center;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}




.banner-place .banner {
position: relative;
}



.banner-place ul li {
  
position: relative;
}


.caption {
position: absolute;
    z-index: 2;
    width:700px;
    top: 5%;
    right: 5%;
    text-align: right;
      background-color: var(--opacity4);
    padding: 20px;
}


.caption h1  {
  color: var(--color16);
  margin: 0px;
      font-size: var(--very-big);
}

.caption h2{
    text-align: right;
    font-size: var(--large);
    color: var(--origin20);
  margin: 0px;
}



.banner-place ul{
direction: rtl;
}

.dots-2 {
  padding: 0;
  text-align: center;
  display: flex;
  justify-content: center;
}

.dots-2 li.active {
  background: var(--origin20);
}


.dots-2 li {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
  margin-top: -40px;
  z-index: 2;
}



.caption .btn:nth-child(2) {
margin-right: 10px;
}

.banner-place img {
  object-fit: cover;

max-height: 750px;
  height:750px !important;
}

.banner-place {
display:none;
}




.banner-place figure {
position: relative;
}

.container-aboutus1 {
line-height: var(--body-line-height);
  text-align: justify;
}

.container-aboutus1 h2 {
margin-top: 0;
  text-shadow: -2px 3px 2px rgba(129,129,129,0.6);
}

.about-company {
display: flex;
  align-items: center;
line-height: var(--body-line-height);
}




.about-company section {
padding: var(--gap2);
  width: calc(100% / var(--item-count2) - var(--gap2));
    margin: 0px var(--gap1);
}

.about-company section:nth-child(2) {
display: flex;
    flex-wrap: wrap;
}

.about-company section p {
text-align: justify;
}



.about-company section figure {
position: relative;
  z-index: 2;
  margin: 2%;
}

.about-company section figure:nth-child(1) {
width:50%
}

.about-company section figure:nth-child(2) {
width:38%
}

.about-company section figure:nth-child(3) {
    width: 70%;
    margin-right: 50px;
}

.about-company section figure img {
box-shadow: 0px 0px 8px -2px rgba(0,0,0,0.75);
  transition: 0.5s ease-out;
      border-radius: 30px;
      width: 100%;
}


.about-company section figure img:hover{
     box-shadow: 0 7px 35px rgb(90 97 105 / 40%), 0 2px 3px rgb(90 97 105 / 40%);
    transform: scale(1.03);
}

.about-company section figure:hover::before {
transform: rotate(0deg);
  width: 100%;
    height: 100%;
   left: 0px;
}



.projects section div {
    width: calc(100% / var(--item-count5) - var(--gap2));
    margin: var(--gap1);
    background-color: var(--color15);
    padding: var(--gap1);
    line-height: var(--body-line-height);
    transition: .5s ease-out;
    text-align: center;
}

.master-container-content .projects {
padding: 0;

}



.projects section div h3 a , .projects section div h3 a:visited , .projects section div h3 a:link {
color: var(--color4);
}

.projects section div:hover {
    box-shadow: 0 7px 35px rgb(90 97 105 / 40%), 0 2px 3px rgb(90 97 105 / 40%);
    transform: scale(1.03);
}

.projects h1 {
text-align: center;
}


.projects section div figure img {
max-height: 300px;
    border-radius: 10px;
    width: 100%;
    object-fit: cover;
    transition: .5s ease-in;
    height: 300px;
}

.projects section div h3 {
    margin-bottom: 0;
      line-height: 1.5;
  font-weight: normal;
}




.projects section div:hover figure img {
filter: unset;
}

.projects section div figure img:hover {
filter: unset;
}

.projects section div article {
display: flex;
align-items: center;
  justify-content: center;
}

.projects section div article h3 {
margin-right: 10px;
}


.projects section div h4 {
text-align: center;
  color: var(--color5);
  margin-bottom: 0;
  font-weight: normal;
}

.projects-details {
text-align: center;
}

.master-container-content .projects-details figure img {
width: 300px;
height: 300px;
  border-radius: 50%;
}



.projects-details p {
color: var(--color4);
  text-align: justify;
}




.search-page {
display: flex;
  justify-content: center;
}

.search-page section {
text-align: center;
}

.search-page section a , .search-page section a:visited , .search-page section a:link {
color: var(--color4);
}

.dropdown ul li a , .dropdown ul li a:visited , .dropdown ul li a:link {
color: var(--color1);
}



.dropdown li span {
float: left;
  padding-right: 10px;
}



.dropdown span::after {
border-top-color: var(--origin6);
}


.dropdown ul  li.hover, .dropdown ul  li:hover {
      border-bottom: 2px var(--origin20) solid;
   
}
.dropdown ul > li.hover, .dropdown ul > li:hover {
      border-bottom: 2px var(--origin20) solid;
   
}

.dropdown ul li a:hover {
  color: var(--origin10);
}

.dropdown ul li li.hover, .dropdown ul li li:hover {
  background-color: var(--origin3);
}





footer {
    background-color: var(--color3);
}

.top-footer {
display: flex;
justify-content: center;
  padding: var(--gap2) 8%;
      align-items: flex-start;
  flex-wrap: wrap;
      font-size: var(--medium);
}

.top-footer article {
color: var(--color16);
    line-height: 2;
      margin-top: 20px;
  text-align: justify;
}

.top-footer section article img {
max-height: 100px;
  text-align: left;
  float: left;
  margin-top: 80px;
  margin-left: 20%;
  
}


.top-footer section {
width: calc(100%/var(--item-count3) - var(--gap2));
margin: var(--gap1);
}

.top-footer section:nth-child(1) {
flex:2;
}

.top-footer section:nth-child(2) , .top-footer section:nth-child(3) {
flex:1;
}

.top-footer section:last-child {

line-height: var(--body-line-height);
}

.top-footer section:last-child p {
  color: var(--color16);
}


.top-footer section:last-child i {
    margin-left: 10px;
    display: inline-block;
    text-align: center;
}

.top-footer section:last-child i::before {
font-size: 1.3rem;
    color: var(--color16);
}

.top-footer section:last-child i:hover::before {
font-size: 1.3rem;
    color: var(--origin20);
}

.top-footer section h2 {
color: var(--color16);
}


.top-footer .logo-place img {
margin: 0;
      filter: hue-rotate(3deg) saturate(150%) contrast(120%);
}

.top-footer section ul {
  padding: 0;
  list-style: none;
}

.top-footer section ul li {
padding: 5px 0;
}




.top-footer section ul li a , .top-footer section ul li a:visited, .top-footer section ul li a:link {
color: var(--color16);
}

 .links a::before {
content: '\e801';
  font-family: "webfont";
  margin: .2rem;
font-size: .9rem;
  color: var(--origin10);
  padding-left: 5px;
}

.top-footer [class^="icon-"]::before, .top-footer a::before {
  font-size: .9rem;
  color: var(--origin8);
  padding-left: 5px;
  width: unset;
      font-size: var(--verylarge);
}



.bot-footer {
text-align: center;
  background-color: var(--opacity2);
      padding: 10px 0px;
  font-size: var(--verysmall);
}

.bot-footer section , .bot-footer {
line-height: 1.5;
}

.rules , .karik a , .karik a:visited , .karik a:link  {
color: var(--color12);
  font-size: var(--small);
}


.up {
    cursor: pointer;
    position: fixed;
    bottom: 73px;
    left: 20px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    transition: .3s ease-out;
  text-align: center;
      background-color: var(--origin10-95);

}

.up i {
    transition: .3s ease-out;
}

.body-content
{
  padding-top:2%;
   padding-bottom:2%;
}

.icon-up::before {
    margin-top: 15px;
  color: var(--color16);
}


.master-container {
  margin: 0 8%;
}

.master-container-title {
background-image: url(/directory/kbzagroscom/Pic/top-page-banner.webp);
    background-repeat: inherit;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
    height: 200px;
}

.master-container-title h1 {
    color: var(--color16);
    margin: 0px;
    text-align: center;
    padding-top: 20px;
}




.master-container-content {
line-height: var(--body-line-height);
  text-align: justify;
  padding: 2%;
  min-height: 400px;
}

.master-container-content img {
border-radius: 20px;
transition: .5s ease-out;
display: block;
margin: var(--gap3) auto;
object-fit: cover;
  max-width:100%;
}






.master-container-content article {
  margin: var(--gap3) 0;
  display: flex;
}



.work-samples-details section figure {
float: left;
}

.work-samples-details section figure img {
max-width: 100%;
  margin-right: var(--gap5);
}




.master-container .container-aboutus1, .master-container .expertise,
.master-container form[id^="form"], .master-container .work-samples-container,
.master-container .banner-place {
padding: 0;
}


.master-container .expertise section div figure img {
border: unset;
  max-width: unset;
}

.master-container .expertise {
margin-top: 0;
}









.contact_us_container {
display: flex;
      flex-wrap: wrap;
      flex-wrap: nowrap;
}




.master-container-content ul {
  
  margin: 0;
  padding: var(--gap1);

}


.google-section {
width: 100%;
    padding: var(--gap1);
  border: 2px solid var(--color13);
    border-radius: 20px;
    margin-top: var(--gap3);
}

iframe {

  max-width: 100%;

}

.master-container-content ul li span:nth-child(1) i {
color: var(--origin10);
  text-align: center;
display: block;
}


.master-container-content ul a , .master-container-content ul a:visited ,
.master-container-content ul a:link {
color: var(--color1);
}

.services {
background-image: url('/directory/dbzagroscom/Pic/landing-bg-parallax.jpg');
  padding: var(--gap5) 8%;
text-align: center;
      background-attachment: fixed;
    background-size: cover;
}

.master-container-content .services {
background-image: unset;
  padding: 0;
}

.master-container-content .services h2 a , .master-container-content .services h2 a:visited ,
.master-container-content .services h2 a:link {
color: var(--color4);
}

.master-container-content .services article section {
box-shadow: 0px 0px 5px 0px rgba(123,123,123,0.75);
  padding: var(--gap1);
}

.master-container-content .services polygon {
stroke: var(--color10);
}


.services h2 a , .services h2 a:visited , .services h2 a:link {
color: var(--color16);
}

.services h2 {
color: var(--origin10);
         font-size: 2.5em;
}


.services article {
display: flex;
flex-wrap: wrap;
}

.services article section {
 width: calc(100%/var(--item-count4) - var(--gap2));
margin: var(--gap1);
  display: flex;
flex-direction: column;
}

.services article section span , .services article section p {
color: var(--color16);
}

.services article section p {
margin: 0;
  text-align: justify;
}

.services article section span {
font-weight: bold;
  margin: var(--gap5) 0;
}


  .master-container .services {
  margin-top: unset;
  }


.services-details {
flex-wrap: wrap;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}


.services-details section {
display: flex;
}


.services-details code {
position: relative;
}


.services-details svg:hover {
  transform: rotate(-90deg);
}

.services-details i {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--origin10);
font-size: 2rem;
}

.services-details svg {
display: block;
margin: auto;
width: 200px;
height: 200px;
transition: .3s ease-out all;
}

.services-details polygon {
 stroke: var(--color10);
}




i {
    cursor: pointer;
}

.menu i {
display: none;
}


form[id^="form"] fieldset, fieldset {
  background-color: var(--color16);
  width: 100%;
  border-radius: var(--border-radius);
}

legend {
  font-weight: bold;
  font-size: 1.6em;
}



form[id^="form"] input:focus, 
form[id^="form"] select:focus, 
form[id^="form"] textarea:focus {
  border: none;
    border-BOttom: 1px solid var(--color10);
}



#form114{

float: left;
width: 100%;

  margin: 4% .3%;
  text-align:center;
}


.menu-place li img {
  max-width: 50px;
    border-radius: 5px;;
}

.dropdown ul li li {
  display: flex;
  align-items: center;
}

.dropdown ul li li a {
padding-right: 10px;
}

.dropdown ul li li {
  width: 250px;
  border-bottom: 1px dotted var(--color11);
}



 ul.contact_us li {
list-style-type: none;
       display: flex;
       flex-wrap: wrap;

}

 ul.contact_us  {
list-style-type: none;
    width: 100%;
       border: 2px solid var(--color13);
    border-radius: 20px;
       margin: 10px;
}


.contact_us i:before {
font-size: 1em !important;
}


.master-container-content table  th, .master-container-content table tbody td {

  padding: 4px;
  text-align: center;
   line-height: 1.5;
  font-size: .95em;
  font-weight: normal;
  width: 50%;


}

.master-container-content table  th:nth-child(1), .master-container-content table tbody td:nth-child(1) {

 
  width: 35%;


}

.master-container-content table  th:nth-child(2), .master-container-content table tbody td:nth-child(2) {

 
  width: 65%;


}

.master-container-content table tr:nth-child(even) {
    background-color: var(--color14)
}


.master-container-content table  th{

font-weight:bold;

 background-color: var(--origin10-95);
}

.master-container-content table  tr {
  margin-bottom: 10px;


}
.master-container-content table {
 
  width: 50%;
  border-collapse: separate;
  border-spacing: 0 10px;
  
}















.prod-details-place .pathUrl {
    border: 1px solid var(--color13);
}

.pathUrl {
    margin: .3% 2px;
    background: var(--color16);
    padding: var(--gap1);
    font-size: var(--small);
}

.pathUrl span a, .pathUrl span a:visited, .pathUrl span a:link {
    color: var(--color4);
}

.pathUrl span a::before {
    content: '\f100';
    color: var(--origin10);
    padding-left: 5px;
    font-family: 'webfont';
    font-size: var(--normal);
    padding-right: 5px;
}

.prod-details-place-container {
    display: flex;
    border: 1px solid var(--color13);
    border-radius: var(--border-radius);
    flex-wrap: wrap;
  margin: 2% 0px;
}

.prod-details-place-container > div {
    width: calc(100% / var(--item-count3));
    padding: var(--gap1);
}

.pic-container {
    position: relative;
}

.details-container {
    border-right: 1px solid var(--color12);
    flex: 2;
}

.master-container .details-container h1 {
    color: var(--color5);
    width: 100%;
    background-color: unset;
    text-align: right;
   
  line-height: 1.1;
  font-size: 1.4em;
  padding: 4%;
  display: flex;
}
.body-content h2{

  font-size: 1.2em;
   line-height: 1.1;
}

.master-container h1::before {
    content: '\f111';
    font-family: "webfont";
    color: var(--origin10);
    font-size: var(--small);
    padding-left: 10px;
}

.lSSlideOuter .lightSlider, .lSSlideOuter .lSPager {
    margin: auto;
}

#slidePicProduct li {
    list-style: none;
}

.pic-container img {
    max-width: 100%;
    max-height: 600px;
    width: 100%;
    object-fit: cover;
}

.lSAction > .lSPrev {
    left: 1px;
}

.lSAction > .lSNext {
    right: 1px;
}

.lSAction > a {
    top: 90%;
    margin: -15px 10px;
}

.lSSlideOuter .lSPager.lSGallery img {
    padding: 3px;
}

.title-product h3 {
margin: auto;
    width: fit-content;
    padding: 10px 20px;
    margin-top: -12px;
    border-top: 5px solid var(--origin10);
}

.content-product img {
	border-radius: 20px;
    transition: .5s ease-out;
    display: block;
    margin: var(--gap3) auto;
    object-fit: cover;
}

.button-link {
background-color: var(--origin8);
  padding: 8px;
  border-radius: 5px;
  font-size: 1em;
  font-weight: bold;
  margin: 10px;
  display: inline-flex;
  color: var(--color16) !important
}

.price {
background-color: var(--color4);
  padding: 8px;
  border-radius: 5px;
  font-size: 1em;
  font-weight: bold;
  margin: 10px;
  display: inline-flex;
  color: var(--color16) !important;
 
}

.lastprice
{
   display:none
}

.icon-profile,.icon-logout {
 
  padding: 2px;
  font-size: .8em;
}

.button-link:hover {

  color: var(--origin11) !important;
}

.button-place {
    width: 100%;
    text-align: center;
}


.shrinkToFit
{
  height:90%!important;
  width:600px !important;
}

.content-product
{
  padding:4%;
  line-height:2;
  text-align: justify;
  
}
.content-body
{
width: 100%;
  overflow-x: auto;
  line-height: 2;
  padding: 3%;
}

/* Under 1600px	*/
@media (max-width: 1580px) {
.banner-place img {
    max-height: 600px;
}
}


/* Under 1400px	*/
@media (max-width: 1400px) {
  
  .caption h1 {
    font-size: var(--large);
}
  
  .caption h2 {
    font-size: var(--normal);
}
 
  
  .container-text {
    margin-top: var(--gap4);
    padding: 2% var(--gap2);
  }


  .projects, .about-company {
  padding: 0 var(--gap2);
}
  
  .projects, .about-company, .customer-place, .certificate {
    padding: 0 var(--gap2);
}

.services-place {
    padding: 2% var(--gap2);
}
  
  .master-container  {
  margin: 0 ;
  }
  
  .master-container-content {
    margin: 0 var(--gap3);
  }
  
  .dropdown ul li {
    border-bottom: 1px solid var(--font-color2);
    padding: 5px 10px;
}
  
 
}


/* Under 1360px	*/
@media (max-width: 1360px) {
  
  .prod-details-place {
      padding: 0px var(--gap3);
  }

  .projects section div h3 {
    font-size: var(--normal);
}
  
  .blog section h4 {
    font-size: var(--normal);
}
}
  



/* Under 1280px	*/
@media (max-width: 1280px) {
.projects section div {
    width: calc(100% / var(--item-count3) - var(--gap2));
}
  
  .projects section div figure img {
    max-height: 400px;
    height: 400px;
}
  
    .top-footer {
        padding: var(--gap4);
    }

}





/* Under 1024px	*/
@media (max-width: 1024px) {
  
  .top-footer section:nth-child(1) {
    flex: unset;
}
  
  .top-footer section {
    width: calc(100% / var(--item-count1) - var(--gap2));
}
  
  .content-product img {
    max-width: 100%;
    height: auto;
}
  
  .master-container-title {
    height: 100px;
}
  
  .banner-place img {
    height: 100% !important;
}

  
    :root {
  --item-count4: 3;
  }
  
  .top-footer section article img {

  margin-top: 10px;

}
  
  .rules {
    font-size: var(--verysmall);
}
  
  .master-container-content table {
  width:100%;

    }
  
  .cont-text-place img {
    height: 350px;
    object-fit: cover;
}
  
  
  .banner-place {
    display: none;
    margin-top: 0px;
}
  
  
  header {
  margin: 0;
    margin-top: 0;
    padding: 1.5%;
  }

  .dropdown {
  flex-direction: column;
  }
  
  .logo-place {
              width: 100%;
        text-align: center;
          padding:10px;
}
  
  
  
  .logo-place img {
  max-height: 70px;
}
  
  .logo-in-menu img {
  height: 55px;
    margin: 10px;
  }

  
   .top-header {
  background-color: var(--color15);
     padding: var(--gap1) 2.8%;
  }
  
  .menu {
    flex: 1;
  }
  
  .logo-place {

  }

  .menu i {
float: right;
margin-bottom: 20px;
    display: block;
color: var(--origin10);
  }
  
     .menu-place {
        position: absolute;
        width: 100%;
        right: -1050px;
    
       display: none;
    }
  
 .fixed .menu-place {
        top: 70px !important;
    }
  
  .dropdown ul {
  width: 100%;
background-color: var(--color15);
  }
  
  .dropdown ul li {
  display: block;
    border-bottom: 1px dotted var(--color10);
  }
  
  .pentagon {
  display: none;
  }

  .about-company {
  flex-wrap: wrap;
justify-content: center;
  }
  
  
  .fixed .logo-place img {
  margin-top: unset;
    max-height: 50px;
}
  

  .dropdown li span {
  float: left;
  }
  
  .dropdown ul li li {
  background-color: var(--color15);
  width: 100%;
}
  .dropdown ul li li.hover, .dropdown ul li li:hover {
  background-color: unset;
}
  
  .dropdown ul li.hover, .dropdown ul li:hover {
  border-bottom: 1px dotted var(--color10);
  }
  
  
  .dropdown ul li a, .dropdown ul li a:visited, .dropdown ul li a:link {
  color: var(--color1);
}
  
  .caption {
    width: 90%;
    right: 5%;
    text-align: center;
}
  
  .caption h2 {
    text-align: center;
}
 
  .banner-place img , .banner-place figure::before {
  height: 350px;
  }
  
  
  .projects section div article {
  flex-direction: column;
  }
  
  
  
  .master-container-content img {
  max-width: 100%;
  }
  
  .work-samples-container {
  margin-top: 80px;
  }
  

}


/* Under 820px	*/
@media (max-width: 820px) {
  
  
  
  ul.contact_us li {
    flex-wrap: nowrap;
}
  
  form[id^=form] fieldset li {
    flex-wrap: wrap;
}
  
  .prod-details-place-container > div {
    width: calc(100% / var(--item-count1))!important;
}
  
  .about-company h2 {
    text-align: center;
}
  
  .about-company section figure:nth-child(3) {
    margin-right: 0px;
}
  
  .about-company section:nth-child(2) {
    justify-content: center;
}
  
  .button-place {
  width: 100%;
    text-align: center;
  }
  
  .caption {
    width: unset;
    right: 5%;
    left: 5%;
}
  .top-footer section:nth-child(1) {
    flex: unset;
    width: 100%;
}
  
  
  .cont-text-place section {
    width: calc(100% / var(--item-count1) - var(--gap2));
}
  
  .cont-text-place section:nth-child(1) {
    flex: unset;
}
  
  
  
  .about-company section figure::before {
    width: 100%;
    height: 100%;
    left: 0px;
}
  
  :root {
  --item-count2: 1;
  --item-count3: 2;
  --item-count4: 2;
    --item-count5: 3;
  }
  
  .banner-place ul li .caption h3 {
  padding-top: unset;
  }
  
  
  .contact_us_container {
  flex-direction: column;
  }
  
  
  .dropdown ul li li {
  font-size: unset;
    padding: 10px 15px;
  }
  
  .dropdown ul li ul {
  margin: 0;
    padding: 0;
  }
  
 
  .projects section div article {
  flex-direction: column;
  }
  

  .banner-place ul li {
  flex-direction: column-reverse;
  }
  
  .banner-place ul li .caption, .banner-place ul li figure {
  flex: unset;
}
  
  
  .banner-place ul li .caption {
    padding: var(--gap2);
    text-align: center;
  }
  
  .banner-place ul li .caption h2 {
          font-size: var(--small);
}
  
.caption h2 {
    text-align: center;
}
  
  
   .projects section div article {
  flex-direction: unset;
  }
  
  .services h2 {
    font-size: 2em;
}
  
  .about-company {
  flex-wrap: wrap;
  }
  
      .cont-text-place img {
        height: 400px;
    }
 
  
  
  
  .projects section:nth-child(2) div figure img {
  height: 100px;
}
  
  
  .top-footer section {
  align-items: unset;
  }
  
  
  .master-container-content ul li span:nth-child(2) {
  width: 100%;
  }
  
 
  

  }
  



/* Under 620px	*/
@media (max-width: 620px) {
  
  .menu {
        flex: 2;
    }

  
 .blog section h4 {
    font-size: var(--small);
   font-weight: normal;
}
  
      .banner-place ul li .caption h2 {
        display: none;
    }
  
  .service {
    border-right: 0px;
}
  
  
  :root {

    --item-count5: 2;
  }
  
  
      .banner-place ul li .caption {
        top: 0px;
    }

 footer {
  margin-top: 10%;
}
  
  .banner-place figure {
  text-align: center;
}
  
  .banner-place figure::before {
 
  }
 
  .master-container-content ul {
  padding: 10px;
  }
  
  
  .work-samples-details section figure {
  float: unset;
  }
  
  
  .work-samples-details section figure img {
  margin: var(--gap3) auto;
  }



  
  
}





/* Under 520px	*/
@media (max-width: 520px) {
  
      .logo-place {
    
    }
  .money-price {
    width: 100px;
}
  
  .fixed .money-price span {
    font-size: var(--verysmall);
}
  
  .money-price {
    margin-top: 38px;
}
  
  .fixed .money-price {
    margin-top: 18px;
}
  
  .login {
 
  }
  
  .fixed .icon-profile {
      font-size: .5em;
    margin-top: 3px;
  }
  
  .top-footer section:nth-child(2), .top-footer section:nth-child(3) {
    flex: unset;
}
  
  .projects section div figure img {
    max-height: 300px;
    height: 300px;
}
  
  
  .money-price {
    font-size:var(--verysmall)!important;
}
  
  .blog section {
    margin: var(--gap3) var(--gap1);
}
  
    :root {
  --item-count2: 1;
  --item-count4: 1;
    --item-count5: 1;
  }
  
  .banner-place ul li .caption h2 {
    font-size: 1.5em;
}
  
  .projects section div h3 {
    margin-bottom: revert;
}
  

  
  
  :root {
  --item-count4: 1;
}
  
  
  .menu-place {
  top: 71px;
  }

  
  .logo-place {
    top: 0;
  }
  
  .master-container-content .projects-details figure img {
  max-width: 100%;
  }
  
  
  .about-company section figure img {
  max-width: 100%;
}
  

  
  .master-container-content ul {
  margin: 0;
  }
  
  
 
  
  .banner-place img, .banner-place figure::before {
  height: 300px;
}
  


  .social-place {
  display: none;
  }

  .projects section:nth-child(1) h2 {
  text-align: justify;
  }
  


  .master-container-content {
  margin: 0 var(--gap5);
}
  
  .master-container-title h1 {
  font-weight: normal;
    font-size: 1.5rem;
  }
  
  
  

  
  
  

}


/* Under 414px	*/
@media (max-width: 414px) {
  
  .master-container-title {
        height: 70px;
    }
  
      .menu-place {
  
    }
  
  .blog section img {
    height: auto;
}
  
  .title-product p {
  text-align: justify;
    line-height: var(--body-line-height);
    margin: 0px var(--gap3);
  }
  
  .title-product h3 {
    padding: 20px 20px;
    margin-top: 10px;
    text-align: center;
}

  
  .title-home h3 {
    text-align: center;
}
  
      .projects section div figure img {
        max-height: 200px;
        height: 200px;
    }
  
  .icon-profile {
    font-size: .6em;
    margin-top: 15px;
}
  
  .logo-place img {
        max-height: 65px;
    }
  
  .money-price {
    width: 100px;
}
  
  .caption h1 {
    font-size: var(--normal);
}
  
  .blog section {
    margin-bottom: 20px;
}
  
  .cont-text-place img {
        height: 250px;
    }
  
  .cont-text-place:nth-child(odd) img {
    border-radius: 30px!important;
}
  
  .cont-text-place:nth-child(even) img {
    border-radius: 30px!important;
}
  
  

  .banner-place figure {
  text-align: right;
}
  
  .banner-place img {
  height: 200px !important;
  }
  
  .menu-place {
  top: 67px;
}
  

  
  
  .container-aboutus2 .containers-pic img {
  height: 230px;
}
  
  .gallery-container article section {
  width: calc(100%/1 - var(--gap2));
  }
  

  
  
}

/* Under 360px	*/
@media (max-width: 360px) {
  
  
}