/* notes
none: more than 900px
lg: 900px
md: 768px
sm: 650px
xs: 450px
*/
/* --------------------------------------------short cuts with ctrl f4 ---------------------------- */
/* 
s0: font
s1: general and variables
s2: text, links size, fonts, align
s3: flex display and columns
s4: grid display
s5: buttons style
s6: icons
s7: background colors
s8: text colors
s9: sections
s10: inputs style
s11: absolute, relative, sticky, fixed and positions
s12: margin section
s13: padding section
s14: list section
s15: max-width section
s16: displays
sbeforeLast: custom style
sLast: media queries
*/
/*--------------------------------------------------- font section s0: ----------------------------------------*/
/*@font-face {*/
/*  font-family: fontLight;*/
/*  src: url(../font-family/helvetica-light-587ebe5a59211.ttf);*/
/*}*/
@font-face {
  font-family: fontRegular;
  src: url(../font-family/Roboto-Regular.ttf);
}
/*@font-face {*/
/*  font-family: fontMedium;*/
/*  src: url(../font-family/Poppins-Medium.ttf);*/
/*}*/
@font-face {
  font-family: fontBold;
  src: url(../font-family/Roboto-Bold.ttf);
}
/*@font-face {*/
/*  font-family: fontBlack;*/
/*  src: url(../font-family/Poppins-Black.ttf);*/
/*}*/
/*--------------------------------------------------- general section s1: ----------------------------------------*/
:root {
    --txtColor: ##1D1D1B;
    --primaryColor: #4BC3C3; 
    --secondaryColor: #4D4D4D;
    --tertiaryColor: #FFFFFF;
    --warnMessageColor: red;
    /*--lightFont: fontLight;*/
    --regularFont: fontRegular;
    /*--mediumFont: fontMedium;*/
    --boldFont: fontBold;
    /*--blackFont: fontBlack;*/
    --bodyFontSize: 16px;
    --containerMaxWidth: 1600px;
    --containerMinWidth: 280px;
    --wrapperWidth: 95%;
    --smallTextSize: 0.8rem;
    --textSize: 1rem;
    --titleSize: 2.5rem;
    --titleTwoSize: 2.1rem;
    --titleThreeSize: 1.9rem;
    --titleFourSize: 1.75rem;
    --titleFiveSize: 1.5rem;
    --titleSixSize: 1.2rem;
    --sectionPadding: 60px 0;
    --columnsSpace: 20px;
    --rowSpace: 20px;
    --btnBorderRadius: 12px;
    --btnPadding: 15px 30px;
    --inputPadding: 10px 0px;
    --inputBorderRadius: 12px;
    --iconsWidth: 50px;
    --iconsWidthSecondary: 30px;
    --iconsWidthTertiary: 25px;
    --iconsWidthQuadro: 40px;
    --listNumber: 0;
    
  }
  *{
    padding: 0;
    margin: 0;
  }
  html, body{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin: auto;
    padding: 0;
    overflow-x: hidden;
    font-family: var(--regularFont);
    font-size: var(--bodyFontSize);
    color: var(--textSize);
    position: relative;
    

  }

  .main-container{
    width: 100%;
    max-width: var(--containerMaxWidth);
    min-width: var(--containerMinWidth);;
    margin: auto;
  }

  .wrapper{
    width: var(--wrapperWidth);
    /*max-width: 1350px;*/
    margin: auto;
  }


  /*--------------------------------------------------- text size and fonts section s2: ----------------------------------------*/
  h1{
    font-size: var(--titleSize);
    font-family: var(--boldFont);
  }
  h2{
    font-size: var(--titleTwoSize);
    font-family: var(--boldFont);
  }
  h3{
    font-size: var(--titleThreeSize);
    font-family: var(--boldFont);
  }
  h4{
    font-size: var(--titleFourSize);
    font-family: var(--boldFont);
  }
  h5{
    font-size: var(--titleFiveSize);
    font-family: var(--boldFont);
  }
  h6{
    font-size: var(--titleSixSize);
    font-family: var(--boldFont);
  }
  p{
    font-size: var(--textSize);
    font-family: var(--regularFont);
    line-height: 28px;
  }
  a{
    font-size: var(--textSize);
    font-family: var(--regularFont);
    text-decoration: none;
    color: var(--primaryColor);
  }
  a.secondary-link{
    font-size: var(--textSize);
    font-family: var(--regularFont);
    text-decoration: none;
    color: var(--secondaryColor);
  }
  a[href^="mailto:"], a[href^="tel:"] {
    color: var(--secondaryColor);
}
a:hover{
    text-decoration: underline;
}
  
  /*.light{*/
  /*  font-family: var(--lightFont) !important;*/
  /*}*/
  .regular{
    font-family: var(--regularFont) !important;
  }
  /*.medium{*/
  /*  font-family: var(--mediumFont) !important;*/
  /*}*/
  .bold{
    font-family: var(--boldFont) !important;
  }
  /*.black{*/
  /*  font-family: var(--blackFont) !important;*/
  /*}*/
  .text-small-size, .text-small-size p, .text-small-size a{
    font-size: var(--smallTextSize) !important;
  }

  .text-normal-size{
    font-size: var(--textSize) !important;
  }
  .text-title6-size{
    font-size: var(--titleSixSize) !important;
  }
  .text-title5-size{
    font-size: var(--titleFiveSize) !important;
  }
  .text-title4-size{
    font-size: var(--titleFourSize) !important;
  }
  .text-title3-size{
    font-size: var(--titleThreeSize) !important;
  }
  .text-title2-size{
    font-size: var(--titleTwoSize) !important;
  }
  .text-title-size{
    font-size: var(--titleSize) !important;
  }
  .text-center{
    text-align: center;
  }
  .text-left{
    text-align: left !important;
  }
  .text-right{
    text-align: right;
  }
  .underline{
      text-decoration: underline;
  }

  /*--------------------------------------------------- flex section s3: ----------------------------------------*/
  .flex-row{
      display: flex;
      flex-wrap: wrap;
  }
  .flex-row-no-wrap{
      display: flex;
      flex-wrap: nowrap;
  }
  .column-gap-20{
      column-gap: 20px;
  }
  .row-gap-20{
      row-gap: 20px !important;
  }
  .row-gap-40{
      row-gap: 40px !important;
  }
  .row-gap-60{
     row-gap: 60px !important;
 }
  .flex-column{
    display: flex;
    flex-direction: column;
  }
 .col-1{
  width: 8.33%;
 }
 .col-2{
  width: 16.66%;
 }
 .col-3{
  width: 25%;
 }
 .col-4{
  width: 33.33%;
 }
 .col-5{
  width: 41.66%;
 }
 .col-6{
  width: 50%;
 }
 .col-6-with-border{
     width: calc(50% - 1px);
     border: 1px solid #DEDEDE;
 }
 .col-7{
  width: 58.33%;
 }
 .col-8{
  width: 66.66%;
 }
 .col-9{
  width: 75%;
 }
 .col-10{
  width: 83.33%;
 }
 .col-11{
  width: 91.66%;
 }
 .col-12{
  width: 100%;
 }
 .max-width-80{
  max-width: 80%;
 }
  .justify-content-center{
    justify-content: center;
  }
  .align-items-center{
    align-items: center;
  }
  .align-items-flex-start{
      align-items: flex-start;
  }
  .justify-content-space-between{
    justify-content: space-between;
  }
  .justify-content-space-evenly{
    justify-content: space-evenly;
  }
  .justify-content-space-around{
    justify-content: space-around;
  }
  .justify-content-flex-end{
    justify-content: flex-end;
  }
  .justify-content-flex-start{
    justify-content: flex-start;
  }
  /*--------------------------------------------------- grid section s4: ----------------------------------------*/
  .display-grid-2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: var(--columnsSpace);
    grid-row-gap: var(--rowSpace);
  }
  .display-grid-2-with-no-space{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      column-gap: 0;
      grid-row-gap: 0;
  }
  .display-grid-3{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: var(--columnsSpace);
    grid-row-gap: var(--rowSpace);
  }
  .display-grid-4{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: var(--columnsSpace);
    grid-row-gap: var(--rowSpace);
  }
  .display-grid-5{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    column-gap: var(--columnsSpace);
    grid-row-gap: var(--rowSpace);
  }
  .display-grid-6{
    display: grid;
    grid-template-columns: repeat(6,1fr);
    column-gap: var(--columnsSpace);
    grid-row-gap: var(--rowSpace);
  }
  .center-items-grid{
    place-items: center;
  }
  /*--------------------------------------------------- buttons section s5: ----------------------------------------*/
  .btn{
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: var(--btnBorderRadius);
    padding: var(--btnPadding);
    outline: none;
    border: 1px solid var(--primaryColor);
    cursor: pointer;
    font-size: var(--textSize);
    text-transform: uppercase;
    background-color: var(--primaryColor);
    color: var(--tertiaryColor);
    text-decoration: none !important;
    font-family: var(--regularFont);
    text-align: center;
  }
  .btn:hover{
      background-color: var(--secondaryColor);
      color: var(--primaryColor);
  }
 
  .secondary-btn{
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: var(--btnBorderRadius);
    padding: var(--btnPadding);
    outline: none;
    border: 1px solid var(--secondaryColor);
    cursor: pointer;
    font-size: var(--textSize);
    text-transform: uppercase;
    background-color: var(--secondaryColor);
    color: var(--tertiaryColor);
    text-decoration: none !important;
    font-family: var(--boldFont);
    text-align: center;
      
  }
  .secondary-btn:hover{
      color: var(--primaryColor);
  }
  .tertiary-btn{
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: var(--btnBorderRadius);
    padding: var(--btnPadding);
    outline: none;
    border: 1px solid var(--tertiaryColor);
    cursor: pointer;
    font-size: var(--textSize);
    text-transform: uppercase;
    background-color: var(--tertiaryColor);
    color: var(--primaryColor);
    text-decoration: none !important;
    font-family: var(--boldFont);
    text-align: center;
      
  }
  .tertiary-btn:hover{
      color: var(--tertiaryColor);
      background-color: var(--primaryColor);
  }
  .btn-with-pink-text{
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: var(--btnBorderRadius);
    padding: var(--btnPadding);
    outline: none;
    border: 1px solid var(--tertiaryColor);
    cursor: pointer;
    font-size: var(--textSize);
    text-transform: uppercase;
    background-color: var(--tertiaryColor);
    color: #7954FF;
    text-decoration: none !important;
    font-family: var(--boldFont);
    text-align: center;
  }
  /*--------------------------------------------------- icons section s6: ----------------------------------------*/
  .icon{
    width: var(--iconsWidth);
    height: var(--iconsWidth);;
  }
  .icon-secondary{
    width: var(--iconsWidthSecondary);
  }
  .icon-tertiary{
    width: var(--iconsWidthTertiary);
  }
  .icon-quadro{
    width: var(--iconsWidthQuadro);
  }
  /*--------------------------------------------------- background section s7: ----------------------------------------*/
  .bg-primary{
    background-color: var(--primaryColor);
  }
  .bg-secondary{
    background-color: var(--secondaryColor);
  }
  .bg-tertiary{
    background-color: var(--tertiaryColor);
  }
  .bg-gray{
      background-color: #F5F5F5;
  }

  /*--------------------------------------------------- text colors section s8: ----------------------------------------*/
  .color-primary{
    color: var(--primaryColor);
  }
  .color-secondary{
    color: var(--secondaryColor);
  }
  .color-tertiary{
    color: var(--tertiaryColor);
  }
  /*.color-gray{*/
  /*    color: gray;*/
  /*}*/
 /*--------------------------------------------------- sections section s9: ----------------------------------------*/
 .section{
  width: 100%;
  padding: var(--sectionPadding);
 }
 /*--------------------------------------------------- input section s10: ----------------------------------------*/
 input[type="text"],input[type="email"],input[type="password"],input[type="tel"],select,textarea, .uploadDiv{
  color: var(--secondaryColor);
  width: 100%;
  outline: none;
  padding: var(--inputPadding);
  font-size: var(--smallTextSize);
  font-family: var(--regularFont);
  border-radius: var(--inputBorderRadius);
  border: 1px solid #DEDEDE;
  position: relative;
  text-indent: 20px;
  resize: none;
 }

.input-icon-right {
    position: absolute;
    left: 100%;
    top: 0;
    height: 100%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-left: 1px solid #DEDEDE;
    transform: translatex(-100%);
    background: transparent;
    outline: none;
}
.input-icon img, .input-icon-right img {
    width: 20px;
}
 .uploadDiv{
     padding: 20px 0;
 }
select{
    /*text-indent: 55px;*/
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: '';
    position: relative;
}

.dropdown{
    position: relative;
}
.dropdown::after{
 width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--secondaryColor);
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(-200%,-50%);
  content: "";

}
 
  input:focus, textarea:focus{
  border: 1px solid var(--primaryColor);
 }
 input:focus ~ .input-icon, textarea:focus ~ .input-icon{
  border: 1px solid var(--primaryColor) !important;
 }
 .input-icon.focused{
     border: 1px solid var(--primaryColor);
 }

.input-icon{
    position: absolute;
    left: 0;
    top: 0;
    height: calc(100% - 2px);
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #DEDEDE;
    background-color: white;
    z-index: 0;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    
    
}

 /**/
 /* Hide the browser's default checkbox */
input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 10;
}
.checkboxContainer {
  display: block;
  position: relative;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

}
/* Create a custom checkbox */
.checkmark {
  position: relative;
  /*top: 0;*/
  /*left: 0;*/
  height: 25px;
  width: 25px;
  background-color: white;
  border: 1px solid #DEDEDE;
  display: block;
}

.checkmark:after {
  content: "";
  position: absolute;
  display: block;
  opacity: 0;
  transition: opacity 0.2s;
}

/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkmark:after {
 opacity: 1;

}

/* Style the checkmark/indicator */
.checkboxContainer .checkmark:after {
  left: 50%;
  top: 50%;
  width: 5px;
  height: 10px;
  border: solid var(--primaryColor);
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg) translate(-100%,-25%);
}
 /**/
 .validation-message{
    font-size: var(--smallTextSize);
    /*font-family: var(--lightFont);*/
    color: var(--warnMessageColor) !important;
    position: absolute;
    left: 10px;
    top: 100%;
    margin: 10px 0;
 }
 
 
.input-container.telContainer .input-icon{
    padding: 0 36px;
}
#phone-nb{
    padding-left: unset !important;
    text-indent: 110px !important;
}
.iti.iti--allow-dropdown.iti--separate-dial-code{
    width: 100%;
}
.iti--separate-dial-code .iti__selected-flag{
    color: #9A9A9A;
}
.iti--separate-dial-code .iti__selected-flag{
    background: unset !important;
}
.iti__country-list{
    color: var(--secondaryColor) !important;
}

.input-icon img,.input-icon-right img{
    width: 20px;
}
.input-container{
    position: relative;
    margin-top: 30px;
    width: 45%;
    margin-left: auto;
    margin-right: auto;
}
.input-container-full{
    position: relative;
    margin-top: 30px;
    width: 95%;
     margin-left: auto;
    margin-right: auto;
}
@media(max-width: 768px)
{
    .input-container{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
}
}

 /*--------------------------------------------------- absolute section s11: ----------------------------------------*/
 .absolute{
      position: absolute;
      left: 0;
      top: 0;
 }
 .relative{
    position: relative;
 }
 .sticky{
  position: sticky;
  top: 0;
  left: 0;
 }
 .fixed{
  position: fixed;
  top: 0;
  left: 0;
 }
 .z-9999{
  z-index: 9999;
 }
 .z-9000{
  z-index: 9000;
 }
 .z-9001{
     z-index: 9001;
 }
 .z-10{
  z-index: 10;
 }
 .z-2{
  z-index: 2;
 }
 .z-1{
  z-index: 1;
 }
 .z-n1{
  z-index: -1;
 }
  /*--------------------------------------------------- margin section s12: ----------------------------------------*/
  
  .m-top-5{
      margin-top: 5px;
  }
  .m-top-10{
      margin-top: 10px;
  }
  .m-top-15{
      margin-top: 15px;
  }
  
  .m-top-20{
    margin-top: 20px;
  }
  .m-top-30{
    margin-top: 30px;
  }
  .m-top-40{
    margin-top: 40px;
  }
  .m-top-50{
    margin-top: 50px;
  }
  .m-top-60{
    margin-top: 60px;
  }
  .m-bottom-60{
      margin-bottom: 60px;
  }
  .m-r-10{
      margin-right: 10px;
  }
  .m-l-0{
      margin-left: 0 !important;
  }
  .m-l-10{
      margin-left: 10px;
  }
  .m-l-20{
      margin-left: 20px;
  }
  .m-l-30{
      margin-left: 30px;
  }
  .m-l-10p{
      margin-left: 10%;
  }
  .m-r-20{
      margin-right: 20px;
  }
  .m-r-40{
      margin-right: 40px;
  }
  .m-TB-15{
      margin: 15px 0;
  }
  .m-TB-40{
      margin: 40px 0;
  }
  .m-TB-60{
      margin: 60px 0;
  }
  .m-LR-auto{
      margin-left: auto;
      margin-right: auto;
  }
  .m-B-0i{
      margin-bottom: 0 !important;
  }
  .m-B-0{
      margin-bottom: 0;
  }
  .m-top-n5{
      margin-top: -5px;
  }
  .m-top-n-200{
      margin-top: -200px;
  }
    /*--------------------------------------------------- padding section s13: ----------------------------------------*/
     .pd-TB-5{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .pd-TB-10{
      padding: 10px 0;  
    }
    .pd-TB-17{
      padding: 17px 0;  
    }
    .pd-TB-20{
      padding: 20px 0;
    }
    .pd-TB-30{
        padding: 30px 0;
    }
    .pd-TB-40{
      padding: 40px 0;
    }
    .pd-TB-80{
      padding: 80px 0;
    }
    .pd-TB-50{
        padding: 50px 0;
    }
    .pd-20{
        padding: 20px;
    }
    .pd-30{
        padding: 30px;
    }
    .pd-40{
        padding: 40px;
    }
    .pd-50{
        padding: 50px;
    }
    .pd-B-20{
        padding-bottom: 20px;
    }
    .pd-B-30{
        padding-bottom: 30px;
    }
    .pd-B-5{
        padding-bottom: 5px;
    }
    .pd-B-40{
        padding-bottom: 40px;
    }
    .pd-B-170{
        padding-bottom: 170px;
    }
    .pd-0-45-0-0{
        padding: 0 45px 0 0;
    }
    .pd-30-0-0-0{
        padding: 30px 0 0 0;
    }
    .pd-0-0-0-45{
        padding: 0 0 0 45px;
    }
    .pd-T-0{
        padding-top: 0;
    }
    .pd-T-100{
        padding-top: 100px;
    }
    .pd-B-0{
        padding-bottom: 0;
    }
    .pd-RL-35{
        padding: 0 35px;
    }
    .pd-LR-20{
        padding-left: 20px;
        padding-right: 20px;
    }
    .pd-L-30{
        padding-left: 30px;
    }
    .pd-R-30{
        padding-right: 30px;
    }
    .pd-TB-80i{
        padding: 80px 0 !important;
    }
    .pd-TB-100{
        padding: 100px 0;
    }
    .pd-70-50-40-50{
        padding: 70px 50px 40px 50px;
    }
    .pd-TB-LR-40-30{
        padding: 40px 30px;
    }
    /*--------------------------------------------------- list section s14: ----------------------------------------*/
    ul,ol{
        margin-left: 20px;
    }
    ol li{
        line-height: 32px;
    }
  ul li{
    list-style-type: none;
    line-height: 32px;
  }
  ul li:before {
    content: " ";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--primaryColor);
    margin-left: -20px;
    margin-top: 11px;
    border-radius: 50%;
}
.bg-secondary ul li:before {
    background: var(--tertiaryColor);
}
/*--------------------------------------------------- max-width section s15: ----------------------------------------*/
.w-90To100{
    width: 90%;
}
.w-max-400{
    max-width: 400px;
}
.w-max-600{
    max-width: 600px;
}
.w-max-800{
    max-width: 800px;
}
.w-max-900{
    max-width: 900px;
}
.w-max-1000{
    max-width: 1000px;
}
.w-max-1100{
    max-width: 1100px;
}
.w-max-1200{
    max-width: 1200px;
}
/*--------------------------------------------------- list section s16: ----------------------------------------*/
.d-none{
    display: none;
}
.d-block{
    display: block;
}
.hide{
    display: none;
}
 /*--------------------------------------------------- custom style section sbeforeLast: ----------------------------------------*/
 .filteringHighlight{
     background-color: yellow;
 }
 .col-6-n70{
     width: calc(50% - 70px);
     height: fit-content;
 }
 .col-gap-40{
     column-gap: 40px;
 }
 .bordered-gray{
     border: 1px solid #FAFAFA;
     background: #FAFAFA;
     padding: 24px;
     border-radius: 5px;
 }
 .bordered-box{
     box-shadow: 0 3px 6px gray;
     border-radius: 12px;
 }
 .clickable.selected{
     background-color: var(--primaryColor);
     color: var(--tertiaryColor) !important;
 }
 .clickable.selected img{
     filter: brightness(10);
 }
 .text-decoration-none-hover:hover{
     text-decoration: none;
 }
  .book-grid{
        display: grid;
        grid-template-columns: 2% 60% 38%;
        column-gap: 0;
        max-width: 1200px;
        margin: auto;
    }
    @media(max-width:768px)
    {
        .book-grid{
        display: grid;
        grid-template-columns: 2.5% 97.5% 0;
        column-gap: 0;
        max-width: 1200px;
        margin: auto;
    }
    }
    .tri-color-column > div{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 33.33%;
        
    }
 
 @media(max-width: 1100px)
 {
     .make-title-smaller{
         font-size: 1.8rem !important;
     }
 }
 .bonus-link-under-cta{
     position: absolute;
     top:45px;
     width: 100%;
     text-align: center;
 }
 .image-circle{
     width: 65px;
     height: 65px;
     border-radius: 50%;
     background-color: var(--primaryColor);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .centered-top{
     position: absolute;
     left:50%;
     top:0;
     transform: translate(-50%,-50%);
 }
 @media(min-width: 1600px)
 {
     .btf-text{
         left: calc((100% - 1600px)/2) !important;
     }
 }
.horizontal-line{
    width: 100%;
    height: 1px;
    background-color: #DEDEDE;
    margin: 60px auto;
}
 .bg-split-color{
     background: linear-gradient(
    to right,
    #6CD8D8 0%,
    #6CD8D8 50%,
    var(--primaryColor) 50%,
    var(--primaryColor) 100%
  );
 }
 @media(max-width: 768px)
 {
     .bg-split-color{
     background: linear-gradient(
    to bottom,
    #6CD8D8 0%,
    #6CD8D8 50%,
    var(--primaryColor) 50%,
    var(--primaryColor) 100%
  );
 }
 }
 .white-space-under-form{
     position: absolute;
     left: 0;
     top: 100%;
     width: 100%;
     height:350px;
     transform:translatey(-300px);
     
 }
 .form-container{
     border-radius: 20px;
     box-shadow: 0px 20px 20px gray;
     background: var(--tertiaryColor);
 }
 ul.list-with-circle{
     margin-left: 0;
 }

  ul.list-with-circle li{
    display: flex;
    flex-wrap: wrap;
    line-height: 20px;
    align-items: center;
 }
 
 ul.list-with-circle li:before{
    content: none;
    
 }
 .circle{
     width: 45px;
     height: 45px;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: var(--primaryColor);
     color: var(--tertiaryColor);
 }

 .bg-pink{
     background:linear-gradient(to right, #8968FD , #3D2A80);
      border-radius: 15px;padding: 40px 0;
 }
 .bg-light-gray{
     background: #FAFAFA;
 }
 .bg-primary-light{
     background: #65D8D8;
 }
 .bg-primary-lighter{
     background: #99EAEA;
 }
 
 @media(max-width: 650px)
 {
     .w-260-sm{
         width: 260px !important;
     }
 }
 .col-gap-15{
    column-gap: 15px;
 }
 .b-radius-12{
     border-radius: 12px;
 }
 .b-radius-15{
     border-radius: 15px;
 }
 .b-radius-20{
     border-radius: 20px;
 }
 .b-radius-28{
     border-radius: 28px;
 }
 .fit-content{
     width: fit-content;
 }
 @media(max-width: 900px){
.font-size-27-lg{
    font-size: 27px;
}
}
.btf-text{
    position: absolute;
    left: 2.5%;
    top: 50%; 
    transform:translatey(-50%);
}
.btf-image{
    font-size: 0;
}
@media(max-width: 768px)
{
 .btf-text{
    position: relative;
    left: unset;
    top: unset; 
    transform:unset;
}   
.btf-image img{
    width: 120%;
    min-width: 280px;
    margin-left: -6%;
}
.pd-TB-60-md{
    padding: 60px 0;
}
.pd-T-60-md{
    padding-top: 40px;
}
}


/*header and menu*/
header{
    padding: 10px 0;
    position: relative;
    /*z-index: 9999;*/
}
.right-menu-container > div{
    margin-right: 20px;
}
.menu-box{
    cursor: pointer;
}
.menu-container{
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.first-line-menu{
    width: 50%;
    height: 1px;
    background-color: var(--secondaryColor);
    transition: transform 0.5s;
}
.second-line-menu{
    width: 100%;
    height: 1px;
    background-color: var(--secondaryColor);
    margin-top: 3px;
    transition: transform 0.5s;
}
.third-line-menu{
    width: 50%;
    height: 1px;
    background-color: var(--secondaryColor);
    margin-left: auto;
    margin-top: 3px;
    transition: transform 0.5s;
}
.open-menu{
    color: var(--tertiaryColor) !important;
}
.open-menu .first-line-menu{
        margin-left: 1px;
     transform: rotate(45deg);
     background-color: var(--tertiaryColor);
}
.open-menu .second-line-menu{
    margin-top: 3px;
     transform: rotate(-45deg);
     height: 1px;
     background-color: var(--tertiaryColor);
}

.open-menu .third-line-menu{
    margin-left: 8.8px;
    transform: translatex(-50%);
    transform: rotate(45deg);
    background-color: var(--tertiaryColor);
}
.backover-menu{
    width: 100%;
    /*height: 100vh;*/
    background-color: var(--tertiaryColor);
    overflow-y: auto;
    visibility: hidden;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    transform: translatey(100%);
    transition: transform 0.5s;
    padding: 120px 0;
}
.backover-menu.rise{
    z-index: 9998;
    height: 100vh;
    visibility: visible;
    transform: translatey(0%);
    background-color: var(--secondaryColor);
}
.backover-menu-header{
    position: relative;
    width: fit-content;
    cursor: pointer;
    color: var(--tertiaryColor);
}
.show-sub-items .backover-menu-header{
    color: var(--primaryColor);
}
.child-items-container{
    column-gap: 30px;
    display: none;
    margin-left: 70px;
}
.backover-item-container{
    margin-top: 20px;
}
@media(min-width: 1052px)
{
.show-sub-items .backover-menu-header::after{
    position: absolute;
    content: "";
    width: 2px;
    height: 32px;
    background-color: var(--tertiaryColor);
    left: calc(100% + 30px);
    top: 0;
    transition: transform 0.2s;
}
}
@media(max-width: 1051px)
{
    .backover-item-container
    {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
    .child-items-container{
    flex-direction: column;
    position: unset;
    margin-left: 0;
    /*justify-content: space-evenly;*/
}

     header{
    padding: 20px 0;
}
.child-items-container > div{
    margin: 5px 0;
}
}


a.top-over-menu-links{
    color: var(--tertiaryColor);
    font-size: var(--textSize);
    text-decoration: none;
}
a.top-over-menu-links:hover{
    color: var(--primaryColor);
}

.pointer{
    cursor: pointer;
}
.open-box.bg-primary img{
    filter: brightness(10);
}


 /*--------------------------------------------------- media queries section sLast: ----------------------------------------*/
  @media(max-width: 991px)
{
    .line{
        display:none;
    }
    .arrow-line{
        padding: 30px 0;
    }
}
 @media(max-width: 900px)
{
    :root {
      --wrapperWidth: 95%;
      --smallTextSize: 0.8rem;
      --textSize: 1rem;
      --titleSize: 2.2rem;
      --titleTwoSize: 1.9rem;
      --titleThreeSize: 1.75rem;
      --titleFourSize: 1.6rem;
      --titleFiveSize: 1.5rem;
      --titleSixSize: 1.2rem;
      --sectionPadding: 60px 0;
      --columnsSpace: 5%;
      /*--rowSpace: 20px;*/
      --btnBorderRadius: 12px;
      --btnPadding: 15px 30px;
      --inputPadding: 10px 0px;
      --inputBorderRadius: 12px;
      --iconsWidth: 50px;
      --iconsWidthSecondary: 30px;
      --iconsWidthTertiary: 25px;
      }
      .display-grid-1-lg{
        display: grid;
        grid-template-columns: 100%;
        column-gap: 0;
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-2-lg{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-2{
          grid-template-columns: 100%;
      }
      .display-grid-2-with-no-space{
      display: grid;
      grid-template-columns: 100%;
      column-gap: 0;
      grid-row-gap: 0;
  }
      .display-grid-3-lg{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-4-lg{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        column-gap: var(--columnsSpace);
      }
      .display-grid-5-lg{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-6-lg{
        display: grid;
        grid-template-columns: repeat(6,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .col-1-lg{
        width: 8.33%;
       }
       .col-2-lg{
        width: 16.66%;
       }
       .col-3-lg{
        width: 25%;
       }
       .col-4-lg{
        width: 33.33%;
       }
       .col-5-lg{
        width: 41.66%;
       }
       .col-6-lg{
        width: 50%;
       }
       .col-7-lg{
        width: 58.33%;
       }
       .col-8-lg{
        width: 66.66%;
       }
       .col-9-lg{
        width: 75%;
       }
       .col-10-lg{
        width: 83.33%;
       }
       .col-11-lg{
        width: 91.66%;
       }
       .col-12-lg{
        width: 100%;
       }
       .pd-TB-20-lg{
      padding: 20px 0;
    }
    .pd-TB-40-lg{
      padding: 80px 0;
    }
    .pd-TB-50-lg{
        padding: 50px 0;
    }
    .pd-20-lg{
        padding: 20px;
    }
    .pd-50-lg{
        padding: 50px;
    }
    .pd-B-40-lg{
        padding-bottom: 40px;
    }
    .text-center-lg{
        text-align: center;
    }
    .d-none-lg{
    display: none;
}
.d-block-lg{
    display: block;
}
.pd-0-45-0-0, .pd-0-0-0-45{
    padding: 0;
}
.m-top-20-lg{
    margin-top: 20px;
}
.m-top-40-lg{
        margin-top: 40px;
      }
      .flex-row-lg{
    display: flex;
    flex-wrap: wrap;
}
.static-lg{
    position: static;
}

.justify-content-flex-start-lg{
    justify-content: flex-start;
  }
  .align-items-flex-start-lg{
      align-items: flex-start;
  }
  .flex-direction-column-lg{
    flex-direction: column;
}
}
@media(max-width: 768px)
{
    :root {
      --wrapperWidth: 80%;
      --smallTextSize: 0.8rem;
      --textSize: 1rem;
      --titleSize: 2rem;
      --titleTwoSize: 1.75rem;
      --titleThreeSize: 1.5rem;
      --titleFourSize: 1.4rem;
      --titleFiveSize: 1.3rem;
      --titleSixSize: 1.2rem;
      --sectionPadding: 60px 0;
      --columnsSpace: 5%;
      /*--rowSpace: 20px;*/
      --btnBorderRadius: 12px;
      --btnPadding: 15px 30px;
      --inputPadding: 10px 0px;
      --inputBorderRadius: 12px;
      --iconsWidth: 50px;
      --iconsWidthSecondary: 30px;
      --iconsWidthTertiary: 25px;
      }
      .display-grid-1-md{
        display: grid;
        grid-template-columns: 100%;
        column-gap: 0;
      }
      .display-grid-2-md{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
  /*    .display-grid-2-with-no-space-md{*/
  /*    display: grid;*/
  /*    grid-template-columns: repeat(2,1fr);*/
  /*    column-gap: 0;*/
  /*    grid-row-gap: var(--rowSpace);*/
      
  /*}*/
      .display-grid-3-md{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-4-md{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-5-md{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-6-md{
        display: grid;
        grid-template-columns: repeat(6,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .col-1-md{
        width: 8.33%;
       }
       .col-2-md{
        width: 16.66%;
       }
       .col-3-md{
        width: 25%;
       }
       .col-4-md{
        width: 33.33%;
       }
       .col-5-md{
        width: 41.66%;
       }
       .col-6-md{
        width: 50%;
       }
       .col-7-md{
        width: 58.33%;
       }
       .col-8-md{
        width: 66.66%;
       }
       .col-9-md{
        width: 75%;
       }
       .col-10-md{
        width: 83.33%;
       }
       .col-11-md{
        width: 91.66%;
       }
       .col-12-md{
        width: 100%;
       }
       .text-center-md{
        text-align: center;
       }
       .m-top-20-md{
        margin-top: 20px;
      }
      .m-top-30-md{
        margin-top: 30px;
      }
      .m-top-40-md{
        margin-top: 40px;
      }
      .m-top-50-md{
        margin-top: 50px;
      }
      .m-top-60-md{
        margin-top: 60px;
      }
       .pd-TB-20-md{
      padding: 20px 0;
    }
    .pd-TB-40-md{
      padding: 80px 0;
    }
    .pd-20-md{
        padding: 20px;
    }
    .pd-50-md{
        padding: 50px;
    }
    .pd-LR-20-md{
        padding-left: 20px;
        padding-right: 20px;
    }
    .pd-L-0-md{
        padding-left: 0;
    }
    .pd-R-0-md{
        padding-right: 0;
    }
    .m-LR-0-md{
        margin-left: 0;
        margin-right: 0;
    }
    .d-none-md{
    display: none;
}
.d-block-md{
    display: block;
}
.flex-direction-column-md{
    flex-direction: column;
}
.pd-0-md{
    padding: 0 !important;
}
.pd-TB-30-md{
    padding: 30px 0;
}
.m-l-0-md{
    margin-left: 0;
}
.justify-content-center-md{
    justify-content: center;
} 
.m-top-20-md{
    margin-top: 20px;
}
.d-flex-md
{
    display: flex;
}
}
@media(max-width: 650px)
{
    :root {
      --wrapperWidth: 90%;
      --smallTextSize: 0.8rem;
      --textSize: 1rem;
      --titleSize: 2rem;
      --titleTwoSize: 1.75rem;
      --titleThreeSize: 1.5rem;
      --titleFourSize: 1.4rem;
      --titleFiveSize: 1.3rem;
      --titleSixSize: 1.2rem;
      --sectionPadding: 60px 0;
      --columnsSpace: 5%;
      --btnBorderRadius: 12px;
      --btnPadding: 15px 30px;
      --inputPadding: 10px 0px;
      --inputBorderRadius: 12px;
      --iconsWidth: 50px;
      --iconsWidthSecondary: 30px;
      --iconsWidthTertiary: 25px;
      }
      .display-grid-1-sm{
        display: grid;
        grid-template-columns: 100%;
        column-gap: 0;
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-2-sm{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
  /*    .display-grid-2-with-no-space-sm{*/
  /*    display: grid;*/
  /*    grid-template-columns: repeat(2,1fr);*/
  /*    column-gap: 0;*/
  /*    grid-row-gap: var(--rowSpace);*/
      
  /*}*/
      .display-grid-3-sm{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-4-sm{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-5-sm{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-6-sm{
        display: grid;
        grid-template-columns: repeat(6,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .col-1-sm{
        width: 8.33%;
       }
       .col-2-sm{
        width: 16.66%;
       }
       .col-3-sm{
        width: 25%;
       }
       .col-4-sm{
        width: 33.33%;
       }
       .col-5-sm{
        width: 41.66%;
       }
       .col-6-sm{
        width: 50%;
       }
       .col-7-sm{
        width: 58.33%;
       }
       .col-8-sm{
        width: 66.66%;
       }
       .col-9-sm{
        width: 75%;
       }
       .col-10-sm{
        width: 83.33%;
       }
       .col-11-sm{
        width: 91.66%;
       }
       .col-12-sm{
        width: 100%;
       }
       .text-center-sm{
        text-align: center;
    }
        .pd-TB-20-sm{
      padding: 20px 0;
    }
    .pd-TB-40-sm{
      padding: 80px 0;
    }
    .pd-20-sm{
        padding: 20px;
    }
    .pd-50-sm{
        padding: 50px;
    }
    .m-top-20-sm{
        margin-top: 20px;
    }
    .m-top-30-sm{
        margin-top: 30px;
    }
    .d-none-sm{
    display: none;
}
.d-block-sm{
    display: block;
}
.justify-content-center-sm{
    justify-content: center;
}
.m-r-0-sm{
      margin-right: 0;
  }
  .m-l-0-sm{
      margin-left: 0;
  }
  .m-LR-auto-sm{
      margin-left: auto;
      margin-right: auto;
  }
  .m-top-0-sm{
      margin-top: 0;
  }
  .pd-B-30-sm{
      padding-bottom: 30px;
  }
  .pd-B-60-sm{
      padding-bottom: 60px;
  }
  .pd-15-sm{
      padding: 15px;
  }
  h1{
      line-height: 40px;
  }
  h2{
      line-height: 35px;
  }
   .flex-direction-column-sm{
    flex-direction: column;
}
.m-top-40-sm
{
    margin-top: 40px;
}
.m-top-60-sm{
        margin-top: 60px;
      }
}
@media(max-width: 450px)
{
    :root {
      --wrapperWidth: 90%;
      --smallTextSize: 0.8rem;
      --textSize: 1rem;
      --titleSize: 2rem;
      --titleTwoSize: 1.75rem;
      --titleThreeSize: 1.5rem;
      --titleFourSize: 1.4rem;
      --titleFiveSize: 1.3rem;
      --titleSixSize: 1.2rem;
      --sectionPadding: 60px 0;
      --columnsSpace: 5%;
      --btnBorderRadius: 12px;
      --btnPadding: 15px 30px;
      --inputPadding: 10px 0px;
      --inputBorderRadius: 12px;
      --iconsWidth: 50px;
      --iconsWidthSecondary: 30px;
      --iconsWidthTertiary: 25px;
      }
      .display-grid-1-xs{
        display: grid;
        grid-template-columns: 100%;
        column-gap: 0;
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-2-xs{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
  /*    .display-grid-2-with-no-space-xs{*/
  /*    display: grid;*/
  /*    grid-template-columns: repeat(2,1fr);*/
  /*    column-gap: 0;*/
  /*    grid-row-gap: var(--rowSpace);*/
      
  /*}*/
      .display-grid-3-xs{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-4-xs{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-5-xs{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .display-grid-6-xs{
        display: grid;
        grid-template-columns: repeat(6,1fr);
        column-gap: var(--columnsSpace);
        grid-row-gap: var(--rowSpace);
      }
      .col-1-xs{
        width: 8.33%;
       }
       .col-2-xs{
        width: 16.66%;
       }
       .col-3-xs{
        width: 25%;
       }
       .col-4-xs{
        width: 33.33%;
       }
       .col-5-xs{
        width: 41.66%;
       }
       .col-6-xs{
        width: 50%;
       }
       .col-7-xs{
        width: 58.33%;
       }
       .col-8-xs{
        width: 66.66%;
       }
       .col-9-xs{
        width: 75%;
       }
       .col-10-xs{
        width: 83.33%;
       }
       .col-11-xs{
        width: 91.66%;
       }
       .col-12-xs{
        width: 100%;
       }
        .pd-TB-20-xs{
      padding: 20px 0;
    }
    .pd-TB-40-xs{
      padding: 80px 0;
    }
    .pd-20-xs{
        padding: 20px;
    }
    .pd-50-xs{
        padding: 50px;
    }
    .pd-30-20-xs{
        padding: 30px 20px;
    }
    .d-none-xs{
    display: none;
}
.d-block-xs{
    display: block;
}
.flex-row-xs{
    display: flex;
}
.pd-10-xs{
    padding: 10px;
}
.flex-direction-column-xs{
    flex-direction: column;
}
.row-gap-40-xs{
    row-gap: 40px
}
.m-top-60-xs{
        margin-top: 60px;
      }



}