body {
    font-family: 'Cabinet Grotesk', sans-serif;
}
.container {
    max-width: 85% !important;
}

.navbar-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
}

ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

section#navbar-area {
}

.navbar-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

ul.navbar-ul li a {
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 192.5%;
/* identical to box height, or 35px */
    text-align: center;

/* DARK COLOR */
    color: #3A3A3A;
    padding: 0 26px;
}

ul.navbar-ul li {
    position: relative;
}

ul.navbar-ul li.active:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;
    left: 0;
    background: #722773;
    border-radius: 0 0 25px 25px;
    top: -33px;
}

ul.navbar-ul li.active a {
    font-weight: 700;
    color: #722772;
}

.dropdown .btn {
    background: #722773;
    border-radius: 10px;
    font-weight: 600;
    padding: 8px 11px;
    border-color: #fff;
}

.dropdown .btn img {
    margin-right: 4px;
}

ul.navbar-ul li a:hover {
    color: #722772;
    transition: 0.5s;
}

.dropdown .btn:hover {
    background: #3A3A3A;
    transition: 0.5s;
}

.cover-text {
    position: relative;
    margin-top: 70px;
}

img.cover-after {
    position: absolute;
    left: -110px;
    top: 61px;
    display: none;
}

.cover-image {
    position: relative;
}

img.cover-after1 {
    position: absolute;
    top: 0;
    display: none;
}

.cover-text h1 {
    font-weight: 800;
    font-size: 55px;
    line-height: 132.5%;
/* or 73px */
    

/* DARK COLOR */
    color: #3A3A3A;
}

.cover-text h1 span {
    color: #722773;
    font-weight: 900;
}

section#cover-area {
    padding: 50px 0;
    overflow: hidden;
}
img.cover-img {
    max-width: 100%;
}
section#cover-brands .col-12 {
    background: #FFFFFF;
    border: 1px solid #E8E8E8;
    border-radius: 25px;
}

section#cover-brands .owl-nav {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    top: 10px;
}

.brand {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    border-right: 1px solid #E8E8E8;
}

.brand img {
    height: 60px;
    width: 120px !important;
}

.owl-nav div i {font-size: 55px;color: #fff;}

section#cover-brands .owl-prev {
    margin-left: -80px;
}

section#cover-brands .owl-next {
    margin-right: -80px;
}

#cover-brands .owl-carousel .owl-stage-outer {
    z-index: 99999999999 !important;
}

section#cover-brands .owl-carousel .owl-item {
    text-align: center;
    margin: 0 !important;
}

.brand:hover {
    background: #722772;
    transition: 0.5s;
}

.brand:hover img {
    filter: brightness(0) invert(1);
    transition: 0.5s;
}

.brand:hover:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 10px;
    background: red;
    top: -10px;
}
section#about-area {
    padding: 0px 0;
    text-align: center;
}

.about-text img {
    position: absolute;
}

.about-text h1 {
    

/* DARK COLOR */
    font-weight: 900;
    font-size: 55px;
    line-height: 68px;
    text-align: center;
    color: #3F4E59;
}

span.about-text-thin {
    font-weight: 500;
}

span.about-color-span {
    color: #722772;
}

.about-text {
    position: relative;
}

img.quote1 {
    left: 24%;
}

img.quote2 {
    right: 18%;
    transform: scaleX(-1);
    top: 50px;
}

.about-text p {
    font-weight: 400;
    font-size: 18px;
    line-height: 190%;
    padding-bottom: 30px;
/* or 40px */
    text-align: center;

/* DARK COLOR */
    color: #3F4E59;
    padding: 0 100px;
    padding-top: 30px;
}

.about-text p span {
    font-weight: 900;
    
    
/* or 40px */
    

/* MAIN COLOR */
    color: #722773;
}
section#mecra-section {
    padding: 0px 0;
    overflow: hidden;
    padding-top: 45px;
    padding-bottom: 30px;
}

section#mecra-section h1 {
    font-weight: 900;
    font-size: 55px;
    line-height: 68px;
    text-align: center;
    color: #722773;
    padding-bottom: 40px;
}

section#mecra-section h1 span {
    font-weight: 500;
    

/* DARK COLOR */
    color: #3F4E59;
}
.container-fluid {
    overflow: hidden;
    padding: 0;
    width: 100%;
}

section#mecra-section {
    overflow: hidden;
}

.mecra {
    height: 325px;
    position: relative;
    background-size: cover !important;
    border-radius: 15px;
}
img.mecra-icon {
    position: absolute;
    bottom: 20px;
    width: auto !important;
    left: 30px;
}
.mecra-carousel .owl-nav {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    top: 120px;
    margin: 0 auto;
}

.mecra-carousel .owl-nav div {
    margin: 0 50px;
}
section#about-box-area {
    overflow: hidden;
    padding-top: 70px;
}

section#cover-brands {
    overflow: hidden;
    display: none;
}

.box1 {
    background: #722773;
    border-radius: 0px 36px 0px 0px;
    position: relative;
    padding: 25px 25px 25px 55px;
}
.box3 {
    background: #722773;
    border-radius: 0px 36px 0px 0px;
    position: relative;
    padding: 25px 25px 25px 55px;
}

img.box-after {
    position: absolute;
    right: 0;
    top: 0;
    
}

section#about-box-area .col-lg-6.col-md-6.col-12 {
    padding: 100px;
}

.box-content h2 {
    font-weight: 900;
    font-size: 35px;
    line-height: 158.5%;
/* or 71px */
    color: #FFFFFF;
    padding-top: 20px;
}

.box-content img {
    width: 50px;
}

.box-content p {
    font-weight: 500;
    font-size: 17px;
    line-height: 148.5%;
/* or 37px */
    color: #FFFFFF;
    width: 300px;
}

.box-content .btn {
    margin-top: 20px;
    background: #722772;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #fff;
    border: none;
}

button.btn.btn-white {
    background: #FFFFFF;
    border-radius: 10px;
    padding: 10px 20px;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    

/* MAIN COLOR */
    color: #722773;
}

#about-box-area i {
    position: relative;
    top: 3px;
    margin-right: 9px;
}

.box2 {
    background: #FBF2FB;
    border-radius: 36px 0 0 0;
    padding: 25px 25px 25px 55px;
}

.box2 .box-content h2 {
    color: #3A3A3A;
}

.box2 .box-content p {
    color: #3A3A3A;
}
.box4 {
    background: #FBF2FB;
    border-radius: 36px 0 0 0;
    padding: 25px 25px 25px 55px;
}

.box4 .box-content h2 {
    color: #3A3A3A;
}

.box4 .box-content p {
    color: #3A3A3A;
}
section#reference-area {
    padding: 40px 0;
}

.row.reference-title {
    text-align: center;
}

.row.reference-title h1 {
    font-weight: 900;
    font-size: 35px;
    line-height: 52px;
/* or 113px */
    text-align: center;

/* DARK COLOR */
    color: #3A3A3A;
    margin: 0;
}

.row.reference-title img {
    padding-bottom: 10px;
}

.row.reference-title p {
    font-weight: 500;
    font-size: 15px;
    line-height: 170%;
/* or 32px */
    text-align: center;
    color: #ABABAB;
}

.reference {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.reference img {
    height: 47px;
    width: auto !important;
}

.row.reference-slider {
    padding-top: 40px;
}
section#reference-area {
    padding: 40px 0;
}

.row.reference-title {
    text-align: center;
}

.row.reference-title h1 {
    font-weight: 900;
    font-size: 35px;
    line-height: 52px;
/* or 113px */
    text-align: center;

/* DARK COLOR */
    color: #3A3A3A;
    margin: 0;
}

.row.reference-title img {
    padding-bottom: 10px;
}

.row.reference-title p {
    font-weight: 500;
    font-size: 15px;
    line-height: 170%;
/* or 32px */
    text-align: center;
    color: #ABABAB;
}

.reference {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

.reference img {
    height: 47px;
    width: auto !important;
}

.row.reference-slider {
    padding-top: 40px;
}

section#footer-area {
    background: #3A3A3A;
    border-radius: 35px 35px 0px 0px;
    padding: 35px 0 15px;
}

.footer-left img {
    margin-bottom: 0;
}

.footer-left p {
    margin: 25px auto 10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
/* or 162% */


/* White */
    color: #FFFFFF;
}

ul.social-ul li a {color: #fff;}

ul.social-ul li {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #595757;
    padding: 5px 9px;
    margin-right: 16px;
}

.footer-contact ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-contact ul li a,
.footer-contact ul li span {
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
/* identical to box height */
    align-items: center;
    color: #FFFFFF;
}

.footer-contact ul li i {
    color: #FAF2FB;
    font-size: 22px;
    position: relative;
    top: 5px;
    margin-left: 10px;
}

.footer-contact ul li {
    padding-bottom: 11px;
}

section#footer-bottom {
    background: #722773;
    text-align: center;
    padding: 15px 0;
}

section#footer-bottom p {
    font-weight: 400;
    font-size: 14px;
    line-height: 21px;
/* or 131% */
    text-align: center;

/* White */
    color: #FFFFFF;
    margin: 0;
}

section#footer-bottom p span {
    font-weight: 700;
}
section#counter-area {
    position: relative;
    height: 650px;
}

.counter-absolute {height: 670px;position: relative;}

.counter {
    position: absolute;
}

.counter-text {
    text-align: center;
}

.counter-text h1 {
    
/* or 113px */
    

/* DARK COLOR */
    font-weight: 900;
    font-size: 35px;
    line-height: 52px;
    text-align: center;
    color: #3A3A3A;
    margin: 0;
}

.counter-text p {
    font-weight: 500;
    font-size: 15px;
    line-height: 170%;
    text-align: center;
    color: #ABABAB;
}
.counter-content {
    height: 600px;
    position: relative;
}

.counter-text {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 33%;
    width: 800px;
}
.counter.c1 {
    top: 80px;
    left: 200px;
}

.counter-left {
    background: #FFFFFF;
/* NEW DROP */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
    padding: 20px;
    padding-right: 50px;
}

@media only screen and (max-width: 768px) {
.counter-left {
    background: #FFFFFF;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    position: relative;
    padding: 20px;
    padding-right: 50px;
    width: 200px;
}
}

.counter-left h2 {
    font-weight: 900;
    font-size: 24px;
    line-height: 17px;
/* or 63% */
    
    

/* MAIN COLOR */
    color: #722773;
}

.counter-left p {
    font-weight: 500;
    font-size: 17px;
    line-height: 17px;
/* or 100% */
    letter-spacing: 0.02em;
    font-feature-settings: 'tnum' on, 'lnum' on;
    color: #000000;
    margin: 0;
}

.counter-info {
    position: absolute;
    right: 0;
    height: 100%;
    background: red;
    top: 0;
    background: #722773;
    border-radius: 0px 10px 10px 0px;
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 20px;
    padding-top: 26px;
}

.counter-info:after {
    position: absolute;
    content: "";
    width: 30px;
    height: 30px;
    background: #722773;
    clip-path: polygon(0 0, 57% 50%, 0 100%);
}
.counter-right {
    background: #722773;
    border: 5px solid #FFFFFF;
/* NEW DROP */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    position: absolute;
    right: -108px;
    top: 0px;
    padding: 13px;
    width: 82px;
    height: 82px;
}

.counter-right img {
    width: 45px;
}

.counter-right:after {
    position: absolute;
    content: "";
    width: 90px;
    height: 90px;
    background: #c3c3c3;
    border-radius: 50%;
    z-index: -99;
    left: -9px;
    top: -9px;
    
/* NEW DROP */
    opacity: 0.1;
}
.counter.c2 {
    right: 200px;
    top: 60px;
}

.counter.c3 {
    bottom: 200px;
}

.counter.c4 {
    right: 100px;
    bottom: 200px;
}

.counter.c5 {
    bottom: 100px;
    left: 36%;
}
.mobile-menu {
    display: block;
    background: #722772;
}

div#myNav {
    display: none;
}
.about-text h1 span.marker {
    font-weight: 400;
}

.about-text var {
    font-style: inherit;
    color: #722772;
}
.box2 img.box-after {
    display: none;
}

.box4 img.box-after {
    display: none;
}

.box2 button.btn.btn-white {
    margin-top: 20px;
    background: #722772;
    border-radius: 10px;
    padding: 10px 20px
px;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #fff;
    border: none;
}

.box4 button.btn.btn-white {
    margin-top: 20px;
    background: #722772;
    border-radius: 10px;
    padding: 10px 20px px;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #fff;
    border: none;
}
.modal-form form {
    padding: 20px;
}

.modal-form form label {
    font-size: 13px;
}

.modal-form form input {
    font-size: 13px;
}

.modal-form form textarea {
    font-size: 13px;
}

.modal-footer .btn-gonder {
    width: 75%;
    background: #722772;
    color: #fff;
    font-weight: 600;
}

.modal-footer .btn-close {
    width: 30%;
    color: #333;
    font-weight: 600;
    background: none;
    border: 1px solid lightgrey;
}
.modal-content {
    text-align: center;
    padding: 30px;
}

.modal-content svg {width: 100px;}

.modal-content h2 {
    font-weight: 600;
    color: #5f8c35;
}

button.close {
    position: absolute;
    right: -20px;
    top: -8px;
    opacity: 1;
}

button.close span {
    background: #dc3545;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 31px;
    padding: 5px 17px;
    opacity: 1;
    text-shadow: none;
    color: #fff;
}
div#formModal .modal-content {
    padding: 0 !important;
    text-align: left;
}
.dropdown-menu {
    width: 90px;
    max-width: 90px;
    min-width: 90px;
}

.dropdown-menu.show .dropdown-item {
    padding: 5px;
    text-align: center;
}


button.btn.btn-white:hover {
    background: #333;
    transition: 0.5s;
    color: #fff;
}

ul.social-ul li:hover {
    background: #722772;
    transition: 0.5s;
}
.mobile-menu {
    display: none;
}
@media only screen and (max-width: 768px) {
    .mobile-menu {
    display: block;
}
    div#myNav {
    display: block;
}
    section#navbar-area {
    display: none;
}

.counter {
    position: relative;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}

.cover-text {
    margin-top: 0;
}

.cover-text h1 {
    font-size: 30px;
    text-align: center;
}

img.cover-after {
    display: none;
}

.cover-image {
    padding-top: 30px;
}
section#cover-brands .owl-nav {
    display: none;
}

.brand img {
    height: 28px;
}

.about-text h1 {
    font-size: 35px;
    line-height: 44px;
}

img.quote1 {
    display: none;
}

img.quote2 {
    display: none;
}

.about-text p {
    padding: 0;
    font-size: 15px;
}

section#mecra-section h1 {
    font-size: 35px;
    line-height: 36px;
}
.counter-content {
    height: auto;
}

.counter-text {
    position: relative;
    text-align: center;
}

@media only screen and (max-width: 768px) {
.counter-text {
    position: relative;
    text-align: center;
    width: 300px;
}
}



.counter-text h1 {
}

.counter-text p {
    font-size: 14px;
}

.container {
    max-width: 90% !important;
}

.counter-left {
}

.counter-right {right: 20px;}

section#about-box-area {
}

.counter-absolute {
    height: auto !important;
}

section#counter-area {
    height: auto;
}

section#about-box-area .col-lg-6.col-md-6.col-12 {
    padding: 40px;
}

.box1 {
    border-radius: 0;
}

.box4 {
    border-radius: 0;
}

.box3 {
    border-radius: 0;
}

.row.reference-title h1 {
    font-size: 25px;
}

.row.reference-title p {
    font-size: 14px;
}

.owl-nav {
    display: none;
}

.footer-left p {
    text-align: center;
    font-size: 14px;
}

ul.social-ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    align-content: center;
    padding-top: 20px;
}

.footer-contact ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: nowrap;
    padding-top: 30px;
}
.col-12.flex-menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
}

img.mobil-logo {
    width: 150px;
}
.flex-mob {
    display: flex;
}

.flex-mob span {
    border-radius: 10px;
    font-weight: 600;
    padding: 8px 13px;
    color: #fff;
    margin-right: 10px;
    border: 1px solid #fff;
}
}
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
.box3 img.box-icon {
    filter: brightness(0) invert(1);
}

.box4 img.box-icon {
    filter: invert(70%) sepia(34%) saturate(2554%) hue-rotate(292deg) brightness(94%) contrast(95%);
}
section#reference-area .owl-dots {
    display: none !important;
}

section#reference-area .owl-nav {
    display: none;
}
@media only screen and (max-width: 768px) {
    .reference img {
    height: 40px !important;
}
}