@media only screen and (max-width: 1400px) and (min-width: 600px) {
  .home-banner {
    padding-top: 105px;
    height: auto;
    padding-bottom: 90px;
}
}
@media only screen and (max-width: 980px) and (min-width: 320px) {
  .menu-toggle {
    background: #193e40;
    border-radius: 5px;
  }
  .custom-auto-popup {
    display: none;
  }

  footer h4::before {
    height: 5px;
}

  .stellarnav.mobile.dark ul {
    background: #193e40;
  }
  .stellarnav.dark a, .stellarnav.dark li a {
    color: #fff;
  }
  .stellarnav.dark {
    margin-top: -2px;
    display: flex;
    justify-content: flex-end;
  }
  .form-wrap {
    display: none;
  }
  .info-solution h2 {
    font-size: 24px;
  }
  .info-text h2 {
    font-size: 19px;
  }
  .exceptional-sec .except-thumb {
    display: none;
  }
  .exceptional-sec li {
    padding-left: 30px;
  }
  header {
    padding: 11px 0 9px;
    z-index: 2;
  }
  .new-publishing {
    padding: 30px 20px;
  }
  .exceptional-sec img.autowidth {
    display: none;
  }
  .exceptional-sec h2 {
    font-size: 20px;
    line-height: 30px;
  }
  header .logo img {
    max-width: 190px;
    padding-left: 5px;
  }
  h2 {
    font-size: 30px;
    line-height: 26px;
    letter-spacing: 0;
  }
  header {
    z-index: 9;
  }
  header ul li {
    margin-right: 0;
  }
  header ul {
    margin: 10px 0;
  }
  header ul li.phone a {
    font-size: 16px;
  }
  .btn {
    font-size: 12px;
    padding: 6px 8px 6px;
  }
  .has-sub .servis_list {
    column-count: 1;
  }
  .stellarnav ul ul {
    left: 0;
  }
  .our-process .rp h2 {
    font-size: 25px;
  }
  section {
    padding: 30px 0;
    overflow: hidden;
  }
  header ul li:last-child {
    border: 0;
  }
  .home-banner {
    padding: 20px 0 40px;
    margin: auto;
    height: auto;
  }
  .info-banner h1 {
    font-size: 37px;
    line-height: 28px;
    letter-spacing: 0;
    margin-bottom: 10px;
  }
  .info-banner h1 br {
    display: none;
  }
  .info-banner h1 span {
    line-height: 28px;
    padding: 0 10px 2px 6px;
    font-size: 25px;
  }
  .info-banner h1 + p {
    max-width: 100%;
    margin-bottom: 10px;
    font-size: 16px !important;
    font-weight: 500;
    text-shadow: 0 0 2px #fff;
  }
  p {
    font-size: 16px !important;
  }
  .scroll-mouse {
    display: none;
  }
  .site-logos {
    padding: 20px 0;
  }
  .site-logos::before {
    width: 100%;
    height: 5px;
  }
  .our-solution {
    margin: 10px 0 0;
  }
  .our-solution::before {
    width: 100%;
    border-radius: 0;
  }
  .info-solution {
    max-width: 100%;
    margin-bottom: 50px;
  }
  .our-solution::after {
    display: none;
  }
  .info-count h4 {
    font-size: 30px;
    margin-bottom: 5px;
  }
  .info-count h4 + p {
    line-height: 15px;
    font-size: 14px !important;
    margin-bottom: 0;
  }
  .info-count {
    margin-bottom: 15px;
    padding: 20px 15px;
  }
  .counter [class*="col-"] {
    max-width: 50%;
  }
  .portfolio::before {
    width: 100%;
    background-size: cover;
    height: 100%;
    background-position: 90%;
  }
  .portfolio .item .info-port:first-child {
    margin-left: 0;
  }
  .portfolio .nav-tabs li {
    width: 50%;
    display: inline-block;
    text-align: center;
  }
  .portfolio .nav-tabs {
    margin-bottom: 15px;
  }
  .portfolio {
    padding: 30px 0;
  }
  .info-text h2 {
    margin-bottom: 15px;
  }
  .info-text h2::before {
    bottom: -5px;
    width: 80px;
    height: 3px;
  }
  .info-text h2 + p {
    max-width: 100%;
  }
  .info-text {
    margin-bottom: 30px;
  }
  .cta h2 {
    font-size: 26px;
    letter-spacing: 0;
    line-height: 28px;
  }
  .cta h2 + p {
    margin-bottom: 8px;
    font-size: 20px !important;
  }
  .cta-detail {
    margin-bottom: 8px;
  }
  .our-writing::after {
    display: none;
  }
  .our-writing .info-text {
    margin-bottom: 20px;
  }
  .info-write {
    padding: 25px;
    min-height: auto;
    margin-bottom: 15px;
  }
  .info-write .img-write {
    top: 5px;
  }
  .our-writing .container::before {
    display: none;
  }
  .our-writing .btn {
    margin-top: 5px;
  }
  .our-work .container::before {
    display: none;
  }
  .info-work span {
    font-size: 60px;
    vertical-align: middle;
    right: 20px;
    opacity: 0.3;
  }
  .info-work {
    padding: 30px 10px;
    margin-bottom: 12px;
    border-radius: 7px;
    border: 1px solid #14b0bc;
    transition: 0.5s all;
  }
  .info-work:hover {
    background: #14b0bc;
  }
  .info-work:hover * {
    color: #fff;
  }
  .info-work * {
    transition: 0.5s all;
  }
  .info-work:hover span {
    -webkit-text-stroke-color: transparent;
  }
  .our-work .container::after {
    display: none;
  }
  .our-work::after {
    display: none;
  }
  .our-work .btn {
    margin-top: 10px;
  }
  .top-bar {
    display: none;
  }
  .info-write h4 {
    font-size: 24px;
    margin-bottom: 10px;
    letter-spacing: 0;
  }
  .info-write .img-write img {
    max-width: 60px;
  }
  .info-faq2 h2 {
    margin-bottom: 12px;
    line-height: 28px;
  }
  .info-faq2 h2::before {
    width: 100px;
    left: 0;
    margin: auto;
    height: 5px;
    bottom: -3px;
    z-index: -1;
  }
  h2 br {
    display: none;
  }
  .info-faq2 img {
    left: 0;
    top: 0;
    max-width: 100%;
    margin: auto;
    margin-bottom: 10px;
  }
  .owl-carousel .owl-stage-outer {
    margin-bottom: 0;
  }
  h2::before {
    left: 0;
    width: 100px;
    height: 3px;
  }
  .cta2::before {
    display: none;
  }
  .cta2 .container {
    height: auto;
    background-size: cover;
    padding: 20px 0;
    background: #fff;
    box-shadow: 0 3px 3px #0846b1;
  }
  .cta2 h2 {
    letter-spacing: 0;
    font-size: 24px;
    line-height: 28px;
  }
  .info-cta2 {
    padding: 0 15px;
    text-align: center;
    max-width: 100%;
  }
  .cta2 h2 + p {
    margin-bottom: 12px;
  }
  .cta2 {
    padding: 10px 0;
    margin: -1px;
  }
  .our-contact::before,
  .our-contact::after {
    display: none;
  }
  .our-contact h2 {
    margin-bottom: 10px;
    text-align: center;
  }
  .info-form .form-control {
    height: 40px !important;
    padding: 5px 15px;
    margin-bottom: 15px;
  }
  .info-form form {
    padding: 0 8px;
    margin-bottom: 30px;
  }
  .info-form textarea.form-control {
    height: 70px !important;
  }
  .info-form input[type="submit"] {
    width: 56%;
    margin: auto;
    display: table;
    padding: 12px 15px;
    font-size: 16px;
    letter-spacing: 1px;
  }
  .info-form input[type="submit"] + img {
    display: none;
  }
  .contact-ul li img {
    max-width: 30px;
    display: block;
    margin: auto;
    margin-bottom: 7px;
  }
  .contact-ul li {
    padding: 12px 5px;
    width: 80%;
    display: inline-block;
    text-align: center;
  }
  .contact-ul li a {
    font-size: 16px;
    display: block;
  }
  .contact-ul li::before {
    display: none;
  }
  .contact-ul li:last-child {
    width: 100%;
    border-top: 1px solid #d0d0d0;
    padding-bottom: 0;
  }
  .oc::before {
    display: none;
  }
  footer {
    padding: 30px 0;
  }
  footer h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  footer h4::before {
    height: 4px;
    bottom: -2px;
    width: 20px;
    left: 0;
  }
  footer ul li {
    line-height: 20px;
  }
  footer ul li a {
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
  }
  .copy {
    text-align: center;
    padding: 8px 0;
  }
  .dropdown-menu {
    display: inline-block;
    width: 100%;
    position: static;
    background: linear-gradient(
      180deg,
      rgba(236, 58, 53, 1) 0%,
      rgba(236, 147, 58, 1) 79%
    );
  }
  .dropdown-menu a {
    padding-left: 30px !important;
  }
  header ul li::before {
    display: none;
  }
  .about-banner::before,
  .about-banner::after {
    display: none;
  }
  .about-banner .container {
    background-position: 50%;
    border-radius: 0;
    height: auto;
    box-shadow: none;
    padding: 20px 0;
  }
  .about-banner {
    padding-bottom: 20px;
  }
  .our-process::before {
    display: none;
  }
  .our-process h2 {
    margin-bottom: 16px;
    text-align: center;
  }
  .our-process h2::before {
    right: 0;
    margin: auto;
  }
  .our-process .rp p {
    text-align: center;
  }
  .our-process .rp {
    margin-bottom: 30px;
  }
  .info-process {
    padding: 15px 10px;
    transition: 0.5s all;
    border: 1px solid #193e40;
    margin-bottom: 10px;
    border-radius: 5px;
  }
  .info-process img {
    display: inline-block;
    margin-bottom: 10px;
  }
  .info-process h5 {
    font-size: 22px;
    margin-bottom: 12px;
  }
  .info-process:hover {
    background: #f77e00;
  }
  .info-process:hover * {
    color: #fff;
  }
  .info-process:hover img {
    filter: invert(1);
  }
  .info-process h5 + p {
    margin-bottom: 0;
  }
  .our-process .btn {
    margin-top: 5px;
  }
  .dream::before {
    display: none;
  }
  .our-dream::before {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  .info-dream h4 {
    font-size: 18px;
    margin-bottom: 5px;
  }
  .info-dream h4 + p {
    margin-bottom: 16px;
  }
  .our-dream::after {
    display: none;
  }
  .our-inclusive::before {
    display: none;
  }
  .info-inclusive h2 {
    margin-bottom: 12px;
  }
  .info-inclusive p {
    margin-bottom: 10px;
  }
  .info-inclusive .btn {
    margin-top: 0;
  }
  .our-dream .info-dream2 {
    display: flex;
    flex-direction: column;
  }
  .our-dream .info-dream2 h2 + p {
    order: 1;
    line-height: 22px;
  }
  .about-dream .info-dream {
    margin-top: 0;
  }
  .about-dream .info-dream2 h2::before {
    width: 70px;
  }
  .about-dream .info-dream2 h2 {
    font-size: 25px;
  }

  footer [class*="col-"]:nth-child(5) {
    margin-top: 20px;
    width: 100% !important;
  }
  .our-work .info-text {
    margin-bottom: 40px;
  }
  .work-img {
    display: none;
  }
  .portfolio .nav-tabs .nav-link::before {
    background: #ffc412;
    height: 2px;
    top: inherit;
  }
  .portfolio .nav-tabs .nav-link {
    padding: 8px 3px;
  }
  .portfolio .row:nth-child(2) {
    margin-bottom: 0;
  }
  .publish-text h3 {
    font-size: 28px;
    color: #000;
    margin-bottom: 10px;
    text-transform: capitalize;
    letter-spacing: -1px;
  }
  .stellarnav ul {
    width: unset;
  }
  .publish-text p {
    font-size: 15px;
    line-height: 20px;
  }
  .modal-dialog.modal-lg {
    border: 0;
  }
  .stellarnav ul ul {
    top: 0;
  }
  section.cta2 {
    display: none;
  }
  .info-port p {
    font-size: 12px !important;
    height: auto;
  }
}


@media (min-width: 1200px) {

.info-solution {
    max-width: 100%;
    padding-left: 80px;
}
.info-banner h1 {
    font-size: 60px;
}
.cta h2 {
    font-size: 50px;
    letter-spacing: -2px;
}
.cta p {
    font-size: 16px;
}
.our-solution::before {
    
    width: 95%;
}
h2::before {
    width: 110px;
    left: 0;
}

.work-img img {
    object-fit: contain;
}

.contact-ul li img {
    position: absolute;
    left: 0;
    top: 30px;
    width: 35px;
    height: 35px;
}
.contact-ul li:first-child img {
    top: 30px;
}
}

@media (min-width: 1024px) {

  .cta h2 {
    font-size: 50px;
    letter-spacing: -2px;
}
.cta p {
    font-size: 16px;
}

.cta2 .container {
    height: 430px;
}
.work-img img {
    object-fit: contain;
}
.info-work span {
    position: absolute;
    font-size: 60px;
    top: -20px;
    left: 0;
}

.contact-ul li img {
    position: absolute;
    left: 0;
    top: 30px;
    width: 35px;
    height: 35px;
}
.contact-ul li:first-child img {
    top: 30px;
}
.detail-contact h2 {
    font-size: 55px;
}
.exceptional-sec h2 {
    font-size: 31px;
}
h2::before {
    width: 110px;
    left: 0;
}

.cta2 h2 {
    line-height: 35px;
}

.info-solution {
    padding-left: 40px;
}
.info-solution h2 {
    line-height: 40px;
}
.info-banner h1 {
    font-size: 60px;
}
ul.top-b li a {
    color: #fff;
    font-weight: 500;
    font-size: 13px;
}
ul.top-b {
    gap: 10px;
    position: relative;
    display: flex;
}

.sol-bef img {
    object-fit: contain;
}

}

@media (max-width: 880px) {
section.our-contact .col-md-5.offset-md-1 ul.contact-ul img {
    width: 25px;
    height: 25px;
    top: 10px;
    left: -30px;
}
section.our-contact .col-md-5.offset-md-1 ul.contact-ul{
display:flex;
flex-direction:column;
gap:10px;
}
.contact-ul li a {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
footer h4 {
    font-size: 17px;
  }


.info-banner h1 {
    font-size: 25px;
}

.info-text h2 {
    font-size: 30px !important;

}
.exceptional-sec ul {
    position: relative;
    margin: 40px 0;
}
  .cta h2 {
    font-size: 40px;
    letter-spacing: 0px;
    line-height:40px;
}
.cta h2 + p {
    margin-bottom: 8px;
    font-size: 16px !important;
}

.cta-detail {
    margin-bottom: 0;
}

.cta p {
    font-size: 16px;
}

.stellarnav.dark.right.mobile {
    text-align: end;
}

.sol-bef img {
    object-fit: contain;
    height: auto;
  }
.info-write .img-write img {
    max-width: 40px;
    height: auto;
    position: relative;
    top: 0px;
}
.info-write {
    padding: 15px 5px 15px 12px;
}
  
  .info-write h4 {
    font-size: 14px;
    margin-bottom: 0px;
    letter-spacing: 0;
}
section.exceptional-sec .col-md-5.exceptional-secimg {
    display: none;
}

}

@media (max-width: 767px) {
  section.our-contact .col-md-5.offset-md-1 ul.contact-ul {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

footer [class*="col-"]:nth-child(2){
    padding: 10px 10px;
}
footer [class*="col-"]:nth-child(4){
    padding: 10px 10px;
}

section.our-contact .col-md-5.offset-md-1 ul.contact-ul img {
    width: 25px;
    height: 25px;
    top: 10px;
    left: 0px;
}

.info-banner h1 {
    font-size: 26px !important;
}
.sol-bef img {
    object-fit: contain;
}
.gap {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.contact-ul li a{
  margin: 0 0 0 30px;
}

}

@media (max-width: 980px) and (min-width: 768px) {
  .col-lg-6.our-work-inner-hide {
    display: none;
}
.col-md-5.exceptional-secimg {
    display: none;
}
.sol-bef img {
    object-fit: contain;
}
  }


  
 @media (max-width: 1024px) and (min-width: 768px) { 

section.our-process.aos-init.aos-animate .row.rp {
    display: contents;
}

section.our-process.aos-init.aos-animate .row.rp .col-md-6 {
    max-width: 100%;
    padding: 20px 0;
}

section.our-process.aos-init.aos-animate .row.rp h2 {
    margin: 0px;
}

 section.our-process.aos-init.aos-animate .row > .col-md-3 {
  width: 50%;
  flex: 0 0 50%;
  max-width: 50%;
}
footer h4::before {
    left: 0;

}
}