

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
 
}
@font-face {
  font-family: Poppins;
  src: url(../fonts/Poppins-Regular.ttf);
    font-display: swap;
}
@font-face {
  font-family: Poppins-Bold;
  src: url(../fonts/Poppins-Bold.ttf);
  font-display: swap;
}
@font-face {
  font-family: Poppins-Med;
  src: url(../fonts/Poppins-Medium.ttf);
  font-display: swap;
}

@font-face {
  font-family: Baloo-bold;
  src: url(../fonts/BalooBhaijaan2-Bold.ttf);
  font-display: swap;
}

@font-face {
  font-family: Vazir;
  src: url(../fonts/Vazirmatn-Regular.ttf);
  font-display: swap;
}

@font-face {
  font-family: Baloo;
  src: url(../fonts/BalooBhaijaan2-Regular.ttf);
  font-display: swap;
}

.text-justify{
    
}


.f-baloo-bold {
  font-family: Baloo-bold;
}
.f-baloo {
  font-family: Baloo;
}
.f-vazir{
    font-family:Vazir;
}
.f-bold {
  font-family: Poppins-Bold;
}
.f-poppins{
    font-family:Poppins;
}

.f-med{
    font-family:Poppins-med
}




:root {
  --primary: #90C73E;
  --sec: #ECFFCF;
}

.line-h-24 {
  line-height: 24px
}

.line-h-23{
    line-height:23px
}
.line-h-21 {
  line-height: 21px
}
.line-h-16 {
  line-height: 16px
}

.line-h-36lg-30 {
  line-height: 30px
}

.line-h-24lg-21 {
  line-height: 21px
}

.line-h-27lg-24{
    line-height:24px;
}

.line-h-23lg-18{
    line-height:18px
}

.section--top-margin{
    margin-top:5rem;
}

/* fonts */
.square-back {
  background: linear-gradient(90deg, rgba(187, 187, 187, 0.08) 1.371px, transparent 1.371px) top, linear-gradient(rgba(187, 187, 187, 0.08) 1.371px, transparent 1.371px) left;
  background-size: 68.571px 68.571px;
}

.square-back__blue {
  background-color: #DDF2FF
}

.bg-lines {
  background: repeating-linear-gradient(-45deg, transparent, transparent 88.8px, rgba(187, 187, 187, 0.25) 10px, rgba(187, 187, 187, 0.25) 90px);
}

.two-rem-9{
    font-size: 2.91rem;
}

.px-12{
    font-size:12px;
}
.px-14{
    font-size: 14px ;
}
.px-16{
    font-size: 16px;
}
.px-18 {
    font-size: 18px;
}

.px-24 {
  font-size: 24px;
}

.px-20{
    font-size:20px;
}

.px-32 {
  font-size: 32px;
}

.px-64lg-32 {
  font-size: 32px;
}

.px-32lg-24 {
  font-size: 24px;
}
.px-32lg-24 {
  font-size: 24px;
}
.px-32lg-20 {
  font-size: 20px;
}
.px-22lg-18 {
  font-size: 18px;
}
.px-24lg-20 {
  font-size: 20px;
}

.px-24-18md-16 {
  font-size: 16px;
}

.px-24lg-18 {
  font-size: 18px;
}

.px-24lg-16 {
  font-size: 16px;
}

.px-18lg-16 {
  font-size: 16px;
}

.px-18lg-14 {
  font-size: 14px;
}

.px-16lg-14 {
  font-size: 14px;
}

.px-16lg-12 {
  font-size: 12px;
}

.px-14lg-12 {
  font-size: 12px;
}

.px-lh-20{
    line-height: 20px;
}
.px-lh-16{
    line-height: 20px;
}


.border-rad-2{
    border-radius:2px;
}
.border-rad-4 {
    border-radius: 4px;
}
.border-rad-8 {
    border-radius: 8px;
}

/*colors*/
.c-2E2E2E{
    color:#2E2E2E;
}
.c-ABABAB{
    color:#ABABAB;
}
.c-00BCE6{
    color:#00BCE6;
}
.c-1C1C1C{
    color:#1C1C1C;
}
.c-828282{
    color:#828282;
}

.c-585858{
    color:#585858;
}
.c-6B7280{
    color:#6B7280;
}
c-EAEAEA{
    color: #EAEAEA !important;
}

.c-165b87 {
  color: #165B87 !important
}
.c-3b779d {
  color: #3B779D !important;
}
.c-green{
    color:var(--primary)
}
bg-F4F4F4 {
    background-color: #F4F4F4
}
.bg-66D7F0 {
    background-color: #66D7F0;
}

.bg-33C9EB{
    background-color: #33C9EB;
}

.bg-00BCE6{
    background-color: #00BCE6;
}

.bg-0096B8{
    background-color: #0096B8;
}


.bg-66D7F0{
    background-color:#66D7F0;
}
.bg-CFF2FA{
    background-color: #CFF2FA;
}

.bg-6093B4 {
  background-color: #6093B4;
}
.bg-3B779D {
  background-color: #3B779D;
}

.bg-165B87 {
  background-color: #165B87
}
.bg-0D3751 {
  background-color: #0D3751;
}

.bg-blue {
  background-color: #DDF2FF
}

.bg-green {
  background-color: var(--sec)
}
.bg-lightgreen {
  background-color:rgba(236, 255, 207, 0.75) ;
}

.bg-F4F4F4{
    background-color: #F4F4F4;
}
.bg-585858{
    background-color: #585858;
}

/*.hover-border-primary {
  transition: border 0.5s ease-in-out;
  transition: opacity  0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out transition:
}

  .hover-border-primary:hover {
    border: 1px solid #165B87;
    background-color: #DDF2FF !important;
  }*/

a{
    text-decoration:none;
    color:#585858;
}
hr {
    border-color: lightgray;
    border-width:2.5px;
}

h3{
    font-weight:bold;
    font-size:16px;
}


.center-padding{
    padding : 25vw 0 20vw 0;
}

.breadcrumb-back a {
    background: #F4F4F4;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px
}
.breadcrumb-back span {
    color: #6B7280
}
.blog-details-sec {
    padding: 0 0 40px
}

.switch {
    position: relative;
    display: inline-block;
    width: 41px;
    height: 20.5px;
}

    /* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 17.2px;
    width: 17.08px;
    left: 1.5px;
    bottom: 1.75px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
  background-color: #165B87;
}

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(20.5px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

.menu,
.multiply, b-menu {
  width: 30px;
  height: 30px;
}
.sidebar {
  max-width: none;
  z-index: 1;
  position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.navbar-toggler:not(.collapsed) .menu {
  display: none;
}

.navbar-toggler:not(.collapsed) .multiply {
  display: inline;
}

.navbar-toggler.collapsed .multiply {
  display: none;
}

.navbar-toggler.collapsed .menu {
  display: inline;
}

.reflect-y {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
/*Shared*/
.header-margin {
  margin-top: 5rem
}
.icon-bg{
    padding:12px;
    border-radius:16px;
}

.icon-bg__blue {
  background-color: #DDF2FF;
}

.icon-bg__white{
    background-color:#FFFFFF;
}
.img-padding {
  padding-bottom: 4.4rem;
}

.cursor-pointer{
    cursor:pointer
}

.on-hover-opacity{
    transition:opacity ease-in 0.3s;
}

.on-hover-opacity:hover {
  opacity: 0.7
}

.hover-gray{
    transition: background-color 0.2s ease-in-out;
}
.hover-gray:hover{
    background-color:#f5f5f5;
}
/* General styling */



body {
  color: #2E2E2E;
  min-height: 100vh;
  max-width: 99.9vw;
  display: flex;
  flex-direction: column;
  padding-bottom: 0px;
}
.sidebar{
    max-width: none;
    background-color:white
}



/*#page-container {*/
  /*position: relative;*/
/*  min-height: 100vh;*/
/*  display: flex;*/
/*flex-direction: column;*/
/*}*/

/*#content-wrap {*/
/*  padding-bottom: 2.5rem;  */
/*}*/

/*navbar*/
.contact-sec button:hover {
  opacity: 0.7;
  color: white;
  background-color: #165B87;
}
div.drop-container {
  transition: background-color 0.2s ease-in-out
}
div.drop-container:has(> div.show), div.drop-container:has(> div.collapsing) {
  padding: 8px;
  border-radius: 8px;
  background-color: #F4F4F4;
}
nav {
 
  border-bottom: 1px solid var(--gray-gray-7, #D5D5D5);
}

.navbar-toggler:focus,.navbar-toggler {
  border:none;
  box-shadow: none ;
}
.nav-item {
  border-radius: 4px;
  padding: 8px 10px;
  height: 37px;
  display: flex;
  flex-direction: row;
  align-items: center;
  transition: background-color 0.3s ease-in-out;
}

.nav-item:hover,.nav-item.active,a.custom-menu-item.custom-active {
  background-color: #F4F4F4 ;
  font-weight:500 !important;
}

.custom-active-sm {
  background-color: #F4F4F4 !important;
  font-weight: 500 !important;
  border:black 2px solid !important ;
}
.small-nav .row > * {
  padding: 8px;
  border-radius: 8px;
}
.small-nav .active{
  background: var(--main-colors-light, #F4F4F4);
}
#footer {
  margin-top:auto;
}
.arr-footer-left {
  position: absolute;
  left: 8px;
  bottom: 8.663px
}
.arr-footer-right {
  position: absolute;
  right: 8px;
  bottom: 8.064px;
}

.custom-menu li {
  text-decoration: none;
  width:248px;
}
.list-group-item{
    border:none !important
}
.custom-menu-item {
  padding: 12px 10px !important;
  border-radius: 6px !important;
  border: 1px solid #EAEAEA !important;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:6px;
  transition:background-color 0.2s ease-in-out
  
}
  .custom-menu-item:hover {
    background: #6B7280 !important;
    color:white;
  }

.custom-menu-item:hover li a:not(.custom-active){
    color:white !important
}
.custom-menu-item {
  text-decoration: none !important;
}
  .custom-menu-item a:hover {
  text-decoration: none !important;
  background-color:inherit
  }
.svg-icon {
  fill: #6B7280; /* This is the current color, change if needed */
}
.dropdown-item:hover .svg-icon {
  fill: white;
}
  /*home page */
.header__img {
  width: 81vw
}
  .elipse-back-sec {
    background-image: url('../images/back_home.webp');
    background-size:cover;
    border-radius: 16px;
    background-color: #E4F5FF;
  }
.small-header{
  border-radius: 6px;
  padding: 8px;
}

.small-header__green {
  background-color: var(--sec);
  color: var(--primary) !important;
}

.icon-card-cont {
  width: 100%;
}


.small-header__gray {
  color: var(--primary) !important;
  background-color: #F4F4F4
}
.text-icon {
  border: 1px solid #D5D5D5;
  border-radius: 6px;
  padding: 16px 8px;
}

.arrow-eng {
  left: 31%;
  top: 10%;
  width: 32vw;
  height: 32vw;
  transform: rotate(-45deg);
  flex-shrink: 0;
}
/*products section */
/*shared*/
.blue-col {
  color: #165B87
}
.products-sec__btn-contact {
  border-radius:6px;
  color:white;
  text-decoration:none;
  padding:12px 16px;
  background-color: #165B87;
  box-shadow: 0px 6px 12px -4px rgba(22, 91, 135, 0.08);
  transition: opacity 0.3s ease-in-out;
}

  .products-sec__btn-contact:hover,active{
    opacity: 0.7 !important;
    background-color: #165B87 !important;
    color:white !important
  }


  .bg-F9F9F9 {
    background-color: #F9F9F9 !important
  }

/*Run meetings section*/
.two-cards-sec .child--green > div > div, .two-cards-sec .row > div > div {
  background-color: rgba(236, 255, 207, 0.75);
  border-radius: 16px;
  border: 2px solid var(--primary);
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-image: url('/images/runmeetings-back.webp')
}
.two-cards-sec .row > div  {
  min-height :21.6vw ;
}

.square-back__green {
  background-color: var(--sec)
}

/*why intomeetings*/

.how-improve__cont {
  border-radius: 8px !important;
  overflow:hidden;
}
.how-improve__cont > div {
  padding: 4.2vw 0 4.2vw 0;
}

/*features*/
ul {
/*  list-style-image: url('sqpurple.gif');*/
}

ul li::marker {
  font-size: 12px; /* Set the desired bullet size */
  color: #828282; /* Optionally, you can change the color of the bullet */
}
/*contact section*/
.b-end {
  border-radius:12px;
  background-image: url("../images/next3.webp");
  background-size: cover;
  background-repeat:no-repeat;
  background-position: 50% 50%;
}

.social-card {
  position: absolute;
  padding: 12px;
  transform:translate(-50%,-50%);
  top: 50%;
  left:50%;
  height:40%;
  width:65%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(32px);
}

.contact-sec__btn {
  
  color: #2E2E2E;
  line-height: 40px;
  padding: 0 3px;
  border-radius: 6px;
  font-size: 14px !important;
}

.contact-sec__btn:hover {
  opacity: 0.9 !important
}


/*contact*/
.form > div:not(#html_element) > div {
  border-radius: 6px;
  border: 1px solid #6B7280;
  padding:8px;
  font-size:1.4rem;
}

form input, form textarea{
    border:none !important;
    box-shadow:none;
    border-color:white;
}
form p{
    font-size:1.2rem;
    margin-bottom:0;
}

form input:focus, form textarea:focus {
  border: 0px solid !important;
  box-shadow: none !important;
}

.contact-sec button {
  padding: 12px 16px;
  color: white;
  background-color: #165B87;
  font-weight:700;
  transition: opacity 0.4s ease-in-out
}



.contact-back-img {
  aspect-ratio: 444/610

}


.contact-locations > div {
  position: relative;
}

.contact-locations > div:not(:last-child)::after {
  position: absolute;
  top: 100%;
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  border-bottom: 2px solid #D5D5D5;
  padding: 0 12px;
  opacity: 0.4;
}

.padd-24{
    padding:24px;
}

.form > div:focus-within input {

}
form > div > div > div {
  border:0.5px solid rgba(255, 255, 255, 0.75);
}
form > div > div > div:has(:focus) {
  background: #DDF2FF;
  border: 0.5px solid #165B87;
}
input:focus {
  background: #DDF2FF !important;
}
input:focus {
  color: #323335;
}

input::placeholder {
  color: #ABABAB; /* Change the color as needed */
}

/* Optional: Provide a visual indication that the div is clickable */
#form > div {
  cursor: pointer;
}

.style-none{
    background-color:transparent !important;
    border:none;
    width:auto !important;
}

.sub-footer__phone-padd{
    padding : 0px 6px;
}

@media screen and (min-width:460px) {
  .social-card {
    width: 55% !important;
    height: 37%;
  }
}


@media screen and (min-width:576px) {
  .social-card {
    width: 50% !important;
    height: 37%;
  }

  .arrow-eng {
    transform: rotate(-165deg);
    left: 32%;
    top: 24%;
    width: 20vw !important;
    height: 20vw !important;
  }
  /*  .social-card {
      position: absolute;
      top: 39%;
      left: 35%;
    }*/
  .b-end {
    background-image: url("../images/next.webp");
  }
}

@media  screen and (min-width:768px) {
  .social-card {
    width: 67% !important;
    height: 30%;
  }
    h3{
        font-size :16px
    }
  .px-24-18md-16 {
    font-size: 18px;
  }


  .img-padding {
    padding-bottom: 0;
  }

  .row-child__padding-64 > div {
    padding-bottom: 6.4rem;
  }
  .b-end {
    background-image: url("../images/next.webp");
  }


  .text-icon {
    padding: 16px 20px;
  }
  .icon-card-cont {
    width: 85%;
  }
  .contact-locations > div {
    position: relative;
  }

  .contact-locations > div:not(:last-child)::after {
    position: absolute;
    top: -17% !important;
    content: "";
    display: block;
    height: 124% !important;
    width: 3px !important;
    border-right: 3px solid #D5D5D5;
    border-bottom: none !important;
    padding: 0 12px;
    opacity: 0.25;
  }

  .contact-locations__borders > div:not(:last-child)::after {
    left: 89%;
  }

  .contact-locations-ar__borders > div:not(:last-child)::after {
    right: 94%;
  }
}

@media screen and (min-width:991px){
  .px-22lg-18 {
    font-size: 22px;
  }
    h3{
        font-size : 18px;
    }
  .px-24lg-18 {
    font-size: 24px;
  }
  .px-24-18md-16 {
    font-size: 24px;
  }

  .contact-locations > div{
      display:flex;
      flex-direction:row;
      justify-content:center;

  }
  .contact-locations > div > div {
    width: 97%;
    padding-bottom:42px;
  }
  .contact-locations > div:not(:last-child)::after {
    top: -24.43% !important;
  }

  .line-h-10 {
    line-height: 10px;
  }

  .line-h-27lg-24 {
    line-height: 27px;
  }
  .line-h-23lg-18 {
    line-height: 23px;
  }

    .social-card{
        width:55% !important;
        height:20% !important;
    }
  .center-padding {
    padding: 7vw 0 5vw 0;
  }
  .px-14lg-12 {
    font-size: 14px;
  }
  .px-16lg-12 {
    font-size: 16px;
  }
  .px-16lg-14 {
    font-size: 16px;
  }

  .px-18lg-14 {
    font-size: 18px;
  }

  .px-18lg-16 {
    font-size: 18px;
  }

  .px-24lg-16 {
    font-size:24px;
  }

  .px-24lg-20 {
    font-size: 24px !important;
  }
  .px-32lg-24 {
    font-size: 32px;
  }
  .px-32lg-20 {
    font-size: 32px;
  }
  .px-64lg-32 {
    font-size: 64px;
  }

  .line-h-36lg-30{
      line-height:36px
  }

  .line-h-24lg-21 {
    line-height: 24px
  }



  .text-icon {
    padding: 16px 32px;
  }

}



@media screen and (min-width:1200px){
  .contact-locations {
    width: 70%;
  }

  
}



