/**
 * Basic CSS Media Query Template
 * TODO: I should probably use Sass...
 * Author: Michael Vieth
 * ------------------------------------------
 *  Responsive Grid Media Queries - 1280, 1024, 768, 480
 *   1280-1024   - desktop (default grid)
 *   1024-768    - tablet landscape
 *   768-480     - tablet 
 *   480-less    - phone landscape & smaller
 * --------------------------------------------
 */

@media all and (min-width: 480px) and (max-width: 768px) {
  #home-testi .owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    bottom: -35px;
    left: -5px;
  }






  .dashed-rectangle::before {
    display: none;
  }

  .icon-box-stack {
    width: 110px;
    height: 110px;
    background: #ffffff;
    box-shadow: 0px 3px 6px #00000029;
    padding: 15px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .phnhd {
    display: block;
  }

  .phnMob {
    display: none;
  }

  .navbar {
    background-color: rgba(255, 255, 255, 0.8) !important;
  }

  header {
    padding-top: 5rem;
    height: auto;
  }

  .content-main>h1 {
    font-size: 2.5rem;
  }

  .section-main {
    padding: 1rem 0;
  }

  .hero-section {
    height: auto;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .svg-placement.plus {
    top: 250px;
    left: 290px;
  }

  .svg-placement.banner-animator {
    top: -93px;
    left: 70px;
  }

  .svg-placement.banner-animator>lottie-player {
    width: 250px;
    height: 250px;
  }

  .before-element.diagonal-tri::before {
    content: "";
  }

  .before-element.circle::before {
    content: "";
  }

  .before-element.wave-line-coverage::before {
    content: url(../img/element/Group457.png);
    left: 300px;
    top: 0;
  }

  .before-element.ring-expand::before {
    content: url(../img/element/ring-expand.png);
    right: 0;
    top: 45%;
  }

  .before-element.arrow-2::before {
    display: none;
  }

  .before-element.arrow-3::before {
    content: "";
  }

  .cosmeciety {
    text-align: center !important;
  }

  .content-main>h1 {
    font-size: 1.65rem;
  }

  .before-element.tri::before {
    display: none;
  }

  .before-element.round-lined::before {
    display: none;
  }

  .before-element.oct::before {
    display: none;
  }

  .before-element.round-outline::before {
    display: none;
  }

  .before-element.dashed-rectangle {
    display: none;
  }

  .m-100 {
    margin-top: 10px !important;
  }

  .before-element.dotted-box-1 {
    display: none;
  }

  .before-element.dotted-box {
    display: none;
  }

  .red-shade-xl::before {
    display: none;
  }

  .red-shade::before {
    top: 7px;
  }

  .before-element.arrow::before {
    right: 0%;
    bottom: -10%;
  }

  .before-element.circles::before {
    content: url(../img/before-elements/circles.png);
    right: 2%;
    bottom: 72%;
  }

  .before-element.hexa::before {
    content: url(../img/before-elements/hexa.png);
    left: 5%;
    top: 100%;
  }

  .navbar {
    padding-bottom: 0;
  }

  .bg-img {
    border-radius: 30px;
  }

  .bg-img1 {
    border-radius: 30px;
  }

  .bg-img2 {
    border-radius: 30px;
  }

  .bg-img3 {
    border-radius: 30px;
  }

  .bg-img4 {
    border-radius: 30px;
  }

  .css-typing h1:nth-child(1) {
    width: 100%;
  }

  .css-typing h1:nth-child(2) {
    width: 100%;
  }

  .css-typing h1:nth-child(3) {
    width: 35%;
  }

  .content-main>p {
    font-size: 1.1rem;
  }
}

@media all and (max-width: 768px) {
  #home-testi .owl-theme .owl-nav {
    margin-top: 10px;
    position: absolute;
    bottom: -35px;
    left: -5px;
  }

  #Online-Brilliance .side-img-position {
    position: relative;
  }

  #Online-Brilliance .row {
    padding: 50px 0 !important;
  }

  #Online-Brilliance-1 .side-img-position {
    position: relative;
  }

  #Online-Brilliance-1 .row {
    padding: 50px 0 !important;
  }

  .navbar {
    background-color: rgba(255, 255, 255, 0.8) !important;
  }

  /* header {
    padding-top: 5rem;
    height: auto;
  } */

  .content-main>h1 {
    font-size: 2.5rem;
  }

  .section-main {
    padding: 1rem 0;
  }

  .hero-section {
    height: auto;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .content-main>h1 {
    font-size: 26px;
  }

  .content-main>h2 {
    font-size: 22px;
  }

  .navbar {
    padding-bottom: 0;
  }

  .bg-img,
  .bg-black,
  .bg-services-wb {
    border-radius: 30px !important;
  }

  .pwad-IndustrySliderCard .card-icon-w {
    transition: 0.3s ease-in-out;
  }

  .pwad-IndustrySliderCard:hover .card-icon-w {
    transform: rotate(-31deg);
  }

  #mad-online-brilliance .side-img-position {
    position: absolute;
    bottom: 0;
    left: 0;
  }

  #mad-online-brilliance .row {
    padding: 120px 0;
  }

  #contactForm button {
    padding: 10px 23px 10px 11px !important;
  }

  .content-main>p {
    font-size: 15px !important;
  }

  .icon-box-stack {
    width: 110px !important;
    height: 110px !important;
  }

  .before-element.whiteArrow::before {
    display: none !important;
  }

  .before-element.redSmallArrow::before {
    right: 1%;
    top: 77%;
  }

  .bg-img,
  .bg-black,
  .bg-services-wb {
    border-radius: 30px !important;
  }

  .cmsblackbg {
    border-radius: 30px !important;
    height: 991px !important;
    align-items: baseline !important;
  }

  .bg-img1 {
    border-radius: 30px;
  }

  .bg-img2 {
    border-radius: 30px;
  }

  .bg-img3 {
    border-radius: 30px;
  }

  .bg-img4 {
    border-radius: 30px;
    padding: 3rem 0;
  }

  .content-main>p {
    font-size: 1.1rem;
  }

  .cwd-blackBg {
    border-radius: 35px !important;
  }

  .cms-StandardCard {
    padding: 65px 20px !important;
    margin: 0 !important;
  }

  .cms-card-icon-black {
    position: absolute;
    left: 88% !important;
    top: 42% !important;
  }

  .cms-card-icon {
    left: 85% !important;
    top: 38% !important;
  }

  .cms-card-icon-black {
    left: 85% !important;
    top: 66% !important;
  }

  .cms-PremiumCard {
    padding: 50px 21px !important;
    margin: 0px !important;
  }

  .border-start {
    border-left: none !important;
    margin-left: 0 !important;
    height: 50px;
  }

  .before-element.whiteArrow::before {
    display: none;
  }

  .before-element.heroArrow::before {
    /* display: none; */
  }

  .ar-blackBg {
    border-radius: 20px !important;
    padding: 0px 0 !important;
  }

  .bg-banner-img {
    border-radius: 2rem;
  }

  .scroll-reponsive {
    overflow: auto;
    margin-bottom: 10px !important;
  }

  .our_process .nav,
  .vr-sec-7-2 .nav,
  .ar-sec-5 .nav {
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 0 20px !important;
  }

  .our_process .nav .nav-item,
  .vr-sec-7-2 .nav .nav-item,
  .ar-sec-5 .nav .nav-item {
    flex: 0 0 auto;
  }

  .before-element.ar-ctaArrow::before {
    display: none;
  }

  #cms-cta-sec .side-img-position {
    position: absolute;
    bottom: -1px;
    right: 0;
    padding: 1px 15px;
  }

  #cms-cta-sec .row {
    padding: 21px 0;
  }

  .before-element.arrow-3::before {
    right: 10% !important;
    bottom: -5px !important;
  }

  .our_process .nav,
  .vr-sec-7-2 .nav,
  .ar-sec-5 .nav {
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin: 0 0 20px !important;
  }

  .our_process .nav .nav-item,
  .vr-sec-7-2 .nav .nav-item,
  .ar-sec-5 .nav .nav-item {
    flex: 0 0 auto !important;
  }

  .tabs-style-2 .nav-tabs .nav-link {
    color: #101011;
    text-transform: uppercase;
    font-weight: 700 !important;
    font-size: 18px;
    text-align: left;
    position: relative;
    padding: 0.5rem 0.9rem;
    border: none;
    transition: 500ms all;
  }

  .cms-card-icon {
    left: 85% !important;
    top: 36% !important;
  }

  .widthCustom {
    width: 10% !important;
  }

  .border-bottom {
    border-bottom: none !important;
  }

  .extraMargin {
    margin-top: 0;
  }
}

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



  .dashed-rectangle::before {
    top: 39px;
    left: 522px;
    width: 712px;
    height: 329px;
  }

  .font-rep-bs {
    font-size: 11px;
  }

  .before-element.dotted-box::before {
    content: url(../img/before-elements/dotted-rectangle-element.svg);
    left: 102%;
    bottom: 17%;
  }

  .font-sm {
    font-size: 14px;
  }

  .hero-section {
    min-height: 600px !important;
  }

  #contactForm button {
    padding: 15px;
  }

  .before-element.heroArrow::before {
    right: 40% !important;
    bottom: 0% !important;
  }

  .cms-card-icon {
    left: 90% !important;
    top: 30% !important;
  }

  .cms-card-icon-black {
    left: 90% !important;
    top: 60% !important;
  }

  .widthCustom {
    width: 3% !important;
  }

  .widthCustom {
    width: 28px !important;
  }

  .widthCustom2 {
    width: 8% !important;
  }

  .widthCustom4 {
    width: 30% !important;
  }

  .widthCustom1 {
    width: 3% !important;
  }

  .before-element.arrow-3::before {
    content: url(../img/Web-Development/cta-arrow-1.png);
    right: 10%;
  }

  .content-main>h1 {
    font-size: 1.4rem !important;
  }

  .content-main>p {
    font-size: 1rem;
  }
}

@media all and (min-width: 820px) and (max-width: 1180px) {
  .cms-card-icon {
    left: 85% !important;
    top: 36% !important;
  }

  .cms-card-icon-black {
    left: 85% !important;
    top: 62% !important;
  }

  .bg-img1 {
    padding: 3rem 3rem;
  }
}

@media all and (max-width: 1024px) {
  .cms-card-icon {
    left: 41% !important;
    top: 36% !important;
  }

  .cms-card-icon-black {
    left: 89% !important;
    top: 36% !important;
  }

  .cms-ExpertiseSliderCard {
    max-height: 448px;
    padding: 40px 16px !important;
  }

  .before-element.whiteArrow::before {
    left: 50% !important;
  }

  .before-element.heroArrow::before {
    right: 17% !important;
    bottom: 0% !important;
  }

  .before-element.redSmallArrow::before {
    content: url(../img/Norway/small-arrow.png);
    right: 18%;
    top: 75%;
  }

  .sd-ExpertiseSliderCard {
    height: auto;
  }

  .pwad-IndustrySliderCard {
    margin: 3px;
    position: relative;
    padding: 12px 25px;
    height: auto;
    position: relative;
    background-color: #fff;
    border-radius: 40px;
    justify-content: center;
    box-shadow: 0px 3px 10px #0000000f;
  }

  .cust-icon-boxLg {
    padding: 4px 14px;
  }

  .vr-card-body {
    height: 440px;
  }

  .cms-caIconBox {
    padding: 6px 1px !important;
  }

  #mad-online-brilliance .row {
    padding: 30px 0 !important;
  }

  #mad-online-brilliance .side-img-position {
    width: 50% !important;
  }

  #Online-Brilliance-1 .side-img-position {
    width: 35%;
  }

  #Online-Brilliance-1 .row {
    padding: 37px 0;
  }

  .underline::after {
    right: 49% !important;
  }

  #Online-Brilliance .side-img-position {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50%;
  }

  #Online-Brilliance .row {
    padding: 53px 0;
  }
}

@media all and (max-width: 320px) {
  .before-element-mgd.arrow::before {
    content: url(../img/Norway/small-arrow.png);
    right: -7px;
    bottom: -4%;
    width: 122px;
  }

  #contactForm button {
    padding: 10px 14px 6px 0px !important;
  }

  .font-rep-bs {
    font-size: 11px;
  }

  .about-text-rep-bs {
    margin-left: 0rem;
  }

  .vr-card-body {
    width: auto;
    border: 1px solid #dedede;
    border-radius: 38px;
    padding: 70px 30px;
    margin: 15px 0;
    height: 400px;
    transition: 500ms all;
  }

  .cms-ExpertiseSliderCard {
    width: auto;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0px 3px 6px #0000003b;
    padding: 40px 30px;
    margin: 5px;
    height: 450px;
  }

  .sd-ExpertiseSliderCard {
    height: auto;
  }

  .break li {
    width: 49%;
    display: inline-block;
  }

  .before-element.heroArrow::before {
    right: -10% !important;
    bottom: 0% !important;
  }

  #Online-Brilliance .side-img-position {
    position: absolute;
    bottom: -50px;
    right: 0;
  }

  #mad-online-brilliance .row {
    padding: 31px 0 242px 0 !important;
  }

  #mad-online-brilliance .side-img-position {
    width: 80% !important;
  }

  .before-element.ctaArrow::before {
    right: 1% !important;
    top: 50% !important;
  }

  .extraMargin {
    margin-top: 0;
  }

  .cms-card-icon-black {
    left: 82% !important;
    top: 66% !important;
  }

  .cms-card-icon {
    left: 82% !important;
    top: 35% !important;
  }

  .sizeSm {
    width: 130%;
  }

  #contactForm button {
    padding: 2px 7px 2px 7px !important;
  }

  #contactForm button {
    font-size: 14px !important;
  }

  .before-element.redSmallArrow::before {
    content: url(../img/Norway/small-arrow.png);
    right: -2%;
    top: 75%;
  }

  .tabs-style-3 .nav-tabs {
    justify-content: center;
  }

  .underline::after {
    right: 21%;
  }
}

@media all and (min-width: 900px) and (max-width: 1440px) {
  .before-element.arrow::before {
    right: 50%;
    bottom: -6%;
  }
}

/* sheet bug */
@media all and (min-width: 1024px) and (max-width: 1366px) {
  .content-main>h1 {
    font-size: 2rem;
    font-family: "Playfair Display", serif;
  }

  .theme-card-body {
    height: 401px;
  }

  .bg-img1 {
    padding: 3rem 3rem;
  }

  .before-element.heroArrow::before {
    right: 37%;
  }

  .hero-section {
    padding-bottom: 40px;
  }

  .bg-img2 {
    padding: 3rem 3rem;
  }

  .before-element.ctaArrow::before {
    right: 11%;
  }

  .bg-black {
    padding: 3rem 0;
  }

  .before-element.ar-ctaArrow::before {
    right: 20%;
  }
}

@media screen and (max-width: 756px) {
  .scroll-reponsive {
    overflow: auto;
  }
}

@media screen and (max-width: 1660px) {
  .scroll-reponsive {
    overflow: auto;
  }

  .our_process .nav,
  .vr-sec-7-2 .nav,
  .ar-sec-5 .nav {
    flex-wrap: nowrap;
    align-items: center;
    margin: 0 0px 20px !important;
  }

  .hero-section {
    min-height: 900px;
  }
}

@media all and (max-width: 480px) {}

/* CSS for iPhone, iPad, and Retina Displays */

@media all and (max-width: 2560px) and (min-width: 1440px) {
  .cms-card-icon-black {
    position: absolute;
    left: 78% !important;
    top: 37% !important;
  }

  .cms-card-icon {
    position: absolute;
    left: 46% !important;
    top: 38% !important;
  }
}

@media all and (max-width: 1920px) and (min-width: 1080px) {
  .cms-card-icon-black {
    left: 88% !important;
    top: 39% !important;
  }

  .widthCustom3 {
    width: 9% !important;
  }
}

@media all and (max-width: 1600px) and (min-width: 900px) {
  #mega-menu-wrap-menu-1 #mega-menu-menu-1>li.mega-menu-item>a.mega-menu-link {
    font-size: 14px !important;
    padding: 0px 10px 0 10px !important;
  }

  .cms-card-icon-black {
    left: 89% !important;
    top: 38% !important;
  }

  .cms-card-icon {
    left: 44% !important;
    top: 38% !important;
  }
}

@media all and (max-width: 1280px) and (min-width: 800px) {
  .cms-ExpertiseSliderCard {
    height: 460px;
  }

  .cms-card-icon {
    position: absolute;
    left: 41% !important;
    top: 36% !important;
  }

  .cms-card-icon-black {
    left: 89% !important;
    top: 36% !important;
  }

  .cms-caIconBox {
    width: 75px;
    height: 75px;
    background: #ffffff;
    box-shadow: 0px 3px 6px #00000029;
    padding: 14px 14px;
    border-radius: 50px;
  }

  #cms-cta-sec .side-img-position {
    right: 70px;
    width: 40%;
  }
}

/* Portrait */
@media screen and (orientation: portrait) {
  /* Portrait styles here */
}

/* Landscape */
@media screen and (orientation: landscape) {
  /* Landscape styles here */
}

/* Non-Retina */
@media screen and (-webkit-max-device-pixel-ratio: 1) {}

/* Retina */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {}

/* iPhone Portrait */
@media screen and (max-device-width: 480px) and (orientation: portrait) {}

/* iPhone Landscape */
@media screen and (max-device-width: 480px) and (orientation: landscape) {}

/* iPad Portrait */
@media screen and (min-device-width: 481px) and (orientation: portrait) {}

/* iPad Landscape */
@media screen and (min-device-width: 481px) and (orientation: landscape) {}