*{
  box-sizing: border-box;
}

.text-black-50{
  color: var(--gray) !important;
}
img{
  max-width: 100%;
}
:root{
  --main-color:#191919;
  --second-color:#ffae88;
  --white:#fff;
  --backgrounf-color:#fff;
  --dark-theme: #191919;
  --alt:#ffe9d2;
  --slick:#fff;
  --gray:#828282;
  --stroke:2px rgba(25, 25, 25, 0.4196078431);
  --stroke-op:0.2;
  --footer-link:#ffae88;
  --border-color:#e8e8e8;
  --contact-color:#F8F8F8;
}

.container-header{
  width: 1620px !important;
    margin: 0 auto;
}
.fs-52{
  font-size: 52px;
}

body{
  color:var(--main-color) ;
  font-family: "Hanken Grotesk", sans-serif;
  background-color: var(--white);
  overflow-x: hidden;
}
a{
  color:var(--main-color);
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
}

input:focus{
  outline: none;
}
/* ############################################################################################################################################################################## */
.nav-for-other{ 
  background-color: transparent;
  height: auto;
  .container-header{
    .social{
      padding-left: 280px;
    }
    .navs{
      ul{
        .nav-item{
          position: relative;
          a{
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          .menu{
            position: absolute;
            left: 0px;
            top: 100%;
            width: 230px;
            height: 0;
            background-color: white;
            opacity: 0;
            padding: 0 0 0 20px;
            border-radius: 0 0 12px 12px;
            box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
            transition: 0.4s;
            transform-origin: top center;
            transform: scaleY(0);
            .dropdown-item{
              border-bottom: 1px solid #F3F3F3;
              padding: 11px 17px 12px 0px;
              display: block;
              transition: 0.4s;
              font-weight: 500;
              color: #191919;
              a{
                color: #191919;
              }
            }
            .dropdown-item:hover{
              a{
                color: var(--second-color);
              }
            }
          }
        }
        .nav-item:hover{
          .nav-a{
            color:var(--second-color) ;
          }
          .menu{
            opacity: 1;
            top: 100%;
            transform: scaleY(1);
            -webkit-transform: scaleY(1);
            -moz-transform: scaleY(1);
            -ms-transform: scaleY(1);
            -o-transform: scaleY(1);
            height: auto;
            z-index: 1000;
}
        }
      }
    }
    .mobil{
      height: fit-content;
      button{
        color:var(--main-color)
      }
    }
  }
}
.home{
  background-color: transparent;
  box-shadow: 0px 94px 94px 0px rgba(0, 0, 0, 0.05);
  background-image: url(../image/hero-1-grid.webp);
  background-repeat: no-repeat;
  overflow: hidden;
  .nav{
    height: 250px;
    .container-header{
      .social{
        padding-left: 280px;
      }
      .navs{
        ul{
          .nav-item{
            position: relative;
            a{
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
            }
            .menu{
              position: absolute;
              left: 0px;
              top: 100%;
              width: 230px;
              height: 0;
              background-color: white;
              opacity: 0;
              padding: 0 0 0 20px;
              border-radius: 0 0 12px 12px;
              box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
              transition: 0.4s;
              transform-origin: top center;
              transform: scaleY(0);
              .dropdown-item{
                border-bottom: 1px solid #F3F3F3;
                padding: 11px 17px 12px 0px;
                display: block;
                transition: 0.4s;
                font-weight: 500;
                color: #191919;
                a{
                  color: #191919;
                }
              }
              .dropdown-item:hover{
                a{
                  color: var(--second-color);
                }
              }
            }
          }
          .nav-item:hover{
            .nav-a{
              color:var(--second-color) ;
            }
            .menu{
              opacity: 1;
              top: 100%;
              transform: scaleY(1);
              -webkit-transform: scaleY(1);
              -moz-transform: scaleY(1);
              -ms-transform: scaleY(1);
              -o-transform: scaleY(1);
              height: auto;
}
          }
        }
      }
      .mobil{
        height: fit-content;
        button{
          color:var(--main-color)
        }
      }
    }
  }
  .header{
    position: relative;
    .image{
      position: absolute;
      top: 40px;
      left: 80px;
    }
    .spin{
      animation: spin 8s infinite linear ;
      -webkit-animation: spin 8s infinite linear ;
    }
    .image.spin-2{
      max-width: 60px;
      top: 0px;
      left: 70px;
    }
    .image2{
      position: absolute;
      top: 40px;
      right: 119px;
    }
    .spin-2{
      animation: spin 8s infinite linear reverse;
      -webkit-animation: spin 8s infinite linear reverse;
}
    .image2.spin-2{
      max-width: 60px;
      top: 40px;
      right: 75px;
    }
    .container{
      .arrow{
        font-size: 32px;
        img{
          transition: .7s;
          -webkit-transition: .7s;
          -moz-transition: .7s;
          -ms-transition: .7s;
          -o-transition: .7s;
          transform: translateX(-80px);
          -webkit-transform: translateX(-80px);
          -moz-transform: translateX(-80px);
          -ms-transform: translateX(-80px);
          -o-transform: translateX(-80px);
          opacity: 0;
        }
        img.fade{
          transform: translateX(0);
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          -o-transform: translateX(0);
          opacity: 1;
        }
      }
      .anime-header{
        span{
          font-size: 125px ;
          font-weight: bold;
          transform: translateX(80px);
          -webkit-transform: translateX(80px);
          -moz-transform: translateX(80px);
          -ms-transform: translateX(80px);
          -o-transform: translateX(80px);
          transition: 1s;
          display: inline-block;
          -webkit-transition: 1s;
          -moz-transition: 1s;
          -ms-transition: 1s;
          -o-transition: 1s;
          opacity: 0;
        }
        .stop{
          transform: translateX(0);
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          -o-transform: translateX(0);
          opacity: 1;
        }
      }
      .row{
        .img{
          position: relative;
          .main-img{
            transform: translate(-48%, 41%);
            min-width: 500px;
            max-height: 500px;
            -webkit-transform: translate(-48%, 41%);
            -moz-transform: translate(-48%, 41%);
            -ms-transform: translate(-48%, 41%);
            -o-transform: translate(-48%, 41%);
            position: absolute;
}
          .side-alt{
            position: absolute;
            padding: 13px 22px 15px 27px;
            position: absolute;
            border-radius: 50px;
            font-size: 24px;
            width: 468px;
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 9px;
            transform: rotate(30deg);
            background-color: var(--second-color);
            top: 180px;
            right: -186px;
            display: none;
          }
          .side{
            padding: 13px 22px 15px 27px;
            position: absolute;
            top: 175px;
            right: -179px;
            border-radius: 50px;
            font-size: 24px;
            width: 468px;
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 9px;
            background-color: var(--dark-theme);
            transform: rotate(46deg);
            color: white;
            display: none;
            -webkit-transform: rotate(46deg);
            -moz-transform: rotate(46deg);
            -ms-transform: rotate(46deg);
            -o-transform: rotate(46deg);
}
        }
        .text{
          .anime-header2{
            span{
              font-size: 50px ;
              transform: translateX(20px);
              -webkit-transform: translateX(20px);
              -moz-transform: translateX(20px);
              -ms-transform: translateX(20px);
              -o-transform: translateX(20px);
              transition: .3s;
              display: inline-block;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              opacity: 0;
            }
            .stop{
              transform: translateX(0);
              -webkit-transform: translateX(0);
              -moz-transform: translateX(0);
              -ms-transform: translateX(0);
              -o-transform: translateX(0);
              opacity: 1;
            }
          }
          .hand{
            border-radius: 100px;
            background: var( --alt);
            box-shadow: 0px 94px 94px 0px rgba(0, 0, 0, 0.05);
            padding: 25px 50px;
            height: 85px;
            width: 525px;
            display: flex;
            transform: translateY(180px);
            -webkit-transform: translateY(180px);
            -moz-transform: translateY(180px);
            -ms-transform: translateY(180px);
            -o-transform: translateY(180px);
            transition: .7s;
            -webkit-transition: .7s;
            -moz-transition: .7s;
            -ms-transition: .7s;
            -o-transition: .7s;
            opacity: 0;
            .hand-img{
              margin-right: 30px;
            }
            .hand-text{
              h6{
                margin: 0;
                font-weight: bold;
              }
              p{
                margin: 0;
                line-height: 26px;
              }
            }
          }
          .up{
            transform: translate(0);
            -webkit-transform: translate(0);
            -moz-transform: translate(0);
            -ms-transform: translate(0);
            -o-transform: translate(0);
            opacity: 1;
          }
          .cv{
            padding-top: 150px;
            .client{
              transform: translateX(80px);
              -webkit-transform: translateX(80px);
              -moz-transform: translateX(80px);
              -ms-transform: translateX(80px);
              -o-transform: translateX(80px);
              opacity: 0;
              transition: .7s;
              -webkit-transition: .7s;
              -moz-transition: .7s;
              -ms-transition: .7s;
              -o-transition: .7s;
              h1{
                font-size: 64px;
                
              }
              p{
                font-size: 20px;
              }
            }
            .d-cv{
              transform: translateX(80px);
              -webkit-transform: translateX(80px);
              -moz-transform: translateX(80px);
              -ms-transform: translateX(80px);
              -o-transform: translateX(80px);
              opacity: 0;
              transition: .7s;
              -webkit-transition: .7s;
              -moz-transition: .7s;
              -ms-transition: .7s;
              -o-transition: .7s;
              transition-delay: .7s;
              p{
                margin-top: 50px;
                font-size: 20px;
                span{
                  margin-left: 10px;
                  width: 60px;
                  height: 60px;
                  background-color: var(--main-color);
                  border-radius: 50%;
                  -webkit-border-radius: 50%;
                  color: var(--white);
                  -moz-border-radius: 50%;
                  -ms-border-radius: 50%;
                  -o-border-radius: 50%;
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                }
              }
            }
            .fade{
              transform: translateX(0);
              -webkit-transform: translateX(0);
              -moz-transform: translateX(0);
              -ms-transform: translateX(0);
              -o-transform: translateX(0);
              opacity: 1;
            }
          }
        }
      }
      .img-slide{
        overflow: hidden;
        padding: 60px 0 ;
        white-space: nowrap;
        .head{
          width: fit-content;
          margin: 0px auto 50px;
          position: relative;
          padding: 0 25px;
          color: #666;
          font-size: 16px;
        }
        .head::after{
          content: "";
          height: 1px;
          color: rgb(25, 25, 25);
          opacity: 0.1;
          background-color: rgb(25, 25, 25);
          width: 220px;
          position: absolute;
          right: -61%;
          top: 53%;
          transform: translateY(-50%);
        }
        .head::before{
          content: "";
          height: 1px;
          color: rgb(25, 25, 25);
          opacity: 0.1;
          background-color: rgb(25, 25, 25);
          width: 220px;
          position: absolute;
          left: -61%;
          top: 50%;
          transform: translateY(-51%);
        }
        .slider{
          display: inline-block;
          animation: 20s slide infinite linear;
          -webkit-animation: 20s slide infinite linear;
          img{
            margin-right: 40px;
            margin-left: 40px;
          }
        }
      }
    }
  }
}
/* ############################################################################################################################################################################## */
.about-us{
  background-color: transparent;
  padding-top: 150px;
  .anime-header{
    span{
      font-size: 24px ;
      transform: translateX(80px);
      -webkit-transform: translateX(80px);
      -moz-transform: translateX(80px);
      -ms-transform: translateX(80px);
      -o-transform: translateX(80px);
      transition: 1s;
      display: inline-block;
      -webkit-transition: 1s;
      -moz-transition: 1s;
      -ms-transition: 1s;
      -o-transition: 1s;
      opacity: 0;
    }
    .stop{
      transform: translateX(0);
      -webkit-transform: translateX(0);
      -moz-transform: translateX(0);
      -ms-transform: translateX(0);
      -o-transform: translateX(0);
      opacity: 1;
    }
  }
  .heading{
    color: var(--main-color);
    font-size: 128px;
    padding-bottom: 100px;
    span{
      display: inline-block;
      transform: rotateX(-90deg);
      -webkit-transform: rotateX(-90deg);
      -moz-transform: rotateX(-90deg);
      -ms-transform: rotateX(-90deg);
      -o-transform: rotateX(-90deg);
      transition: 1s;
      -webkit-transition: 1s;
      -moz-transition: 1s;
      -ms-transition: 1s;
      -o-transition: 1s;
      opacity: 0;
    }
    .stop{
      transform: rotateX(0deg);
      -webkit-transform: rotateX(0deg);
      -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
      -o-transform: rotateX(0deg);
      opacity: 1;
  }
  }
  .row{
    justify-content: end;
    .col-12{
      .center-desc{
        font-size: 32px;
        color: #828282;
        font-weight: normal;
        line-height: 42px;
        span{
          display: inline-block;
          transform: rotateX(-90deg);
          -webkit-transform: rotateX(-90deg);
          -moz-transform: rotateX(-90deg);
          -ms-transform: rotateX(-90deg);
          -o-transform: rotateX(-90deg);
          transition: 1s;
          -webkit-transition: 1s;
          -moz-transition: 1s;
          -ms-transition: 1s;
          -o-transition: 1s;
          opacity: 0;
        }
        .stop{
          transform: rotateX(0deg) !important;
          -webkit-transform: rotateX(0deg) !important;
          -moz-transform: rotateX(0deg) !important;
          -ms-transform: rotateX(0deg) !important;
          -o-transform: rotateX(0deg) !important;
          opacity: 1;
        }
      }
      .scroll{
        width: 190px;
        height: 190px;
        border:1px solid #E2E2E2;
        border-radius:50% ;
        -webkit-border-radius:50% ;
        -moz-border-radius:50% ;
        -ms-border-radius:50% ;
        -o-border-radius:50% ;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        font-size: 24px;
        margin: 30px 0;
        background-color: transparent;
        color: var(--main-color);
        svg{
          margin: 0 10px;
        }
      }
    }
  }
  .foot{
    .heading{
      
      font-size: 96px;
      span{
        transition-delay: 1s;
      }
    }
  }
}
/* ############################################################################################################################################################################## */
.slideimg{
  background-color: transparent;
  .swiper{
    .project-swiper-scrollbar{
      height: 5px;
      background-color: rgba(25, 25, 25, 0.13);
      border-radius: 20px;
      width: 60%;
      margin: 0 auto;
      margin-top: 50px;
      position: relative;k
      .swiper-scrollbar-drag{
        background-color: #191919;
        border-radius: 20px;
      }
    }
    .swiper-wrapper{
      .swiper-slide{
        position: relative;
        img{
          position: relative;
          
        }
        .shape{
          position: absolute;
          background-image: url(../image/bg-shape.webp);
          right: 50px;
          bottom: 50px;
          transition: 0.4s;
          max-width: 730px;
          padding: 10px 20px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          line-height: 1;
          transform: translate(50px , 50px);
          -webkit-transform: translate(50px , 50px);
          -moz-transform: translate(50px , 50px);
          -ms-transform: translate(50px , 50px);
          -o-transform: translate(50px , 50px);
          opacity: 0;
          h2{
            color: #191919;
            font-size: 128px;
            span{
              display: block;
              margin: 0;
            }
            .second{
              padding-left: 185px;
            }
          }
        }
      }
      .swiper-slide:hover{
        .shape{
          transform: translate(0);
          -webkit-transform: translate(0);
          -moz-transform: translate(0);
          -ms-transform: translate(0);
          -o-transform: translate(0);
          opacity: 1;
        }
      }
    }
  }
}
/* ############################################################################################################################################################################## */
.service{
  background-color: transparent;
  margin-top: 50px;
  .container{
    .section-title{
      margin-bottom: 50px;
      .stroke{
        display: flex;
          align-items: center;
          justify-content:center;
        -webkit-text-stroke: var(--stroke);
        -webkit-text-fill-color: transparent;
        margin: 0 auto;
        font-weight: 700;
        opacity: var(--stroke-op);
        span{
          font-size: 320px;
          transform: translateX(80px);
          -webkit-transform: translateX(80px);
          -moz-transform: translateX(80px);
          -ms-transform: translateX(80px);
          -o-transform: translateX(80px);
          transition: 1s;
          display: inline-block;
          -webkit-transition: 1s;
          -moz-transition: 1s;
          -ms-transition: 1s;
          -o-transition: 1s;
          opacity: 0;
        }
        .stop{
          transform: translateX(0);
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          -o-transform: translateX(0);
          opacity: 1;
        }
      }
    }
    .content{
      .serv{
        transition: all 1s ease 0s;
        padding: 30px 0;
        border-bottom: 1px solid rgba(25, 25, 25, 0.1);
        -webkit-transition: all 1s ease 0s;
        -moz-transition: all 1s ease 0s;
        -ms-transition: all 1s ease 0s;
        -o-transition: all 1s ease 0s;
        .name{
          .icon{
            display: flex;
            align-items: center;
            justify-content: center;
          }
          h2{
            font-size: 52px;
            transition: all 0.4s ease 0s;
          }
        }
        .list{
          display: flex;
          align-items: center;
          justify-content:center;
          ul{
            list-style: disc;
            li{
              font-weight: bold;
            }
          }
        }
        .arrow{
          position: relative;
          svg{
            circle{
              transition: all 1s ease 0s;
              -webkit-transition: all 1s ease 0s;
              -moz-transition: all 1s ease 0s;
              -ms-transition: all 1s ease 0s;
              -o-transition: all 1s ease 0s;
              fill: var(--alt);
            }
          }
        }
      }.serv:hover{
        .name{
          .icon{
            svg{
              transition: all 0.4s ease 0s;
              color: var(--second-color);
            }
          }
          h2{
            color: var(--second-color);
          }
        }
        .arrow{
          svg{
            circle{
              fill: var(--second-color);
            }
          }
        }
      }
    }
  }
}
/* ############################################################################################################################################################################## */
.plan{
  background-color: transparent;
  margin-bottom: 50px;
  padding-top: 150px;
  .section-title{
    width: fit-content;
    margin: 10px auto;
    .anime-header{
      span{
        font-size: 24px ;
        transform: translateX(80px);
        -webkit-transform: translateX(80px);
        -moz-transform: translateX(80px);
        -ms-transform: translateX(80px);
        -o-transform: translateX(80px);
        transition: 1s;
        display: inline-block;
        -webkit-transition: 1s;
        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
        opacity: 0;
      }
      .stop{
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        opacity: 1;
      }
    }
    .heading{
      color: var(--main-color);
      font-size: 96px;
      padding-bottom: 100px;
      span{
        display: inline-block;
        transform: rotateX(-90deg);
        -webkit-transform: rotateX(-90deg);
        -moz-transform: rotateX(-90deg);
        -ms-transform: rotateX(-90deg);
        -o-transform: rotateX(-90deg);
        transition: 1s;
        -webkit-transition: 1s;
        -moz-transition: 1s;
        -ms-transition: 1s;
        -o-transition: 1s;
        opacity: 0;
      }
      .stop{
        transform: rotateX(0deg);
        -webkit-transform: rotateX(0deg);
        -moz-transform: rotateX(0deg);
        -ms-transform: rotateX(0deg);
        -o-transform: rotateX(0deg);
        opacity: 1;
    }
    }
  }
  .content{
    .section{
      transform: translateY(80px);
      -webkit-transform: translateY(80px);
      -moz-transform: translateY(80px);
      -ms-transform: translateY(80px);
      -o-transform: translateY(80px);
      opacity: 0;
      transition: all 0.3s ease-in-out;
      .text{
        border: 1px solid var(--main-color);
        border-radius: 30px;
        padding: 45px 50px 50px;
        .month{
          margin-bottom: 10px;
          color: var(--gray);
        }
        .name{
          font-size: 32px;
          margin-bottom: 30px;
        }
        .list {
          margin-bottom: 30px;
          li{
            margin-bottom: 10px;
            position: relative;
          }
          li::before{
            content: "\f00c";
            font-family: "font awesome 6 free";
            font-weight: 700;
            position: absolute;
            top: 50%;
            left: -30px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
          }
        }
        .price{
          font-size: 24px;
          margin-bottom: 30px;
        }
        .choose{
          margin-top: 15px;
          padding: 20px 32px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          border-radius: 100px;
          color: var(--main-color);
          background-color: transparent;
          font-size: 16px;
          transition: all 0.3s ease-in-out;
          border: 1px solid rgba(25, 25, 25, 0.1);
          font-weight: 500;
        }
      }
    }
    .show{
      transform: translateY(0px);
      -webkit-transform: translateY(0px);
      -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
      -o-transform: translateY(0px);
      opacity: 1;
    }
    .section:hover{
      .choose{
        background-color: var(--main-color);
        color: var(--white);
      }
    }
  }
}
/* ############################################################################################################################################################################## */

.Testimonials{
  background-color: transparent;
  .container{
    .section-title{
      width: fit-content;
      margin: 10px auto;
      .anime-header{
        span{
          font-size: 24px ;
          transform: translateX(80px);
          -webkit-transform: translateX(80px);
          -moz-transform: translateX(80px);
          -ms-transform: translateX(80px);
          -o-transform: translateX(80px);
          transition: 1s;
          display: inline-block;
          -webkit-transition: 1s;
          -moz-transition: 1s;
          -ms-transition: 1s;
          -o-transition: 1s;
          opacity: 0;
        }
        .stop{
          transform: translateX(0);
          -webkit-transform: translateX(0);
          -moz-transform: translateX(0);
          -ms-transform: translateX(0);
          -o-transform: translateX(0);
          opacity: 1;
        }
      }
      .heading{
        color: var(--main-color);
        font-size: 96px;
        padding-bottom: 100px;
        span{
          display: inline-block;
          transform: rotateX(-90deg);
          -webkit-transform: rotateX(-90deg);
          -moz-transform: rotateX(-90deg);
          -ms-transform: rotateX(-90deg);
          -o-transform: rotateX(-90deg);
          transition: 1s;
          -webkit-transition: 1s;
          -moz-transition: 1s;
          -ms-transition: 1s;
          -o-transition: 1s;
          opacity: 0;
        }
        .stop{
          transform: rotateX(0deg);
          -webkit-transform: rotateX(0deg);
          -moz-transform: rotateX(0deg);
          -ms-transform: rotateX(0deg);
          -o-transform: rotateX(0deg);
          opacity: 1;
      }
      }
    }
    .slide{
      .slick{
        border-radius: 30px;
        background: var(--silck);
        padding: 40px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
        margin: 0 24px 0 0 ;
        font-size: 24px;
        .top{
          svg{
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
        }
        }
        .middle{
          p{
            font-size: 24px;
          }
        }
        .bottom{
          p{
            color:var(--gray)
          }
        }
      }
      .slick:hover{
        .top{
          svg{
            color: var(--second-color);
          }
        }
      }
      .slick-arrow::before{
        color:var(--second-color);
        font-size: 28px;
      }
      .slick-prev{
        top: 103%;
        left: 42%;
      }
      .slick-next{
        top: 103%;
        right:44%;
      }
      .slick-disabled::before{
        color: var(--main-color);
        opacity: 1;
      }
      .slick-dots{
        li{
          margin: 0;
          button::before{
            font-size: 25px;
            opacity: 1;
            color: var(--main-color);
          }
        }
        li.slick-active{
          button::before{
            color: var(--second-color);
          }
        }
      }
    }
  }
}
/* ############################################################################################################################################################################## */

.prog-section{
  background-color: transparent;
  padding-top: 150px;
  margin-bottom: 150px;
  .container{
    .row{
      .num-sec{
        .num{
          text-align: center;
          font-size: 64px;
        }
      }
    }
  }
}

/* ############################################################################################################################################################################## */
.blog-section{
  background-color: transparent;
  .container{
    .head{
      margin-bottom: 50px;
      .row{
        .left{
          padding-right: 180px;
          height: fit-content;
          border-right: 1px solid rgba(25, 25, 25, 0.1);
          h5{
            font-size: 17.5px;
            margin-bottom: 5px;
          }
        }
        .right{

          height: fit-content;
          h1{
            font-size: 52px;
          }
        }
      }
      
    }
    .content{
      .row{
        .blogs{
          .card-cont{
            border-radius: 30px;
            background-color: var(--slick);
            box-shadow: 0px 94px 94px 0px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            .img{
              border-radius: 30px;
              overflow: hidden;
              img{
                border-radius: 30px;
                transition: 0.7s;
                width: 100%;
              }
            }
            .text{
              .up{
                margin-bottom: 15px;
                a{
                  color: #666;
                }
                a:hover{
                  color: var(--main-color);
                }
              }
              .middle{
                margin-bottom: 15px;
                a{
                  transition: .3s;
                  -webkit-transition: .3s;
                  -moz-transition: .3s;
                  -ms-transition: .3s;
                  -o-transition: .3s;
                }
                a:hover{
                  color: var(--second-color);
                }
              }
              .down{
                button{
                  display: inline-flex;
                  justify-content: center;
                  align-items: center;
                  gap: 10px;
                  padding: 12px 26px;
                  border-radius: 100px;
                  color: var(--main-color);
                  background-color: transparent;
                  font-size: 16px;
                  transition: all 0.3s ease-in-out;
                  border: 1px solid rgba(25, 25, 25, 0.1);
                  height: fit-content;
                }
                button:hover{
                  background-color: var(--main-color);
                  color: var(--white);
                }
              }
            }
          }
          .card-cont:hover{
            .img{
              img{
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }
}
/* ############################################################################################################################################################################## */
.footer{
  margin-top: 150px;
  background-color: var(--dark-theme);
  color: white;
  background-image: url(../image/footer.svg);
  .container{
    .row{
      .top{
        h1{
          font-size: 126px;
          font-weight: 700;
        }
       
      }
      .bottom{
        padding-top: 150px;
        a.link{
          color: white;
          background-color:  #272727;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          padding: 24px;
          border: 1px solid var(--gray);
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          position: relative;
          span{
            position: relative; z-index: 2;
            display: flex;
            gap: 8px;
            justify-content: center;
          align-items: center;
          }
        }
        a.link::before{
          content:"";
          width: 0;
          height: 0;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          background-color: var(--footer-link);
          opacity: 0;
          transition: 0.4s;
          -webkit-transition: 0.4s;
          -moz-transition: 0.4s;
          -ms-transition: 0.4s;
          -o-transition: 0.4s;
          z-index: 1;
          }
        a.link:hover::before{
          content:"";
          width: 100%;
          height:100%;
          opacity: 1;
        }
        .links{
          ul{
            padding: 0;
            li{
              margin-bottom: 10px;
              a{
                color: #828282;
                transition: .4s;
                -webkit-transition: .4s;
                -moz-transition: .4s;
                -ms-transition: .4s;
                -o-transition: .4s;
              }
              a:hover{
                color: var(--second-color);
              }
            }
          }
        }
        .address{
          p{
            color: #828282;
          }
          form{
            position: relative;
            input{
              background: transparent;
              border: 1px solid #505050;
              width: 100%;
              height: 52px;
              border-radius: 50px;
              color: var(--white);
              font-size: 16px;
              padding: 14px 20px;
            }
            button{
              position: absolute;
              background-color: transparent;
              border: none;
              top: 50%;
              right: 20px;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              -moz-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              -o-transform: translateY(-50%);
}
          }
        }
      }
    }
  }
}
/*                                                                       service                                                                                          */

.head-title{
  margin-bottom: 100px;
  background-image:url(../image/breadcrumb.webp);
  position: relative;
    z-index: 0;
    background-size: cover;
    background-position: center;
    .overlay{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(110, 110, 110, 0.75) -34.01%, rgba(137, 91, 70, 0.92) 7.85%, rgba(149, 93, 67, 0.73) 70.03%, rgba(153, 104, 82, 0.8) 115.31%);
      z-index: 2;
    }
  .container{
    .text{
      padding: 245px 0 145px 0;
      text-align: center;
      position: relative;
      z-index: 3;
      color:white;
      h1{
        font-size: 90px;
        font-weight: bold;
      }
      .down{
        margin: 0;
        padding-left: 0;
        border-radius: 300px;
        border: 1px solid #e1c1af;
        display: inline-block;
        padding: 14px 25px 15px;
        .right{
          display: inline-block;
          margin: 0;
          display: inline-block;
          position: relative;
          padding-left: 16px;
          padding-right: 7px;
          font-size: 16px;
          color: white;
          
        }
        .left{
          display: inline-block;
          margin: 0;
          display: inline-block;
          position: relative;
          padding-left: 16px;
          padding-right: 7px;
          font-size: 16px;
          color: white;
          padding-left: 15px;
        }
        .left::before{
          content: "";
          position: absolute;
          left: 0;
          top: 9px;
          height: 8px;
          width: 8px;
          border-radius: 50%;
          background-color: var(--second-color);
        }
        .right:after{
          position: absolute;
          left: 2px;
          top: 6px;
          content: "";
          height: 14px;
          width: 1px;
          background-color: white;
          font-weight: 600;
        }
      }
    }
  }
}
.service-section{
  margin-top: 50px;
  .container{
    .content{
      .serv{
        transition: all 1s ease 0s;
        padding: 30px 0;
        border-bottom: 1px solid rgba(25, 25, 25, 0.1);
        -webkit-transition: all 1s ease 0s;
        -moz-transition: all 1s ease 0s;
        -ms-transition: all 1s ease 0s;
        -o-transition: all 1s ease 0s;
        .name{
          .icon{
            display: flex;
            align-items: center;
            justify-content: center;
          }
          h2{
            font-size: 52px;
            transition: all 0.4s ease 0s;
          }
        }
        .list{
          display: flex;
          align-items: center;
          justify-content:center;
          ul{
            list-style: disc;
            li{
              font-weight: bold;
            }
          }
        }
        .arrow{
          position: relative;
          svg{
            circle{
              transition: all 1s ease 0s;
              -webkit-transition: all 1s ease 0s;
              -moz-transition: all 1s ease 0s;
              -ms-transition: all 1s ease 0s;
              -o-transition: all 1s ease 0s;
              fill: var(--alt);
            }
          }
        }
      }.serv:hover{
        .name{
          .icon{
            svg{
              transition: all 0.4s ease 0s;
              color: var(--second-color);
            }
          }
          h2{
            color: var(--second-color);
          }
        }
        .arrow{
          svg{
            circle{
              fill: var(--second-color);
            }
          }
        }
      }
    }
  }
}

/*                                                                       service detalis                                                                                          */



.service-detalis-section{
  .container{
    .top{
      border-bottom:1px solid var(--border-color);
      .title{
        height: fit-content;
        h4{
          font-size: 52px;
          font-weight: 700;
          text-transform: capitalize;
        }
      }
      .desc{
        position: relative;
        z-index: 3;
        background-color: var(--white);
        p{
          margin-left: 100px;
          color: #828282;
        }
      }
      .img{
        img{
          transform: translateY(-50px);
          -webkit-transform: translateY(-50px);
          -moz-transform: translateY(-50px);
          -ms-transform: translateY(-50px);
          -o-transform: translateY(-50px);
          position: relative;
          z-index: -1;
        }
        
      }
      .list{
        ul{
          margin-top: 50px;
          li{
            border-top: 1px solid var(--border-color);
            padding-top: 12px;
            margin-top: 12px;
            padding-left: 30px;
            position: relative;
            font-weight: 600;
            color: #828282;
          }
          li::before{
            content: "\f00c";
            font-family: "font awesome 6 free";
            font-weight: 700;
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: #ffe9d2;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 60%;
            left: -5px;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
}
        }
      }
    }
    .middle{
      .col-lg-4{
        padding-right: 80px;
        p{
          color: var(--gray);
        }
      }
    }
    .bottom{
      .col-12{
        h2{
          max-width: 900px;
          text-transform: capitalize;
          font-weight: bold;
          margin-top: 70px;
          margin-bottom: 50px;
        }
        
      }
      .col-lg-6{
        p{
          color: var(--gray);
        }
      }
    }
  }
}

/*                                                                       portifolio                                                                                          */

.portfolio-section{
  .container{
    .row{
      .col-sm-6{
        .single-port{
          height: fit-content;
        overflow: hidden;
        position: relative;
        .img{
          overflow: hidden;
          width: 100%;
          margin-bottom: 10px;
          position: relative;
          .overlay{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(25, 25, 25, 0.4392156863);
          }
          a{
            position: absolute;
            top: 60%;
            left: 40%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            width: 100px;
            height: 100px;
            background-color: var(--second-color);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius:50% ;
            -webkit-border-radius:50% ;
            -moz-border-radius:50% ;
            -ms-border-radius:50% ;
            -o-border-radius:50% ;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
            opacity: 0;
            svg{
              position: relative;
              z-index: 2;
            }
          }
          a::before{
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            width: 0;
            height: 0;
            border-radius:50% ;
            -webkit-border-radius:50% ;
            -moz-border-radius:50% ;
            -ms-border-radius:50% ;
            -o-border-radius:50% ;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
            background-color: var(--main-color);
            z-index: 1;
          }
          a:hover:before{
            width: 100%;
            height: 100%;
          }
          img{
            transition: all ease 2s;
            width: 100%;
          }
        }
        h1{
          font-size: 52px;
        }
        p{
          color: #828282;
        }
        }
        a{
          color:white;
          background-color:  var(--footer-link);
          width: 200px;
          height: 200px;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          padding: 24px;
          border: 1px solid ;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          position: relative;
          margin: 30px auto;
          span{
            position: relative; z-index: 2;
            display: flex;
            gap: 8px;
            justify-content: center;
          align-items: center;
          }
          
        }
        a::before{
          content:"";
          width: 0;
          height: 0;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          background-color:#191919;
          opacity: 0;
          transition: 0.4s;
          -webkit-transition: 0.4s;
          -moz-transition: 0.4s;
          -ms-transition: 0.4s;
          -o-transition: 0.4s;
          z-index: 1;
          }
        a:hover::before{
          content:"";
          width: 100%;
          height:100%;
          opacity: 1;
        }
      }
      .col-sm-6:hover{
        .img{
          img{
            transform: scale(1.2);
          }
          a{
            top: 50%;
            left: 50%;
            opacity: 1;
          }
        }
      }
    }
  }
}




/*                                                                       portifolio detalis                                                                                          */


.portifolio-detalis-section{
  padding-top: 120px;
  .container{
    .row{
      .col-lg-8{
        .portifolio-head{
          h2{
            font-size: 52px;
          }
        }
        .buttons{
          span{
            transition: all 0.3s ease 0s;
            border-radius: 30px;
            border: 1px solid var(--main-color);
            background: transparent;
            padding: 10px 20px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            color: var(--main-color);
            font-size: 16px;
            height: 32px;
            cursor: pointer;
          }
          span:hover{
            background-color: var(--main-color);
            color: var(--white);
          }
        }
        .list{
          ul{
            li{
              display: flex;
              p{
                width: 150px;
                margin: 0;
              }
            }
          }
        }
        .check-list{
          ul{
            li{
              margin-bottom: 10px;
              position: relative;
              color: gray;
            }
            li::before{
              content: "\f00c";
              font-family: "font awesome 6 free";
              font-weight: 700;
              position: absolute;
              top: 50%;
              left: -30px;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              -moz-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              -o-transform: translateY(-50%);
              color: var(--main-color);
            }
          }
        }
      }
      .col-12{
        .section-title{
          width: fit-content;
          margin: 10px auto;
          .anime-header{
            font-size: 24px ;
            span{
              transition: 1s;
              display: inline-block;
              -webkit-transition: 1s;
              -moz-transition: 1s;
              -ms-transition: 1s;
              -o-transition: 1s;
            }
          }
          .heading{
            color: var(--main-color);
            font-size: 96px;
            padding-bottom: 100px;
            span{
              display: inline-block;
              transition: 1s;
              -webkit-transition: 1s;
              -moz-transition: 1s;
              -ms-transition: 1s;
              -o-transition: 1s;
            }
          }
        }
        .row{
          .col-lg-4{
            .buttons{
              span{
                transition: all 0.3s ease 0s;
                border-radius: 30px;
                border: 1px solid var(--main-color);
                background: transparent;
                padding: 10px 20px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                color: var(--main-color);
                font-size: 16px;
                height: 32px;
                cursor: pointer;
              }
              span:hover{
                background-color: var(--main-color);
                color: var(--white);
              }
            }
            h4{
              transition: all 0.4s ease 0s;
              font-size: 24px;
            }
            h4:hover{
              color: var(--second-color);
            }
          }
        }
      }
    }
  }
}

/*                                                                       blog-details-section                                                                                          */



.blog-details-section{
  padding: 150px 0;
  .container{
    .row{
      .col-xl-8{
        .check-list{
          ul{
            li{
              margin-bottom: 10px;
              position: relative;
              color: gray;
            }
            li::before{
              content: "\f00c";
              font-family: "font awesome 6 free";
              font-weight: 700;
              position: absolute;
              top: 50%;
              left: -30px;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              -moz-transform: translateY(-50%);
              -ms-transform: translateY(-50%);
              -o-transform: translateY(-50%);
              color: var(--main-color);
            }
          }
        }
        .other-blogs{
          padding-top: 120px;
          .blog{
            .card-cont{
              border-radius: 30px;
              background-color: var(--slick);
              box-shadow: 0px 94px 94px 0px rgba(0, 0, 0, 0.05);
              overflow: hidden;
              .img{
                border-radius: 30px;
                overflow: hidden;
                img{
                  border-radius: 30px;
                  transition: 0.7s;
                  width: 100%;
                }
              }
              .text{
                .up{
                  margin-bottom: 15px;
                  a{
                    color: #666;
                  }
                  a:hover{
                    color: var(--main-color);
                  }
                }
                .middle{
                  margin-bottom: 15px;
                  a{
                    transition: .3s;
                    -webkit-transition: .3s;
                    -moz-transition: .3s;
                    -ms-transition: .3s;
                    -o-transition: .3s;
                  }
                  a:hover{
                    color: var(--second-color);
                  }
                }
                .down{
                  button{
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    gap: 10px;
                    padding: 12px 26px;
                    border-radius: 100px;
                    color: var(--main-color);
                    background-color: transparent;
                    font-size: 16px;
                    transition: all 0.3s ease-in-out;
                    border: 1px solid rgba(25, 25, 25, 0.1);
                    height: fit-content;
                  }
                  button:hover{
                    background-color: var(--main-color);
                    color: var(--white);
                  }
                }
              }
            }
            .card-cont:hover{
              .img{
                img{
                  transform: scale(1.1);
                }
              }
            }
          }
        }
        .comments{
          padding-top: 120px;
          
          .comment{
            border-bottom: 1px solid rgba(17, 17, 17, 0.1);
            margin-bottom: 25px;
            padding-bottom: 25px;
            position: relative;
            button{
              display: inline-block;
              background: rgba(17, 17, 17, 0.05);
              padding: 2px 16px 4px;
              border-radius: 30px;
              display: flex;
              align-items: start;
              transition: 0.4s;
              color: var(--main-color);
              height: fit-content;
              border: none;
            }
            button:hover{
              background-color: var(--main-color);
              color: var(--white);
            }
          }
        }
        .form{
          form{
            input{
              width: 100%;
              color: #828282;
              border: none;
              border-bottom: 1px solid rgba(17, 17, 17, 0.1);
              padding: 5px 0 10px 0;
              outline: 0 !important;
              background-color: transparent;
            }
            textarea{
              width: 100%;
              color: #828282;
              border: none;
              border-bottom: 1px solid rgba(17, 17, 17, 0.1);
              padding: 5px 0 10px 0;
              outline: 0 !important;
              background-color: transparent;

            }
            a{
              background-color: var(--second-color);
              padding: 20px 46px;
              border-radius: 40px;
              font-weight: 700;
              display: inline-flex;
              gap: 5px;
              align-items: center;
              justify-content: center;
              position: relative;
              overflow: hidden;
              cursor: pointer;
              border: 1px solid #ffae88;
              width: fit-content;
              text-transform: uppercase;
              margin-top: 20px;
              span{
                position: relative;
                z-index: 2;
                color: #191919;
              }
            }
            a::before,
            a::after{
              width: 0%;
              height: 0%;
              content: "";
              position: absolute;
              border-radius: 100%;z-index: 1;
            }
            a::before{
              transition: all 0.5s ease-out;
              background: #FFE9D2;
            }
            a::after{
              transition: all 0.5s ease;
              background-color: white;
            }
            a:hover::before,
            a:hover::after{
              width: 300px;
              height: 300px;
              border-radius: 4px;
            }
          }
        }
      }
      .col-4{
        .box{
          border: 1px solid rgba(25, 25, 25, 0.1);
          padding: 24px 30px;
          form{
            position: relative;
            input{
              padding: 12px 20px;
              border: 1px solid rgba(var(--main-color), 0.1);
              border-radius: 30px;
              height: 50px;
              color: var(--main-color);
              font-size: 16px;
              width: 100%;
            }
            button{
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              right: 0;
              top: 0;
              background-color: var(--second-color);
              border-radius: 50%;
              width: 50px;
              height: 50px;
              border: none;
            }
          }
          ul{
            li{
              padding: 14px 28px;
              border-radius: 30px;
              background-color: transparent;
              transition: all 0.4s ease;
              color: var(--main-color);
            }
            .active{
              background-color: rgba(25, 25, 25, 0.1);
            }
            li:hover{
              background-color: rgba(25, 25, 25, 0.1);
            }
          }
          .social{
            a{
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: #ededed;
              width: 50px;
              height: 50px;
              border-radius: 50%;
              transition: all 0.4s ease;
            }
          }
          .blog{
            .img{
              overflow: hidden;
              min-width: 110px;
              img{
                transition: .4s;
                -webkit-transition: .4s;
                -moz-transition: .4s;
                -ms-transition: .4s;
                -o-transition: .4s;
                width: 100%;
                height: 100%;

              }
              img:hover{
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }
}


/*                                                                       contact                                                                                          */

.contact-section{
  .container{
    .row{
      .col-lg-8{
        margin-bottom: 20px;
        form{
          padding: 50px;
          border-radius: 24px;
          background-color: var(--contact-color);
          
          .col-sm-6{
            margin-bottom: 20px;
            input{
              width: 100%;
              height: 55px;
              border: 0 !important;
              border-radius: 4px;
              padding: 0 22px;
              background-color: var(--slick);
            }
            label{
              font-weight: 500;
              margin-bottom: 5px;
            }
          }
          .col-12{
            label{
              font-weight: 500;
              margin-bottom: 5px;
            }
            textarea{
              width: 100%;
              border: 0 !important;
              height: 170px;
              border-radius: 4px;
              padding: 14px 18px;
              background-color: var(--slick);
            }
          }
          a{
            background-color: var(--second-color);
            padding: 20px 46px;
            border-radius: 40px;
            font-weight: 700;
            display: inline-flex;
            gap: 5px;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border: 1px solid #ffae88;
            width: fit-content;
            text-transform: uppercase;
            margin-top: 20px;
              color: #191919;
          }
        }
      }
      .col-lg-4{
        .contact{
          padding: 50px 30px;
          border-radius: 24px;
          background-color: var(--contact-color);
          .box{
            border-top: 1px solid #EEE;
            margin-top: 20px;
            padding-top: 20px;
            .icon{
              border-radius: 300px;
              border: 1px solid #F3F3F3;
              background: #FFF;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 80px;
              height: 80px;
              margin-bottom: 15px;
            }
          }
        }
      }
    }
  }
}

.iframe-section{
  padding-top: 120px;
}
/*                                                                       about                                                                                          */


.about-top-section{
  background-color: #F5F5F5;
  padding: 150px 0px 0px;
  .container-fluid{
    .text-title{
      padding: 0px 310px 45px;
      .suptext{
        color: var(--main-color);
        font-family: "Inter", sans-serif;
        padding: 17px 24px;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
        text-transform: capitalize;
        border-radius: 300px;
        border: 1px solid #E2E2E2;
      }
      .title{
        color: var(--main-color);
        font-size: 100px;
        text-transform: capitalize;
        padding-top: 20px;
        font-weight: bold;
      }
    }
    .content{
      display: grid;
      grid-template-columns: 580px auto;
      gap: 110px;
      padding: 0px 130px 0px 170px;
      .right{
        h3{
          font-size: 24px;
          font-weight: 400;
          line-height: 1.6;
          padding-bottom: 40px;
          max-width: 612px;
        }
        a{
          color: var(--main);
          background-color:  var(--slick);
          width: 200px;
          height: 200px;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          padding: 24px;
          border: 1px solid var(--slick);
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          position: relative;
          span{
            position: relative; z-index: 2;
            display: flex;
            gap: 8px;
            justify-content: center;
          align-items: center;
          }
        }
        a::before{
          content:"";
          width: 0;
          height: 0;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          background-color:#191919;
          opacity: 0;
          transition: 0.4s;
          -webkit-transition: 0.4s;
          -moz-transition: 0.4s;
          -ms-transition: 0.4s;
          -o-transition: 0.4s;
          z-index: 1;
          }
          a:hover{
            color: white;
          }
          a:hover::before{
            content:"";
            width: 100%;
            height:100%;
            opacity: 1;
          }
      }
    }
    img.sm{
      position: absolute;
      bottom: 84px;
      right: 130px;
      border-radius: 80px 0px 0px 0px;
    }
  }
}
.counter-2{
  padding: 70px 0px;
  background-color: #FFAE88;
  .container{
    .row{
      .col-12{
        border-right: 2px solid rgba(255, 233, 210, 0.2509803922); 
        .num{
          font-size: 64px;
        }
      }
    }
  }
}
.about-head-section{
  padding-top: 150px ;
  .container{
    .head-about-title{
      display: grid;
      align-items: center;
      grid-template-columns: 420px auto;
      gap: 290px;
      border-bottom: 1.5px solid #E2E2E2;
      padding-bottom: 30px;
    }
  }
}
/*                                                                       mobile                                                                                          */


.offcanvas{
  width: 80%;
  .offcanvas-header{
    position: relative;
    button{
      position: absolute;
      width: 30px;
      left: -40px;
      background-image:none ;
      opacity: 1;
      svg{
        color: white;
      }
    }
    button:focus{
      box-shadow:none ; 
      opacity:1 ;
    }
    
  }
  .offcanvas-body{
    .collap{
      .colp{
        display: block;
        position: relative;
        padding: 13px 0 0 30px;
        button{
          border: 0;
          background-color: transparent;
          width: 100%;
          display: flex;
          justify-content: space-between;
          a{
            text-transform: uppercase;
            display: block;
            font-style: italic;
            margin: 0;
            transition: 0.4s;
            font-size: 26px;
            font-weight: bold;
            color:#191919;
          }
          img{
            height: 25px;
            width: 25px;
          }
        }
        .collapse{
          .card{
            border: 0;
            ul{
              padding-left: 10px;
              li{
                margin-bottom: 10px;
                display: block;
                padding-left: 0;
                text-transform: uppercase;
                font-size: 17px;
                
                position: relative;
                font-style: italic;
                font-weight: bold;
                a{
                  color: #575757 !important;
                }
              }
            }
          }
        }
        .collapsing{
          .card{
            border: 0;
            ul{
              padding-left: 10px;
              li{
                margin-bottom: 10px;
                display: block;
                padding-left: 0;
                text-transform: uppercase;
                font-size: 17px;
                
                position: relative;
                font-style: italic;
                font-weight: bold;
                a{
                  color: #575757 !important;
                }
              }
            }
          }
        }
      }
    }
    
    
    .offcanvas-section {
      border-top: 1px solid #d1d1d1;
    }
    .about{
      margin-left: 40px;
      margin-bottom: 40px;
    }
    .social{
      i{
        color: var(--gray);
      }
    }
  }
}

@media only screen and (min-width: 1599px) {
  .side{
    display: block !important; 
  }
  .side-alt{
    display: block !important; 
  }
}
@media only screen and (max-width: 1599px) {
  
  .about-top-section {
    .container-fluid {
      .text-title{
        .title {
          font-size: 64px;
      }
      }
      img.sm{
        bottom: 30px;
        right: 30px;
      }
    }
  }
  .home{
    .header{
      .image.spin-2 {
        left: 20px !important;
        width: 24px !important;
      } 
    }
    .image {
      width: 24px !important;
      left: 70px !important;
    }
    .image2 {
      width: 24px !important;
      right: 119px !important;
      top: -20px !important;
    }
    .image2.spin-2 {
      
      top: -40px !important;
      right: 20px !important;
      
    }
    
  }
}
@media only screen and (max-width: 1400px) {
  .about-us {
    .heading {
        font-size: 110px !important;
    }
  }
  .home{
    .anime-header2{
      span{
        font-size: 40px !important;
      }
    }
  }
}

@media only screen and (max-width: 1199px) {
  .nav,
  .nav-for-other{
    .container{
      .social{
        padding: 0;
      }
    }
  }
  .section-title {
    h1{
      font-size: 60px !important; 
      span{
        font-size: 60px;
      }
    }
  }
  .portfolio-section {
    .container {
      .row {
        .col-sm-6 {
          .single-port {
            h1 {
              font-size: 35px;
            }
          }
        }
      }
    }
  }
  .about-top-section {
    .container-fluid {
      .text-title {
        padding: 0px 150px 40px 15px;
        .title {
          font-size: 36px;
          
        }
      }
      .content{
        padding: 0px 20px 0px 20px;
        gap: 35px;
        .right {
          h3 {
            font-size: 18px;
          }
          a{
            width: 140px;
            height: 140px;
            font-size: 18px;
          }
        }
      }
      img.sm{
        bottom: 0;
        right: 0;
        width: 22%;
      }
    }
  }
  .about-head-section {
    padding-top: 75px;
    .container {
      .head-about-title {
        gap: 145px;
      }
    }
  }
  .footer {
    .container {
      .row {
        .top {
          h1 {
            font-size: 60px;
            line-height: 1.2;
          }
        }
        .bottom{
          padding-top: 50px;
        }
      }
    }
  }
  .service {
    .container {
      .section-title {
        .stroke {
          span {

            font-size: 180px;
          }
        }
      }
    }
  }
  .about-us {
    .heading {
        font-size: 64px !important;
    }
  }
  .row {
    .col-12 {
      .center-desc {
        font-size: 24px;
        line-height: 1.5;
      }
    }
  }
  .home {
    .header {
      .container {
        .anime-header{
          span{
            font-size: 65px;
          }
        }
        .anime-header2{
          span{
            font-size: 35px !important;
          }
        }
        .row{
          .text{
            .hand{
              margin: 0 auto;
            }
            .cv{
              padding-top: 50px;
            }
          }
          .img{
            .main-img{
              position: relative !important;
              transform: translate(0) !important;
              min-width: 100% !important;
              max-width: 100% !important;
              min-height: 100% !important;
              -webkit-transform: translate(0) !important;
              -moz-transform: translate(0) !important;
              -ms-transform: translate(0) !important;
              -o-transform: translate(0) !important;
              position: absolute;
}
          }
        }
      }
    }
    .nav {
      .container-header {
          .social {
              padding-left: 0px;
          }
      }
  }
  }
}
@media only screen and (max-width: 991px) {
  .blog-section{
    .head{
      .left{
        padding: 0 !important;
        border: none !important;;
      }
      .right{
          padding: 0 !important;
          border: none !important;;
        }
    }
  }
  .service-detalis-section {
    .container {
      .top {
        .desc {
          p {
            margin-left: 0 !important;
            color: #828282;
          }
        }
        .img {
          img {
            transform: translateY(0px);
            -webkit-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            position: relative;
            z-index: -1;
          }
        }
        .list{
          ul{
            padding: 0;
          }
        }
      }
    }
  }
  .about-top-section{
    padding: 190px 0px 60px;
    .container-fluid {
      .content{
        grid-template-columns: 1fr;
        padding: 0px 15px 0px 15px;
      }
      img.sm{
        bottom: 0;
      right: 0;
      width: auto;
      }
    }
  }
  .counter-2 {
    .container {
      .row {
        .col-12.lg {
          border-right: 0px solid rgba(255, 233, 210, 0.2509803922);
        }
      }
    }
  }
  .about-head-section {
    .container {
      .head-about-title {
        grid-template-columns: 390px auto;
        gap: 0px;
      }
    }
  }
  .about-us {
    .heading {
        font-size: 44px !important;
    }
    .row {
      .col-12 {
        .center-desc {
          font-size: 22px;
        }
      }
    }
  }
  .home {
    .header {
      .container {
        .anime-header2{
          span{
            font-size: 34px !important;
          }
        }
        .row{
          .text{
            .hand{
              display: inline-flex !important;
            }
          }
        }
      }
    }
  }
  .Testimonials{
    .container{
      .slick-next {
        top: 103% !important;
        right: 41% !important;
    }
      .slick-prev {
        top: 103% !important;
        left: 40% !important;
      }
    }
  }
}
@media only screen and (max-width: 767px) {
  .head-title{
    h1{
      font-size: 45px !important;
    }
  }
  .service-section{
    .serv{
      h2{
        font-size: 24px !important;
      }
    }
  }
  .blog-section{
    .head{
      .left{
        padding: 0 !important;
        border: none !important;;
      }
    }
      .right{
        padding: 0 !important;
        border: none !important;;
      }
  }
  .about-top-section {
    .container-fluid {
      .text-title {
        padding: 0px 15px 30px 15px;
        .title {
          font-size: 32px;
          
        }
      }
      .content{
        grid-template-columns: 1fr;
        padding: 0px 15px 0px 15px;
        
      }
    }
  }
  .about-head-section {
    .container {
      .head-about-title {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }
  }
}
@media only screen and (max-width: 575px) {
  .blog-section{
    .head{
      .right{
        h1{
          font-size: 35px !important;
        }
      }
    }
  }
  .section-title {
    h1{
      font-size: 44px !important;
      span{
        font-size: 44px;
      }
    }
  }
  .portifolio-detalis-section {
    .container {
      .row {
        .col-lg-8 {
          .portifolio-head {
            h2 {
              font-size: 24px;
            }
          }
        }
      }
    }
  }
  .service-detalis-section {
    .container {
      .bottom {
        .col-12 {
          h2{
            font-size: 24px;
          }
        }
      }
    }
  }
  .fs-52{
    font-size: 30px;
  }
  .home {
    .header {
      .container {
        .arrow {
          font-size: 20px;
          img{
            width: 60px;
          }
        }
        .desabld-anime-header {
            font-size: 55px;
        }
        .anime-header2{
          span{
            font-size: 24px !important;
          }
        }
        .row{
          .text{
            .hand{
              padding: 15px;
              height: 60px;
              width: 100%;
            }
          }
          .img{
            .main-img{
              min-width: 100% !important;
              min-height: auto !important;
            }
          }
        }
      }
    }
  }
  .about-top-section {
    .container-fluid {
      .content{
        .right {
          a{
            width: 140px;
            height: 140px;
            font-size: 18px;
          }
        }
      }
    }
  }
  .footer {
    .container {
      .row {
        .top {
          h1 {
            font-size: 44px;
            line-height: 1.2;
          }
        }
        .bottom{
          padding-top: 50px;
        }
      }
    }
  }
  .prog-section {
    .container {
      .row {
        .num-sec {
          .num {
            font-size: 32px;
          }
        }
      }
    }
  }
  .service {
    .container {
      .section-title {
        .stroke {
          span {
            font-size: 60px;
          }
        }
      }
    }
  }
  .about-us {
    .heading {
        font-size: 40px !important;
    }
    .row {
      .col-12 {
        .center-desc {
          font-size: 20px;
        }
        .scroll{
          width: 140px;
          height: 140px;
          font-size: 18px;
          img{
            width: 10px;
          }
        }
      }
    }
  }
  .Testimonials{
    .container{
      .slick{
        font-size: 16px !important;
        margin: 0 !important;
        padding: 30px !important;
        
        p{
          margin: 0;
        }
      }
      .slick-next {
        top: 103% !important;
        right: 30% !important;
      
      }
      .slick-prev {
        top: 103% !important;
        left: 28% !important;
      }
    }
  }
  .offcanvas {
    .offcanvas-header {
      button {
        left: 10px;
        svg{
          color: var(--main-color);
        }
      }
    }
  }
}
@keyframes spin {
  from{
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
  }
}
@keyframes slide {
  from{
    transform: translateX(0);
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
}
  to{
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
}
}