/*==================================*/
@import url(https://fonts.googleapis.com/css?family=Raleway);

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #f9f9f9;
  font-size: 16px;
  font-family: "Raleway", sans-serif;
}

.main-title {
  color: #2d2d2d;
  text-align: center;
  text-transform: capitalize;
  padding: 0.7em 0;
}

@media screen and (max-width: 640px) {
  .container-1 {
    display: block;
    width: 100%;
  }
}

@media screen and (min-width: 900px) {
  .container-1 {
    width: 33.33333%;
  }
}

.container-1 .title {
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
  background-color: #e2e2e2;


}

.content {
  position: relative;

  max-width: 400px;
  margin: auto;
  overflow: hidden;
  margin-top: 0px;
  border-radius: 10px;
}



.content:hover .content-overlay {
  opacity: 1;
}

.content-image, .content-image-3 {
  width: 100%;
}

.content-image-1 {
  width: 100%;
  height: 205px;
}

.content-image:hover,.content-image-1:hover, .content-image-2:hover, .content-image-3:hover
{
  cursor: pointer;
  transform: scale(120%)rotate(10deg);
  transition: 0.5s;
}


.content-image-2 {
  width: 100%;
  height: 400px;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details {
  top: 50%;
  left: 50%;
  opacity: 1;
  background-color: #1a1a1add;
  transition: 0.5s;
}

.content-details h3 {
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p {
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom {
  top: 80%;
}

.fadeIn-top {
  top: 20%;
}

.fadeIn-left {
  left: 20%;
}

.fadeIn-right {
  left: 80%;
}

.w-g {
  display: flex;
  justify-content: space-evenly;
  padding-top: 15px;
}

.work-second {
  background-color: aqua;
  height: 300px;
}



/*============================== WEB TEMPLATES WORKS ==============================================================*/

.handles svg path{
  stroke:#e2e2e2!important;
}
.dots span{
  background:#fff!important;
  opacity:0.5
}
.dots span.active{
  opacity:1
}
  .PostSlide{max-width:1300px;margin:40px auto;}
  .PostSlide{max-width:1300px;margin:10px auto 40px;}
  .PostSlide .innerContainer .slider{display:flex;width:1280px;overflow-x:hidden;margin:auto;}
  .PostSlide .innerContainer .slider .slide{display:block;background-size: cover!important;background-position: center center!important;min-width:550px;height:300px;margin:0 10px;}
  .PostSlide .innerContainer .slider{position:relative;z-index:2;}
  .PostSlide .innerContainer .handles{display:flex;justify-content:space-between;position:relative;top:-160px;width:103%;cursor:pointer;margin-right:-20px;margin-left:-20px;z-index:4;-webkit-tap-highlight-color:transparent;}
  .PostSlide .dots{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;}
  .PostSlide .dots span{border-radius:10px;background:#CBCBCB;width:6px;height:6px;display:inline-block;cursor:pointer;}
  .PostSlide .slider *{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
  .PostSlide .handles > span{transition:opacity 0.3s;}
  .PostSlide .handles .prev{opacity:0;}
  .PostSlide .handles .next{opacity:1;}
  .PostSlide .handles *{user-select:none;}
  .PostSlide .innerContainer .slider .slide{display:flex!important;flex-direction:column;justify-content:space-between;}
  @media (min-width: 1280px){
      .PostSlide .innerContainer .slider{width:1200px!important;margin:auto;}
  }
  @media (max-width: 1280px){
      .PostSlide .innerContainer .handles{width:calc(100% + 30px)!important;margin-left:-15px!important;margin-right:-15px!important;}
  }
  @media (min-width: 960px) and (max-width: 1280px){
      .PostSlide .innerContainer .slider{width:960px!important;}
  }
  @media (min-width: 960px) and (max-width: 1280px){
      .PostSlide .innerContainer .slider{width:960px!important;}
  }
  @media (min-width: 640px) and (max-width: 960px){
      .PostSlide .innerContainer .slider{width:640px!important;}
  }
  @media (max-width: 640px){
      .PostSlide .innerContainer .slider{width:300px!important;}
      
  }
  .PostSlide .innerContainer,.PostSlide .slider,.PostSlide .handles,.PostSlide .dots{direction:ltr;}

  .PostSlide .innerContainer .slider .slide>div{display:block;background-size: cover!important;background-position: center center!important;min-width:100%;height:100%;border-radius:8px}




/*============================== illustartor WORKS ENDS ==============================================================*/


.colum
{
  justify-content: end;
  align-items: end;
  text-align: end;
}

.mobi
{
  height: 120px;
  margin-left: 5%;
  margin-top: 10px;
  border-radius:10px ;
}


.mobi:hover
{
  transform: scale(106%)rotate(1deg);
  transition: 0.5s;
  opacity: 0.6;
  cursor: pointer;
}


.mobi-1
{
  height: 500px;
  border-radius: 10px;
}




/*============================== illustrator WORKS ENDS ==============================================================*/





/*============================== WEB TEMPLATES WORKS ENDS ==============================================================*/
/*============================== WEB TEMPLATES WORKS ENDS ==============================================================*/

.kanun
{
  object-fit: cover;
  height: 300px;
  padding-left: 50px;
}

.marquee {
  margin: 0 auto;
  width: 100%;
  
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 50px;
  height: 30px;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 0;
  
}
.marquee:after {
  right: 0;
 
}

.marquee__content {
  width: 300% !important;
  display: flex;
  line-height: 30px;
  -webkit-animation: marquee 20s linear infinite forwards;
          animation: marquee 20s linear infinite forwards;
}
.marquee__content:hover {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

.list-inline {
  display: flex;
  justify-content: space-around;
  width: 33.33%;
  /* reset list */
  list-style: none;
  padding: 0;
  margin: 0;
  color: white;
}

@-webkit-keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-66.6%);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-66.6%);
  }
}