@font-face {
    font-family: "OctarineBold";
    src: url("fonts/Octarine-Bold.woff2") format("woff2"), url("fonts/Octarine-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "OctarineLight";
    src: url("fonts/Octarine-Light.woff2") format("woff2"), url("fonts/Octarine-Light.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "OctarineLightOblique";
    src: url("fonts/Octarine-LightOblique.woff2") format("woff2"), url("fonts/Octarine-LightOblique.woff") format("woff");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "OctarineBoldOblique";
    src: url("fonts/Octarine-BoldOblique.woff2") format("woff2"), url("fonts/Octarine-BoldOblique.woff") format("woff");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
  }
  

.circlebtn { display: none !important; }

@media only screen and (max-width: 768px){

html { font-size: 13px !important; }

.pdlrconta0, .pdlr0 { padding-left: 0; padding-right: 0; }
.pdlrconta0 .pd15 { flex: 1 0 0%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); }
.pd8 { padding: 8vw 0 !important; }
.pdtb2r { padding: 2rem 0 !important; }
.owl-nav { width: 10%; left: 45%; top: auto; position: relative; margin: 20px 0; }

main { margin-top: 68px; }

header { padding: 0; height: 68px; }
.header { height: 68px; z-index: 1; }
.header .navcomplete { background-color: #fff; position: fixed; width: 100%; height: 100%; display: none; flex-flow: column-reverse; left: 0; top: 0; }
.header .navcomplete:after { background-color: #fff; height: 68px; position: absolute; top: 0; left: 0; width: 100%; content: ''; }
.header nav ul li:hover:after, .header nav ul li .active:after { width: 50%; }
.header nav ul { display: flex; flex-flow: column; width: 100%; }
.header nav { display: flex; justify-content: flex-start; padding: 0 20px; width: 100%; }
.header nav ul li { padding: 15px 0 15px 0; border-bottom: 1px solid #2da34a; margin: 0; }
.header nav ul li a { font-size: 1.6rem; }
.header .social { justify-content: flex-start; }
.header a.logo, .header a.logo img { width: 50px; z-index: 1111111; }
.dots_s.homebanner_slider .owl-dots { top: 0; padding: 0; }
.dots_s.homebanner_slider .owl-dot { width: 10px !important; height: 10px !important; margin: 6px !important; }

.navic { width: 30px; height: 24px; display: inline-block; position: fixed; left: auto; right: 20px; top: 22px; z-index: 1111111; }
.navic span { width: 30px; height: 3px; position: absolute; left: 0; font-size: 0; background-color: #000; transition: all 0.4s linear; }
.navic span:nth-child(1) { top: 2; }
.navic span:nth-child(2), .navic span:nth-child(3) { top: 10px; }
.navic span:nth-child(4) { top: 20px; }

.navic.active span:nth-child(1), .navic.active span:nth-child(4) { display: none; }
.navic.active span:nth-child(2) { transform: rotate(230deg); }
.navic.active span:nth-child(3) { transform: rotate(-230deg); }

.partners { position: relative; }
.circlebtn { display: block !important; z-index: 111; position: absolute; left: 50%; top: -130px; transform: translateX(-50%); width: 60px; height: 60px; border:2px solid #1273eb; border-radius: 50%; }
.circlebtn span { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 50%; width: 2px; background-color: #1273eb;  }
.circlebtn span:after { content: ""; width: 10px; height: 10px; border: solid #1273eb; border-width: 0 2px 2px 0; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) rotate(45deg); }

.homebanner .caption { width: 100%; padding: 30px 10% 0 !important; text-align: center; }
.homebanner .caption p br, .homebanner .caption h1 br { display: none; }
.homebanner .banner { flex-flow: column; background: transparent; justify-content: flex-start; padding-top: 50px; }

.bgfreeformgradient h2 { margin-bottom: 0rem; }

.sec2 .homeabout_slider .box img { width: 20% !important; }
.sec2 .homeabout_slider { padding-bottom: 2rem; }

.features .feature_box .box { width: calc(50% - 30px); padding: 0; }
.features .feature_box .box .img { width: 40%; } 

.why .fw100 { flex-flow: column; }
.why .fw100 .fw50 { width: 100%; }

.features .feature_box .box { width: 100%; margin: 0; }
.features .feature_box .box:hover .img, .features .feature_box .box:hover .desc { top: inherit; }


.about_sec1, .about_sec2 { padding: 2rem 0; }
.about_sec2 .list { margin-top: 2rem; }
.about_sec2 .list { grid-template-columns: 1fr; }
.about_sec2 .list .item img { width: 12vw; }

.services .imgtext { grid-template-columns: 1fr; overflow: hidden; }
.services .imgtext .img { filter: grayscale(0%) opacity(100%); }

.services .imgtext:nth-child(even) { display: flex; flex-flow: column-reverse; }
.services .imgtext:nth-child(odd) .desc { background-color: rgba(18, 115, 235, 0.8); }
.services .imgtext:nth-child(even) .desc { background-color: rgba(45, 163, 74, 0.8); }
.services .imgtext .desc { transition: all 0.4s linear; cursor: pointer; position: absolute; left: 0; padding: 0 20px 20px; top: calc(100% - 90px); height: 100%; overflow: hidden; z-index: 1; justify-content: flex-start; }
.services .imgtext .desc .titlehead { display: flex; justify-content: flex-start; align-items: center; padding: 20px 0; }
.services .imgtext .desc h5 { padding-left: 15px; margin-bottom: 0; }
.services .imgtext .desc h5 span, .services .imgtext:nth-child(odd) .desc h5 span { margin-bottom: 0; color: #fff !important; }
.services .imgtext .desc p, .services .imgtext .desc li { color: #fff !important; }
.services .imgtext .desc .ic { margin-bottom: 0; }
.services .imgtext .desc .close { display: none; right: 8px; top: 8px; }
.services .imgtext .desc.active { transition: all 0.4s linear; top: 0; overflow: auto; }
.services .imgtext .desc.active .close { display: block; }

.client_tiltehead { padding: 2rem; }
.clients { grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px; }

.contact .imgemail img { width: 50px; }

footer .footermenu ul { padding: 0; }
.copyright { height: 40px; padding: 0 15px; }
.copyright p { font-size: 9px; }

}

.features .dots_s .owl-dot.active {  background-color: #232323 !important; }
.features .dots_s .owl-dot { border-color: #232323 !important; }
/*.owl-dots { display: flex; justify-content: center; align-items: center; height: 30px; }
.owl-dot { width: 4px; height: 6px; background-color: #2da34a !important; margin: 0 2px; }*/