:root {
  --color-white:#fff;
  --color-white2:#f8f8f8;
  --color-black:#15222c;
  --color-gBlack:#616670;
  --color-gBlack2:#333f4d;
  --color-border:#e3e3e3;
  --color-orange:#d38e25;
  --color-orange2:#ffba08;
  --color-tr:transparent
}
@media (min-width:576px) {
  .breadcum {
    padding:80px 0
  }
  .widgets .widget~.widget {
    margin-top:50px
  }
  .about-us .about-img {
    width:calc(100% - 55px);
    margin:21px 0 21px 28px
  }
  .about-us .items-content li {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    gap:20px;
    padding:35px 30px
  }
  .about-us .items-content .my-icon~.item-text {
    margin-top:0
  }
  .about-us .items-link ul {
    gap:50px
  }
  .footer-main .footer-content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:justify;
    justify-content:space-between
  }
}
@media (min-width:768px) {
  section {
    padding:80px 0
  }
  .breadcum {
    padding:100px 0
  }
  .title-left-right {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:end;
    align-items:end;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-pack:justify;
    justify-content:space-between
  }
  .title-left-right .left-content {
    width:45%
  }
  .title-left-right .right-content {
    width:55%;
    padding-left:30px;
    margin-top:10px
  }
  .top-bar .info-link ul {
    gap:15px
  }
  .top-bar .info-link li:nth-child(3) {
    display:block
  }
  .banner .banner-content {
    width:70%
  }
  .services .row>div:nth-child(2) .services-card,
  .work-gallery .row>div:nth-child(2) .gallery-card {
    margin-top:0
  }
  .work-gallery .gallery-img-boxs {
    grid-gap:30px
  }
  .work-gallery.v1 .gallery-img-horizontal {
    grid-column:auto/span 2
  }
  .work-gallery.v2 .gallery-img-boxs {
    grid-auto-flow:dense;
    grid-template-columns:repeat(auto-fit,calc(33.3333333% - 20px))
  }
  .work-gallery.v2 .gallery-img-small {
    grid-row:span 1;
    grid-column:span 1
  }
  .work-gallery.v2 .gallery-img-horizontal {
    grid-row:span 2;
    grid-column:span 1
  }
  .work-gallery.v2 .gallery-img-vertical {
    grid-row:span 1;
    grid-column:span 2
  }
  .counter-section .counter-items ul {
    -ms-flex-direction:row;
    flex-direction:row
  }
  .counter-section .counter-items li {
    width:calc(50% - 23px);
    min-width:calc(50% - 23px)
  }
  .our-simple-step .row>div:nth-child(2) .process-card {
    margin-top:0
  }
  .clients-review .section-title~.slider {
    margin-top:60px
  }
  .clients-review .client-card {
    padding:40px
  }
  .clients-review.v1 .client-card .swiper-slide-active,
  .clients-review.v1 .client-card:hover {
    border-bottom-color:var(--color-orange);
    border-radius:10px;
    box-shadow:0 4.4px 20px -1px rgba(19,16,34,.05);
    background:var(--color-white)
  }
  .clients-review.v2 .client-card h6,
  .clients-review.v2 .client-card p {
    transition:all .4s ease
  }
  .clients-review.v2 .client-card.swiper-slide-active,
  .clients-review.v2 .client-card:hover {
    border-color:var(--color-orange);
    border-radius:5px;
    box-shadow:0 4.8px 24.4px -6px rgba(19,16,34,.1),0 4px 13px -2px rgba(19,16,34,.06);
    background:#5156bc
  }
  .clients-review.v2 .client-card.swiper-slide-active h6,
  .clients-review.v2 .client-card.swiper-slide-active h6 a,
  .clients-review.v2 .client-card.swiper-slide-active p,
  .clients-review.v2 .client-card:hover h6,
  .clients-review.v2 .client-card:hover h6 a,
  .clients-review.v2 .client-card:hover p {
    color:var(--color-white)
  }
  .get-in-touch .left-content .card-items-list li {
    width:calc(50% - 15px)
  }
  .latest-news .row>div:nth-child(2) .new-post-card {
    margin-top:0
  }
  .who-we-are .left-images {
    position:relative
  }
  .who-we-are .left-images .big-img {
    width:calc(100% - 70px);
    margin:0 auto
  }
  .who-we-are .left-images .count-and-img {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:start;
    align-items:flex-start;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-pack:center;
    justify-content:center;
    gap:30px;
    margin-top:-57px
  }
  .who-we-are .left-images .count-and-img .count-user~.smaill-img {
    margin-top:0
  }
  .who-we-are .left-images .smaill-img {
    position:relative;
    width:32%;
    border:7px solid var(--color-white);
    box-shadow:0 4.4px 20px -1px rgba(19,16,34,.05);
    border-radius:5px
  }
  .who-we-are .left-images .smaill-img:before {
    position:absolute;
    content:"";
    width:100%;
    height:100%;
    left:-100%;
    background-image:url(../img/who-we-are/shap.png);
    background-repeat:no-repeat;
    background-position:50%;
    background-size:100% 100%;
    z-index:-1
  }
  .our-tema .row>div:nth-child(2) .tema-card {
    margin-top:0
  }
  .talk-to-us .left-numbber {
    padding:40px 60px;
    gap:25px;
    margin:-100px 46px 0
  }
  .talk-to-us .left-numbber .my-icon {
    font-size:50px
  }
  .talk-to-us .left-numbber .text-content h4~h3 {
    margin-top:-4px
  }
  .talk-to-us .right-content .section-title~form {
    margin-top:60px
  }
  .talk-to-us .right-content form .group-box {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    gap:20px
  }
  .talk-to-us .right-content form input~.my-select,
  .talk-to-us .right-content form input~input {
    margin-top:0
  }
  .talk-to-us.v1 {
    position:relative;
    z-index:1
  }
  .talk-to-us.v1:before {
    position:absolute;
    content:"";
    width:60%;
    height:100%;
    right:0;
    bottom:0;
    background-image:url(../img/talk-to-us/bg-shap.png);
    background-repeat:no-repeat;
    background-position:100%;
    background-size:100% 100%;
    z-index:-1
  }
  .blog-post-card~.blog-post-card {
    margin-top:50px
  }
  .blog-post-card.video-box .play-video-btn {
    width:80px;
    height:80px;
    font-size:18px
  }
  .info-footer .popular-post {
    margin-top:6px
  }
}
@media (min-width:992px) {
  .section-title-center {
    max-width:50%
  }
  .breadcum {
    padding:100px 0
  }
  .list-mark.two-col-list li {
    width:calc(50% - 25px)
  }
  .top-bar .social-link {
    display:inline
  }
  .top-bar .info-link ul {
    gap:35px
  }
  .top-bar.v1 {
    -ms-flex-pack:justify;
    justify-content:space-between
  }
  .top-bar.v1 .top-right {
    gap:12px
  }
  .top-bar.v1 .top-right,
  .top-bar.v2 .top-bar-content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:justify;
    justify-content:space-between
  }
  .top-bar.v2 .top-bar-content {
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
  }
  .menu-bar {
    padding:0
  }
  .menu-bar .main-menu {
    display:inherit
  }
  .menu-bar .mobile-menu-btn {
    display:none
  }
  .banner .banner-content {
    width:50%
  }
  .banner.v2 {
    background-position:130% 0;
    background-size:70% 100%
  }
  .banner.v2:after,
  .banner.v2:before {
    position:absolute;
    content:"";
    height:100%;
    top:0;
    z-index:-1
  }
  .banner.v2:before {
    width:50%;
    left:0;
    opacity:1;
    background:var(--color-black)
  }
  .banner.v2:after {
    width:100%;
    right:0;
    background-image:url(../img/banner/v2/shap.svg);
    background-repeat:no-repeat;
    background-size:100% 100%
  }
  .about-us .about-content {
    margin-top:0
  }
  .about-us .about-img {
    width:calc(100% - 70px)
  }
  .about-us .about-img .circle-play-btn {
    width:144px;
    height:144px
  }
  .services.v1 .services-card .services-text {
    padding:40px
  }
  .services.v1 .services-card .services-text .my-icon {
    font-size:55px;
    width:95px;
    height:95px;
    line-height:95px
  }
  .services.v2 .services-card .services-header,
  .services.v3 .services-card .services-header {
    padding:20px 35px
  }
  .services.v2 .services-card .services-header .services-text h4~p,
  .services.v3 .services-card .services-header .services-text h4~p {
    margin-top:5px
  }
  .get-in-touch .left-content .card-items-list li {
    width:100%
  }
  .latest-news.v1 .new-post-card .post-content {
    padding:40px
  }
  .latest-news.v2 .section-title .right-content {
    text-align:right
  }
  .company-benefits {
    padding:0;
    overflow:hidden
  }
  .company-benefits:before {
    height:calc(100% - 80px)
  }
  .company-benefits .content-box {
    padding:100px 0;
    margin-top:80px
  }
  .company-benefits .box-img {
    position:relative;
    left:0;
    margin-top:0
  }
  .company-benefits .box-img:before {
    position:absolute;
    content:"";
    width:50vw;
    height:100%;
    bottom:-100%;
    left:0;
    background:var(--color-white2)
  }
  .company-benefits .box-img img {
    width:50vw
  }
  .faq-section .accordion {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-align:start;
    align-items:start;
    gap:30px
  }
  .faq-section .accordion li {
    width:calc(50% - 15px)
  }
  .faq-section .accordion li~li {
    margin-top:0
  }
  .team-details .profile-info {
    margin-top:0;
    padding-left:70px
  }
  .team-details .info-title h6~p,
  .team-details .list-mark li~li {
    margin-top:25px
  }
  .team-details .list-mark h4 {
    font-size:24px;
    line-height:36px
  }
  .team-details .list-mark~.info-social {
    margin-top:45px
  }
  .team-details .row~.team-description {
    margin-top:100px
  }
  .team-details .team-description p~h3 {
    margin-top:50px
  }
  .team-details .skills-list {
    padding-left:70px;
    margin-top:0
  }
  .service-details .service-links-list li a {
    padding:15px 30px;
    font-size:18px
  }
  .service-details .profile-numbber {
    margin:-10% 20px 0
  }
  .service-details .service-content .big-img~.service-text {
    margin-top:50px
  }
  .service-details .service-content h2 {
    font-size:48px;
    line-height:60px
  }
  .service-details .service-content .service-text h2~p {
    margin-top:50px
  }
  .service-details .service-content .service-text p~h6 {
    margin-top:30px
  }
  .service-details .service-content .service-text~.list-mark {
    margin-top:50px
  }
  .service-details .service-content .list-mark h2~ul {
    margin-top:30px
  }
  .service-details .services-box-imgs {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    gap:30px
  }
  .service-details .services-box-imgs .box-img~.box-img {
    margin-top:0
  }
  .service-details .services-box-imgs~.services-faq {
    margin-top:50px
  }
  .footer-main .footer-content ul,
  .info-footer .popular-post,
  .info-footer.v2 .our-link {
    margin-top:0
  }
}
@media (min-width:1200px) {
  section {
    padding:70px 0
  }
  .breadcum {
    padding:50px 0
  }
  .breadcum .breadcum-content h4 {
    font-size:48px;
    line-height:60px
  }
  .breadcum .breadcum-content ul {
    font-size:18px;
    line-height:28px
  }
  .widgets .widget-header {
    padding:20px 30px
  }
  .widgets .widget-header h4 {
    font-size:24px;
    line-height:36px
  }
  .widgets .widget-content {
    padding:30px
  }
  .widgets .category-list ul {
    padding:30px 20px
  }
  .widgets .post-list li~li {
    margin-top:30px
  }
  .pegination-box ul,
  .widgets .tags-widgets ul {
    gap:20px
  }
  .pegination-box a {
    width:50px;
    height:50px;
    line-height:50px;
    font-size:18px
  }
  .section-title-center h2,
  .section-title h2 {
    font-size:48px;
    line-height:60px
  }
  .scroll-bottom-Top {
    width:55px;
    height:55px;
    bottom:50px;
    line-height:55px
  }
  .scroll-bottom-Top.show {
    right:50px
  }
  .top-bar .top-bar-content {
    padding:0 15px
  }
  .top-bar .info-link ul {
    -ms-flex-pack:inherit;
    justify-content:inherit
  }
  .menu-bar .main-menu ul a {
    padding:25px 0
  }
  .menu-bar .main-menu ul li:nth-last-child(3) ul {
    left:0;
    right:inherit
  }
  .menu-bar .main-menu ul li:nth-last-child(3) ul ul {
    left:100%;
    right:inherit
  }
  .menu-bar .main-menu ul li:nth-last-child(3) ul,
  .menu-bar .main-menu ul li:nth-last-child(3) ul ul {
    left:0;
    right:inherit
  }
  .menu-bar.v1 .container {
    max-width:100%;
    padding:0 0 0 40px
  }
  .menu-bar .main-menu,
  .menu-bar.v1 .right-btn {
    display:inherit
  }
  .menu-bar.v2 .right-contact {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:end;
    justify-content:flex-end;
    gap:15px
  }
  .banner {
    padding:0
  }
  .banner .banner-content {
    padding:100px 0;
    width:60%;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center;
    min-height:calc(100vh - 155px)
  }
  .banner .banner-content h2 {
    font-size:68px;
    line-height:90px
  }
  .banner .banner-content h6~h2 {
    margin-top:10px
  }
  .banner .banner-content h2~p {
    margin-top:5px
  }
  .banner .banner-content p~ul {
    margin-top:50px
  }
  .banner.v1:after {
    width:54vh;
    height:54vh;
    left:-16%;
    bottom:-12%
  }
  .about-us .about-img {
    width:calc(100% - 130px)
  }
  .services .row>div:nth-child(3) .services-card {
    margin-top:0
  }
  .work-gallery .section-title-center~.gallery-img-boxs,
  .work-gallery .section-title~.gallery-img-boxs {
    margin-top:60px
  }
  .work-gallery .row>div:nth-child(3) .gallery-card {
    margin-top:0
  }
  .work-gallery.v1 .gallery-img-boxs {
    grid-template-columns:repeat(auto-fit,calc(25% - 23px))
  }
  .counter-section .counter-items li {
    width:calc(25% - 23px);
    min-width:calc(25% - 23px)
  }
  .common-faqs:before {
    height:45%
  }
  .common-faqs .faqs-card {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-align:center;
    align-items:center
  }
  .common-faqs .faq-content {
    width:60%;
    padding:60px;
    border-radius:5px 0 0 5px
  }
  .common-faqs .faq-img {
    width:40%;
    margin-top:0
  }
  .common-faqs .faq-img img {
    border-radius:0 5px 5px 0
  }
  .our-simple-step {
    position:relative
  }
  .our-simple-step:before {
    position:absolute;
    content:"";
    background-repeat:no-repeat;
    z-index:-1
  }
  .our-simple-step .row>div:nth-child(3) .process-card {
    margin-top:0
  }
  .our-simple-step.v1 {
    padding-top:0
  }
  .our-simple-step.v1:before {
    width:30%;
    min-height:calc(100% + 910px);
    top:-100%;
    left:0;
    background-image:url(../img/our-simple-step/v1/bg-shap.png);
    background-position:0;
    background-size:100% 100%
  }
  .our-simple-step.v1 .section-title-center~.row,
  .our-simple-step.v1 .section-title~.row {
    margin-top:80px
  }
  .our-simple-step.v1 .row>div:nth-child(4) .process-card {
    margin-top:0
  }
  .our-simple-step.v1 .process-card {
    padding:70px 30px 40px
  }
  .our-simple-step.v1 .process-card .my-icon {
    position:absolute;
    top:-30px;
    right:30px;
    margin-bottom:0
  }
  .our-simple-step.v2:before {
    width:75%;
    height:75%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background-image:url(../img/our-simple-step/v2/bg-shap.png);
    background-size:contain;
    background-position:50%
  }
  .our-simple-step.v2 .process-card {
    padding:40px
  }
  .clients-review .section-title~.slider {
    margin-top:60px
  }
  .clients-review .next-btn,
  .clients-review .prev-btn {
    width:60px;
    height:60px;
    font-size:14px
  }
  .clients-review .prev-btn~.next-btn {
    margin-left:20px
  }
  .get-in-touch {
    padding-bottom:0
  }
  .get-in-touch:after {
    position:absolute;
    content:"";
    width:100%;
    height:35%;
    left:0;
    bottom:0;
    background:var(--color-white);
    z-index:-1
  }
  .get-in-touch .left-content .s-items-list~a {
    margin-top:60px
  }
  .get-in-touch .left-content .card-items-list {
    margin-top:200px
  }
  .get-in-touch .get-in-touch-form {
    padding:65px 60px;
    margin-top:0
  }
  .latest-news .row>div:nth-child(3) .new-post-card,
  .our-tema .row>div:nth-child(3) .tema-card {
    margin-top:0
  }
  .our-tema.shap-bg {
    position:relative;
    padding-bottom:0;
    z-index:1
  }
  .our-tema.shap-bg:after,
  .our-tema.shap-bg:before {
    position:absolute;
    content:"";
    width:100%;
    height:30%;
    left:0;
    z-index:-1
  }
  .our-tema.shap-bg:before {
    bottom:0;
    background:var(--color-black)
  }
  .our-tema.shap-bg:after {
    top:0;
    background-image:url(../img/team/shap.png);
    background-repeat:no-repeat;
    background-position:50%;
    background-size:100vw 19vw
  }
  .contact-us .contact-info-map {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    gap:30px
  }
  .contact-us .contact-left {
    width:calc(30% - 15px)
  }
  .contact-us .contact-left li {
    padding:30px
  }
  .contact-us .contact-left .my-icon {
    width:60px;
    height:60px;
    line-height:60px;
    font-size:30px
  }
  .contact-us .contact-left~.contact-map {
    margin-top:0
  }
  .contact-us .contact-map {
    width:calc(70% - 15px)
  }
  .contact-us .contact-form {
    padding:25px
  }
  .blog-post-card~.blog-post-card {
    margin-top:60px
  }
  .blog-post-card~.pegination-box {
    margin:50px 0 0
  }
  .blog-post-card .post-slider .next-btn,
  .blog-post-card .post-slider .prev-btn {
    width:60px;
    height:60px;
    font-size:20px;
    line-height:64px
  }
  .blog-post-details .post-comments {
    margin-bottom:0
  }
  .blog-post-details .all-comments~.comments-form,
  .blog-post-details .blog-content~.post-tags,
  .blog-post-details .coomment-post~.all-comments,
  .blog-post-details .post-tags~.post-comments {
    margin-top:50px
  }
  .blog-post-details .blog-img-gallary {
    gap:30px
  }
  .blog-post-details .blog-img-gallary .box-img {
    width:calc(50% - 15px)
  }
  .blog-post-details .your-potential {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
  }
  .blog-post-details .your-potential .box-img {
    width:45%
  }
  .blog-post-details .your-potential .box-content {
    width:55%;
    padding-left:30px;
    margin-top:0
  }
  .blog-post-details .user-content {
    margin-top:0
  }
  .blog-post-details .user-content .my-icon {
    font-size:96px
  }
  .blog-post-details .post-comments .coomment-post {
    display:-ms-flexbox;
    display:flex;
    gap:20px;
    -ms-flex-align:center;
    align-items:center
  }
  .blog-post-details .post-comments .coomment-post .comment-img {
    min-width:120px
  }
  .blog-post-details .post-comments .coomment-post .comment-img~.comment-text {
    margin-top:0
  }
  .blog-post-details .post-comments .coomment-post .comment-text {
    width:calc(100% - 140px)
  }
  .info-footer {
    padding:70px 0
  }
  .info-footer .footer-left .footer-logo a {
    max-width:180px
  }
  .info-footer .footer-left .footer-logo~p {
    margin-top:40px
  }
  .info-footer .get-touch,
  .info-footer .news-letter {
    margin-top:0
  }
  .info-footer .popular-post {
    margin-left:15px
  }
  .info-footer.v1 .our-link {
    margin-top:0
  }
  .footer-main .footer-content ul {
    -ms-flex-pack:end;
    justify-content:end
  }
}
@media (min-width:1400px) {
  .top-bar.v1 {
    -ms-flex-pack:justify;
    justify-content:space-between
  }
  .top-bar.v1 .container {
    max-width:100%;
    padding:0 40px
  }
  .top-bar.v1 .top-bar-content {
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    -ms-flex-align:center;
    align-items:center;
    -ms-flex-pack:justify;
    justify-content:space-between
  }
  .top-bar.v1 .top-left {
    display:inherit
  }
  .top-bar.v1 .top-right {
    gap:25px
  }
  .top-bar.v1 .top-right .info-link ul {
    position:relative;
    padding-right:21px
  }
  .top-bar.v1 .top-right .info-link ul:before {
    position:absolute;
    content:"";
    width:1px;
    height:100%;
    top:0;
    right:0;
    opacity:.2;
    background:var(--color-white)
  }
  .menu-bar .menu-logo a {
    max-width:180px
  }
  .get-in-touch .left-content .card-items-list li {
    width:calc(50% - 15px)
  }
  .who-we-are .left-images .smaill-img {
    width:45%
  }
  .who-we-are .left-images .count-user .my-icon {
    min-width:100px;
    width:100px;
    height:100px;
    font-size:60px;
    line-height:100px
  }
}