/*!
 * Null JS v1.0.0 (https://null-js.com)
 * Copyright (c) 2023 Null JS
 * Licensed under MIT (https://opensource.org/licenses/MIT)
*/

/* Start  HTML Elements/Root*/
* {
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
  }
  
  ::before, ::after {
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    }
    
  html { 
  scroll-behavior:smooth;
  }
  
  body {
  margin:0;
  font-family: arial;
  -webkit-text-size-adjust: 100%;
  }
  
  img { 
  vertical-align: middle;
  max-width: 100%; 
  height: auto;
  } 
  
    a {
        text-decoration: none;
        color: unset;
    }
    a:hover{
    color:var(--null-color-main)
    }
  
  ul {
  margin:0; 
  padding:0; 
  list-style-type: none;
  }
  
  li {
  margin: 0;
  padding:0;
  }
  
  p{
  line-height: 1.5;
  margin-top: 10px;
  margin-bottom: 10px;
  }
  
  h1,h2,h3,h4,h5,h6{
  margin:0;
  line-height: 1.5;
  } 
  form, button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  }
  
  /* End  HTML Elements/Root*/
  
  
  /* Start  Root  */
  :root{
  
  /* Colors */
  --null-color-black:#030000;
  --null-color-white:#ffffff;
  --null-color-red:#c8102e;
  --null-color-blue:#0071C5;
  --null-color-purple:#9147ff;
  --null-color-green:#008248;
  --null-color-yellow:#F4B400;
  --null-color-brown:#592411;
  --null-color-grey:#4F5964;
  --null-color-pink:#e76197;
  --null-color-orange:#f78f1f;
  --null-color-light-grey:#f6f7f9;
  /**/
  --null-color-main:#2c6c7d;
  /**/
  
  /* Colors */
  
  /* Box Shadow */
  --null-box-shadow:rgb(0 0 0 / 10%) 0 0 40px;
  /* Box Shadow */
  
  /* Text shadow */
  --null-text-shadow:1px 1px 2px var(--null-color-black);
  /* Text shadow */
  
  /* Border Radius */
  --null-border-radius:8px;
  /* Border Radius */
  
  }
  /* Start  Root  */
  
  
  /* Start box-shadow */
  
  .null-box-shadow{
  -webkit-box-shadow: var(--null-box-shadow) !important;
  box-shadow: var(--null-box-shadow) !important;
  }
  
  /* End box-shadow */
  
  /*Start text-shadow */
  .null-text-shadow{
  text-shadow: var(--null-text-shadow) !important;
  }
  
  /* End text-shadow */
  
  /* Start border-radius */
  
  .null-border-radius{
  border-radius:var(--null-border-radius);
  }
  
  /* End border-radius */
  
  /* Start font size */
  
  .null-font-size-10{ font-size: 10px !important; }
  .null-font-size-11{ font-size: 11px !important; }
  .null-font-size-12{ font-size: 12px !important; }
  .null-font-size-13{ font-size: 13px !important; }
  .null-font-size-14{ font-size: 14px !important; }
  .null-font-size-15{ font-size: 15px !important; }
  .null-font-size-16{ font-size: 16px !important; }
  .null-font-size-17{ font-size: 17px !important; }
  .null-font-size-18{ font-size: 18px !important; }
  .null-font-size-19{ font-size: 19px !important; }
  .null-font-size-20{ font-size: 20px !important; }
  .null-font-size-21{ font-size: 21px !important; }
  .null-font-size-22{ font-size: 22px !important; }
  .null-font-size-23{ font-size: 23px !important; }
  .null-font-size-24{ font-size: 24px !important; }
  .null-font-size-25{ font-size: 25px !important; }
  
  /* End font size */
  
  
  /* Start  colors  */
  
  .null-color-black{color: var(--null-color-black) !important;}
  .null-color-white{color: var(--null-color-white) !important;}
  .null-color-red{color: var(--null-color-red) !important;}
  .null-color-blue{color: var(--null-color-blue) !important;}
  .null-color-purple{color: var(--null-color-purple) !important;}
  .null-color-green{color: var(--null-color-green) !important;}
  .null-color-yellow{color: var(--null-color-yellow) !important;}
  .null-color-brown{color: var(--null-color-brown) !important;}
  .null-color-grey{color: var(--null-color-grey) !important;}
  .null-color-pink{color: var(--null-color-pink) !important;}
  .null-color-orange{color: var(--null-color-orange) !important;}
  .null-color-main{color:var(--null-color-main) !important}
  
  /* End  colors  */
  
  /* Start  background  */
  
  .null-background-black{background: var(--null-color-black) !important;}
  .null-background-white{background: var(--null-color-white) !important;}
  .null-background-red{background: var(--null-color-red) !important;}
  .null-background-blue{background: var(--null-color-blue) !important;}
  .null-background-purple{background: var(--null-color-purple) !important;}
  .null-background-green{background: var(--null-color-green) !important;}
  .null-background-yellow{background: var(--null-color-yellow) !important;}
  .null-background-brown{background: var(--null-color-brown) !important;}
  .null-background-grey{background: var(--null-color-grey) !important;}
  .null-background-pink{background: var(--null-color-pink) !important;}
  .null-background-orange{background: var(--null-color-orange) !important;}
  .null-background-main{background:var(--null-color-main) !important}
  .null-background-light-grey{background:var(--null-color-light-grey) !important}
  /* End  background  */
  
  /* Start Margin-top */
  
  .null-margin-top-10{margin-top: 10px !important;}
  .null-margin-top-20{margin-top: 20px !important;}
  .null-margin-top-30{margin-top: 30px !important;}
  .null-margin-top-40{margin-top: 40px !important;}
  .null-margin-top-50{margin-top: 50px !important;}
  .null-margin-top-60{margin-top: 60px !important;}
  .null-margin-top-70{margin-top: 70px !important;}
  .null-margin-top-80{margin-top: 80px !important;}
  .null-margin-top-90{margin-top: 90px !important;}
  .null-margin-top-100{margin-top: 100px !important;}
  
  /* End Margin-top */
  
  /* Start Margin-bottom */
  
  .null-margin-bottom-10{margin-bottom: 10px !important;}
  .null-margin-bottom-20{margin-bottom: 20px !important;}
  .null-margin-bottom-30{margin-bottom: 30px !important;}
  .null-margin-bottom-40{margin-bottom: 40px !important;}
  .null-margin-bottom-50{margin-bottom: 50px !important;}
  .null-margin-bottom-60{margin-bottom: 60px !important;}
  .null-margin-bottom-70{margin-bottom: 70px !important;}
  .null-margin-bottom-80{margin-bottom: 80px !important;}
  .null-margin-bottom-90{margin-bottom: 90px !important;}
  .null-margin-bottom-100{margin-bottom: 100px !important;}
  
  /* End Margin-bottom */
  
  /* Start padding-top */
  
  .null-padding-top-10{padding-top: 10px !important;}
  .null-padding-top-20{padding-top: 20px !important;}
  .null-padding-top-30{padding-top: 30px !important;}
  .null-padding-top-40{padding-top: 40px !important;}
  .null-padding-top-50{padding-top: 50px !important;}
  .null-padding-top-60{padding-top: 60px !important;}
  .null-padding-top-70{padding-top: 70px !important;}
  .null-padding-top-80{padding-top: 80px !important;}
  .null-padding-top-90{padding-top: 90px !important;}
  .null-padding-top-100{padding-top: 100px !important;}
  
  /* End padding-top */
  
  /* Start padding-bottom */
  
  .null-padding-bottom-10{padding-bottom: 10px !important;}
  .null-padding-bottom-20{padding-bottom: 20px !important;}
  .null-padding-bottom-30{padding-bottom: 30px !important;}
  .null-padding-bottom-40{padding-bottom: 40px !important;}
  .null-padding-bottom-50{padding-bottom: 50px !important;}
  .null-padding-bottom-60{padding-bottom: 60px !important;}
  .null-padding-bottom-70{padding-bottom: 70px !important;}
  .null-padding-bottom-80{padding-bottom: 80px !important;}
  .null-padding-bottom-90{padding-bottom: 90px !important;}
  .null-padding-bottom-100{padding-bottom: 100px !important;}
  
  /* End padding-bottom */
  
  
  /* Start null-padding */
  .null-padding-5{padding: 5px;}
  .null-padding-10{padding: 10px;}
  .null-padding-20{padding: 20px;}
  .null-padding-30{padding: 30px;}
  .null-padding-40{padding: 40px;}
  .null-padding-50{padding: 50px;}
  /* End null-padding */
  
  /* Start null-margin */
  .null-margin-5{margin: 5px;}
  .null-margin-10{margin: 10px;}
  .null-margin-20{margin: 20px;}
  .null-margin-30{margin: 30px;}
  .null-margin-40{margin: 40px;}
  .null-margin-50{margin: 50px;}
  /* End null-margin */
  
  
  /* Start width */
  
  .null-width-100{width: 100% !important;}
  
  /* End width */
  
  
  
  /* Start on cursor*/
  .null-cursor-pointer{cursor: pointer;}
  /* Start on cursor*/
  
  /* Start Text */
  
  .null-text-align-center{ text-align: center !important;}
  .null-text-align-start{text-align: start !important}
  .null-text-align-end{text-align: end !important}
  .null-text-align-justify{text-align: justify !important;}
  .null-text-transform-capitalize{text-transform: capitalize !important;}
  .null-text-transform-lowercase{text-transform: lowercase !important;}
  .null-text-transform-uppercase{text-transform: uppercase !important;}
  .null-font-weight-bold{font-weight: bold !important;}
  .null-font-style-italic{font-style: italic !important;}
  .null-text-decoration-underline{text-decoration: underline !important;}
  .null-text-decoration-line-through{text-decoration: line-through !important;}
  /* End Text */
  
  /* Start Display */
  
  /* Start on Display: mobile and Tablet*/
  @media (max-width: 768px) {.null-display-none-mobile{display:none !important;}}
  @media (max-width: 992px) {.null-display-none-tablet{display:none !important;}}
  
  /* Start on Display: mobile and Tablet */
  .null-display-none{display: none !important;}
  .null-display-block{display: block !important;}
  .null-display-inline-block{display: inline-block !important;}
  .null-display-inline{display: inline !important;}
  .null-display-contents{display: contents !important;}
  .null-display-inline-table{display: inline-table !important;}
  .null-display-flex{
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  }
  
  .null-display-inline-flex{
  display: -webkit-inline-box !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  }
  .null-display-grid{
  display: -ms-grid !important;
  display: grid !important;
  }
  .null-display-inline-grid{
  display: -ms-inline-grid;
  display: inline-grid  !important;
  }
  
  /* End Display */
  
  
  /* Start Poistion*/
  
  .null-position-relative{ position: relative ; }
  .null-position-fixed{ position: fixed ; }
  .null-position-absolute{ position: absolute ; }
  /* Start Poistion*/

  /*Start Image*/
  .null-image-responsive{height: auto;max-width: 100%;width: 100%;}
  .null-image-size-16x16{height: 16px;width: 16px;}
  .null-image-size-32x32{height: 32px;width: 32px;}
  .null-image-size-64x64{height: 64px;width: 64px;}
  .null-image-size-128x128{height: 128px;width: 128px;}
  .null-image-size-256x256{height: 256px;width: 256px;}
  .null-image-size-512x512{height: 512px;width: 512px;}
  .null-image-circle{border-radius: 50%;}

  /*End Image*/
  
  
  /* Start  container  */
  .null-container { padding-left: 15px; padding-right: 15px; margin-left: auto; margin-right: auto; }
  @media (min-width: 576px){.null-container { width: 540px; }} /* Small */
  @media (min-width: 768px) {.null-container { width: 720px; }} /* Medium */
  @media (min-width: 992px) {.null-container { width: 960px; }} /* Large */
  @media (min-width: 1200px) {.null-container { width: 1140px; }} /* X-Large */
  @media (min-width: 1350px) {.null-container { width: 1320px; }} /* XX-Large */
  
  
  /* End  container  */
  
  
  
  /* Start  Grid  */
  
  
  .null-container-grid-1{
      grid-template-columns: repeat(1, 1fr);
  }
  
  @media (min-width: 768px){
      .null-container-grid-2{
          grid-template-columns: repeat(2, 1fr) ;
      }
  }
  
  @media (max-width: 576px){
  .null-container-grid-3, .null-container-grid-4, .null-container-grid-5{
  grid-template-columns: repeat(1, 1fr);
  }
  }  
  
  @media (max-width: 767px){
  .null-container-grid-3 , .null-container-grid-4 , .null-container-grid-5{
  grid-template-columns: repeat(1, 1fr);
  }
  } 
  
  @media (min-width: 767px){
  .null-container-grid-3, .null-container-grid-4 , .null-container-grid-5{
  grid-template-columns: repeat(2, 1fr);
  }
  } 
  
  @media (min-width: 992px){
  .null-container-grid-3{
  grid-template-columns: repeat(2, 1fr) ;
  }
  
  } 
  
  @media (min-width: 992px){
  .null-container-grid-3{
  grid-template-columns: repeat(2, 1fr) ;
  }
  
  .null-container-grid-4{
  grid-template-columns: repeat(3, 1fr) ;
  }
  
  .null-container-grid-5{
  grid-template-columns: repeat(3, 1fr) ;
  }
  
  } 
  
  @media (min-width: 1100px){
  
  .null-container-grid-3{
  grid-template-columns: repeat(3, 1fr) ;
  }
  
  .null-container-grid-4 , .null-container-grid-5{
  grid-template-columns: repeat(4, 1fr) ;
  }
  
  } 
  
  @media (min-width: 1320px){
  
  .null-container-grid-5{
      grid-template-columns: repeat(5, 1fr) ;
  }
  
  }

  /**********************************/
  .null-layout-25{flex: 1 0 0;}
  .null-layout-50{-ms-flex-preferred-size: 50%;flex-basis: 50%;max-width: 50%;}
  .null-layout-75{flex: 3 0 0;}
  .null-layout-100{-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 100%;}
  
@media screen and (max-width: 992px) {

    .null-layout-75-25, .null-layout-25-75, .null-layout-100, .null-layout-50-50, .null-layout-25-50-25{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .null-layout-25, .null-layout-75, .null-layout-50{
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        max-width: 100%;
    }
}
@media (min-width:992px) {
    .null-layout-25, .null-layout-75, .null-layout-50{
        width: 50%;
    }
}

  
  
  
  /**********************************/
  /*Make the column as a sticky*/
  @media (min-width:992px) {
  .null-layout-sticky{
  position: sticky;
  top: 0;
  -ms-flex-item-align:start;
  -ms-grid-row-align:start;
  align-self:start
  }
  }
  /**********************************/
  
  /* Pre defined classes to change the gap*/
  
  .null-gap-50{row-gap: 50px;-webkit-column-gap: 50px;-moz-column-gap: 50px;column-gap: 50px;}
  .null-gap-40{row-gap: 40px;-webkit-column-gap: 40px;-moz-column-gap: 40px;column-gap: 40px;}
  .null-gap-30{row-gap: 30px;-webkit-column-gap: 30px;-moz-column-gap: 30px;column-gap: 30px;}
  .null-gap-20{row-gap: 20px;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;}
  .null-gap-10{row-gap: 10px;-webkit-column-gap: 10px;-moz-column-gap: 10px;column-gap: 10px;}
  @media (max-width:1020px) {
    .null-gap-30 , .null-gap-40 , .null-gap-50 {row-gap: 20px;-webkit-column-gap: 20px;-moz-column-gap: 20px;column-gap: 20px;}
  }

  /* Pre defined classes to change the gap*/
  
  
  /* Align items */
  .null-align-items-baseline{-webkit-box-align: baseline;-ms-flex-align: baseline;align-items: baseline;}
  .null-align-items-center{-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
  .null-align-items-end{-webkit-box-align: end;-ms-flex-align: end;align-items: end;}
  .null-align-items-flex-end{-webkit-box-align: end;-ms-flex-align: end;align-items: flex-end;}
  .null-align-items-flex-start{-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
  .null-align-items-inherit{-webkit-box-align: inherit;-ms-flex-align: inherit;align-items: inherit;}
  .null-align-items-initial{-webkit-box-align: initial;-ms-flex-align: initial;align-items: initial;}
  .null-align-items-normal{-webkit-box-align: normal;-ms-flex-align: normal;align-items: normal;}
  .null-align-items-revert{-webkit-box-align: revert;-ms-flex-align: revert;align-items: revert;}
  .null-align-items-self-end{-webkit-box-align: self-end;-ms-flex-align: self-end;align-items: self-end;}
  .null-align-items-self-start{-webkit-box-align: self-start;-ms-flex-align: self-start;align-items: self-start;}
  .null-align-items-start{-webkit-box-align: start;-ms-flex-align: start;align-items: start;}
  .null-align-items-stretch{-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;}
  .null-align-items-unset{-webkit-box-align: unset !important;-ms-flex-align: unset !important;align-items: unset !important;}
  .null-flex-wrap-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}
  .null-flex-wrap-reverse{-ms-flex-wrap: wrap-reverse;flex-wrap: wrap-reverse;}
  .null-justify-content-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
  .null-justify-content-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;}
  .null-justify-content-flex-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;}
  .null-justify-content-flex-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;}
  .null-justify-content-inherit{-webkit-box-pack:inherit;-ms-flex-pack:inherit;justify-content:inherit;}
  .null-justify-content-initial{-webkit-box-pack:initial;-ms-flex-pack:initial;justify-content:initial;}
  .null-justify-content-left{-webkit-box-pack:left;-ms-flex-pack:left;justify-content:left;}
  .null-justify-content-normal{-webkit-box-pack:normal;-ms-flex-pack:normal;justify-content:normal;}
  .null-justify-content-revert{-webkit-box-pack:revert;-ms-flex-pack:revert;justify-content:revert;}
  .null-justify-content-right{-webkit-box-pack:right;-ms-flex-pack:right;justify-content:right;}
  .null-justify-content-space-around{-ms-flex-pack: distribute;justify-content: space-around;}
  .null-justify-content-space-between{-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
  .null-justify-content-space-evenly{-webkit-box-pack: space-evenly;-ms-flex-pack: space-evenly;justify-content: space-evenly;}
  .null-justify-content-start{-webkit-box-pack: start;-ms-flex-pack: start;justify-content: start;}
  .null-justify-content-stretch{-webkit-box-pack: stretch;-ms-flex-pack: stretch;justify-content: stretch;}
  .null-justify-content-unset{-webkit-box-pack: unset;-ms-flex-pack: unset;justify-content: unset;}
  .null-flex-direction-column{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}
  .null-flex-direction-column-reverse{-webkit-box-orient: vertical;-webkit-box-direction: reverse;-ms-flex-direction: column-reverse;flex-direction: column-reverse;}
  .null-flex-direction-row{-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;}
  .null-flex-direction-row-reverse{-webkit-box-orient: horizontal;-webkit-box-direction: reverse;-ms-flex-direction: row-reverse;flex-direction: row-reverse;}
  
  /* Start RTL*/
  
  .null-rtl{
  direction: rtl !important;
  text-align: right !important;
  }
  
  /* END RTL*/
  
  
  /* Start Animation*/
  .null-slideup {
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: -webkit-transform 0.3s linear;
  transition: -webkit-transform 0.3s linear;
  -o-transition: transform 0.3s linear;
  transition: transform 0.3s linear;
  transition: transform 0.3s linear, -webkit-transform 0.3s linear;
  
  }
  .null-slideup:hover, .null-slideup:focus, .null-slideup:active {  -webkit-transform: translateY(-8px); -ms-transform: translateY(-8px); transform: translateY(-8px); }
  /* End Animation*/
  
  
  /* Start Flex-box */
  
  .null-flex{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  }
  
  .null-flex-start{
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
  }
  
  .null-flex-align-item-unset{
  -webkit-box-align: unset !important;
  -ms-flex-align: unset !important;
  align-items: unset !important;
  }
  /* End Flex /*
  
  /* Start button */ 
  
  .null-button {
  display: inline-block;
  font-weight: 400;
  color: var(--null-color-black);
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 0.063rem solid transparent;
  padding: 0.375rem 0.75rem;
  border-radius: var(--null-border-radius);
  font-size: 1rem;
  line-height: 1.5;
  min-width: 5rem;
  -webkit-transition: .3s ease-in-out;
  -o-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  cursor: pointer;
  }
  
  .null-button-primary {
  color: var(--null-color-white);
  background-color: var(--null-color-main);
  border-color:  var(--null-color-main);
  }
  
  .null-button-primary:hover{
  color:  var(--null-color-main);
  background-color: var(--null-color-white);
  border-color:var(--null-color-main);
  }
  
  .null-button-secondary {
  color: var(--null-color-main);
  background-color: var(--null-color-white);
  border-color:  var(--null-color-main);
  }
  
  .null-button-secondary:hover{
  color:  var(--null-color-white);
  background-color: var(--null-color-main);
  border-color:var(--null-color-main);
  }
  
  .null-button-pill{
  border-radius: 1.25rem !important;
  }
  .null-button-square{
  border-radius: 0 !important;
  }
  
  .null-button-disabled{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  color: var(--null-color-grey);
  border-color: var(--null-color-grey);
  background: #4f59641f;
  }
  
  
  .null-button-hover{
  color: var(--null-color-black);
  position: relative;
  font-weight: 600;
  overflow: hidden;
  background: -webkit-gradient(linear, left top, right top, from(var(--null-color-main)), color-stop(50%, var(--null-color-main)), color-stop(50%, var(--null-color-black)));
  background: -o-linear-gradient(left, var(--null-color-main), var(--null-color-main) 50%, var(--null-color-black) 50%);
  background: linear-gradient(to right, var(--null-color-main), var(--null-color-main) 50%, var(--null-color-black) 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  -webkit-transition: background-position 500ms ease;
  -o-transition: background-position 500ms ease;
  transition: background-position 500ms ease;
  border: 0;
  cursor: pointer;
  padding:0;
  }
  
  .null-button-hover:hover{ 
  background-position: 0 100%;
  }
  /* End button */ 
  
  /* Start Link */
  
  .null-link{
  color: var(--null-color-blue);
  position: relative;
  display: inline-block;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;  
  }
  
  .null-link::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 0.100rem;
  background-color: var(--null-color-blue);
  bottom: 0;
  left: 0;
  opacity: 1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;  
  }
  
  .null-link:hover::before {
  opacity: 0;
  }
  
  .null-link:hover{
  opacity: 0.8;
  }
  
  /* End Link */
  
  
  /* Form */
  .null-form-input{
  width: 100%;
  border: 1px solid #b7bcc1;
  height: 35px;
  border-radius: var(--null-border-radius);
  padding: 0 10px;
  caret-color: var(--null-color-main);
  }
  
  .null-form-input:focus {
  color: var(--null-color-grey);
  background-color: var(--null-color-white);
  border-color: var(--null-color-main);
  outline: 0;
  }
  
  .null-form-input:focus::placeholder {
  opacity: 0;
  }
  
  
  .null-form-input[type=number]::-webkit-inner-spin-button,
  .null-form-input[type=number]::-webkit-outer-spin-button {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  }
  
  .null-form-error{
  position: relative;
  top: 5px;
  font-size: 14px;
  color:var(--null-color-red);
  }
  
  .null-form-success{
  position: relative;
  top: 5px;
  font-size: 14px;
  color:var(--null-color-green);
  }
  
  label[null-disabled="disabled"]{
  color: #808080 !important;
  }
  
  .null-form-textarea{
  width: 100%;
  border: 1px solid #b7bcc1;
  border-radius: var(--null-border-radius);
  padding: 7px 10px 0;
  caret-color: var(--null-color-main);
  }
  
  .null-form-textarea:focus {
  color: var(--null-color-grey);
  background-color: var(--null-color-white);
  border-color: var(--null-color-main);
  outline: 0;
  }
  
  .null-form-textarea:focus::placeholder {
  opacity: 0;
  }
  
  .null-form-textarea-resize-none{
  resize: none !important;
  }
  
  .null-form-checkbox {
  accent-color: var(--null-color-main);
  cursor: pointer;
  width: 18px;
  height: 18px;
  }
  
  .null-form-checkbox-swither[type="checkbox"] {
  -webkit-appearance: none;
  position: relative;
  width: 45px;
  height: 15px;
  background: #c6c6c6;
  outline: none;
  border-radius: 20px;
  -webkit-box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
  box-shadow: inset 0 0 5px rgb(0 0 0 / 20%);
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  cursor: pointer;
  }
  
  .null-form-checkbox-swither[type="checkbox"]:before {
  content: '';
  position: absolute;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 20px;
  left: 0;
  background: var(--null-color-white);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-box-shadow: 0 2px 5px rgb(0 0 0);
  box-shadow: 0 2px 5px rgb(0 0 0);
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  }
  
  .null-form-checkbox-swither:checked[type="checkbox"]{background:var(--null-color-main);}
  
  
  .null-form-checkbox-swither:checked[type="checkbox"]:before{left:30px;}
  
  .null-form-radio-button {
  accent-color: var(--null-color-main);
  cursor: pointer;
  width: 18px;
  height: 18px;
  }
  
  
  .null-form-file {
  width: 100%;
  background: var(--null-color-light-grey);
  border: none;
  padding: 15px 10px;
  border-radius: var(--null-border-radius);
  font-size: 16px;
  cursor: pointer;
  position: relative;
  }
  
  .null-form-file::-webkit-file-upload-button {
  visibility: hidden;
  }
  
  .null-form-file::before {
  content: 'Choose file';
  color: var(--null-color-white);
  background-color: var(--null-color-main);
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
  position: absolute;
  top:8px;
  }


  @media screen and (max-width: 767px) {
    .null-form-file:empty::before {
        padding-left: 5px;
        margin-left: -7px; /* add a margin to the left */
        left:-2px;
        top: 5px;
      }
  }
  
  .null-form-file:hover::before {
  opacity: 0.9;
  }
  
  .null-form-file:active::before {
  opacity: 0.9;
  }
  
  .null-form-file::-webkit-file-upload-button {
  visibility: hidden;
  }  

  .null-form-select {
    width: 100%;
    position: relative;
    border: none;
    padding: 0 12px;
    color: #555;
    background-color: var(--null-color-light-grey);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    line-height: 1.5;

  }
  
  .null-form-select:not([multiple]){
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000000'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center; /* Adjust arrow padding */
    padding-right: 36px; /* Add extra padding to make room for the arrow */
    border-radius: var(--null-border-radius);
    background-size: 20px;
    height: 35px;
  }
  
  .null-form-select option {
      margin: 0;
      padding: 4px 8px; /* Adjust padding values as needed */
  }
  
  .null-form-select:focus {
    outline:1px solid var(--null-color-main);
    border-radius: var(--null-border-radius);
  
    }
  
    .null-rtl .null-form-select:not([multiple]){
      background-position: left 12px center;
    }
  
.null-floating-form{
    position: relative;
}

.null-floating-form .null-form-input{
    font-size: 14px;
}

.null-floating-form button , .null-floating-form input[type="submit"] {
    position: absolute;
    right: 0;
    left: auto;
    height: 100%;
    outline: 0;
    border: 0;
    background: transparent;
    border-left: 1px solid #b7bcc1;
    display: grid;
    place-items: center;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 14px;
}

.null-rtl .null-floating-form button , .null-floating-form input[type="submit"]{
    right: auto;
    left: 0;
    border-right: 1px solid #b7bcc1;
    border-left: 0;
}



  /*From */
  
  .null-scroll::-webkit-scrollbar {
width:7px;
height: 7px;
}

.null-scroll::-webkit-scrollbar-track {
background:#ece9e9;
-webkit-border-radius:25px;
}

.null-scroll::-webkit-scrollbar-thumb {
background:#ccc;
-webkit-border-radius:25px;
}