@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Permanent+Marker&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Quicksand:wght@300..700&family=Special+Elite&display=swap');

:root{
    /* variables */
    /* Revit fornt -> Bebas neue */
    /* --body_color: #d9dee8; */
    --body_color: #ececec;
    --body_color06:rgba(236, 236, 236, 0.6);
    --orange_color: #ef962a;
    --orange_color_light: rgba(239, 148, 39, 0.85);
    --green_color: #3b4d25;
    --green_color2: #4b6e20;
    --success_color: #1fd76f;
    --fail_color: #f05d5d;
      /* --green_color: #415725; */
      /* --green_color: #344421; */
    --text_color: #001f2b;
    --text_color_light: rgba(0, 31, 43, 0.5);
    --text_color_lighter: rgba(0, 31, 43, 0.3);
    --dark_color: #20272f;
    --body_color_trans: rgba(32, 39, 47, 0.65);
    --body_color_darker: rgba(32, 39, 47, 0.7);
  
  
    /* fonts */
    --main_family: "Poppins", sans-serif;
    --minor_family: "Quicksand", sans-serif;
    --heading_family: 'HighVoltage Rough','Special Elite', sans-serif;
    --subhead_family: 'Avenir Black', sans-serif;
    --text_family: 'Avenir Book', sans-serif;
    --script_family: 'Hysteria',"Dancing Script", cursive;
    --distorted: 'Earthquake', "Permanent Marker", cursive;
  
    --scripted: "Lobster", sans-serif;
    --main_text_size: 16px;
   

    /* font size em*/
  
    --size_0p3em: 0.3em;
    --size_0p4em: 0.4em;
    --size_0p5em: 0.5em;
    --size_0p6em: 0.6em;
    --size_0p7em: 0.7em;
    --size_0p8em: 0.8em;
    --size_0p9em: 0.9em;
    --size_1p0em: 1.0em;
    --size_1p1em: 1.1em;
    --size_1p2em: 1.2em;
    --size_1p3em: 1.3em;
    --size_1p4em: 1.4em;
    --size_1p5em: 1.5em;
    --size_1p6em: 1.6em;
    --size_1p7em: 1.7em;
    --size_1p8em: 1.8em;
    --size_1p9em: 1.9em;
    --size_2p0em: 2.0em;
    --size_2p1em: 2.1em;
    --size_2p2em: 2.2em;
    --size_2p3em: 2.3em;
    --size_2p4em: 2.4em;
    --size_2p5em: 2.5em;
    --size_2p6em: 2.6em;
    --size_2p7em: 2.7em;
    --size_2p8em: 2.8em;
    --size_2p9em: 2.9em;
    --size_3p0em: 3.0em;
    --size_3p1em: 3.1em;
    --size_3p2em: 3.2em;
    --size_3p3em: 3.3em;
    --size_3p4em: 3.4em;
    --size_3p5em: 3.5em;
    --size_3p6em: 3.6em;
    --size_3p7em: 3.7em;
    --size_3p8em: 3.8em;
    --size_3p9em: 3.9em;
    --size_4p0em: 4.0em;
    --size_4p1em: 4.1em;
    --size_4p2em: 4.2em;
    --size_4p3em: 4.3em;
    --size_4p4em: 4.4em;
    --size_4p5em: 4.5em;
    --size_4p6em: 4.6em;
    --size_4p7em: 4.7em;
    --size_4p8em: 4.8em;
    --size_4p9em: 4.9em;
    --size_5p0em: 5.0em;
    --size_5p1em: 5.1em;
    --size_5p2em: 5.2em;
    --size_5p3em: 5.3em;
    --size_5p4em: 5.4em;
    --size_5p5em: 5.5em;
    --size_5p6em: 5.6em;
    --size_5p7em: 5.7em;
    --size_5p8em: 5.8em;
    --size_5p9em: 5.9em;
    --size_6p0em: 6.0em;
    --size_6p1em: 6.1em;
    --size_6p2em: 6.2em;
    --size_6p3em: 6.3em;
    --size_6p4em: 6.4em;
    --size_6p5em: 6.5em;
    --size_6p6em: 6.6em;
    --size_6p7em: 6.7em;
    --size_6p8em: 6.8em;
    --size_6p9em: 6.9em;
    --size_7p0em: 7.0em;
    --size_7p1em: 7.1em;
    --size_7p2em: 7.2em;
    --size_7p3em: 7.3em;
    --size_7p4em: 7.4em;
    --size_7p5em: 7.5em;
    --size_7p6em: 7.6em;
    --size_7p7em: 7.7em;
    --size_7p8em: 7.8em;
    --size_7p9em: 7.9em;
    --size_8p0em: 8.0em;





    /* font size rem*/
  
    --size_0p3rem: 0.3rem;
    --size_0p35rem: 0.35rem;
    --size_0p4rem: 0.4rem;
    --size_0p45rem: 0.45rem;
    --size_0p5rem: 0.5rem;
    --size_0p55rem: 0.55rem;
    --size_0p6rem: 0.6rem;
    --size_0p65rem: 0.65rem;
    --size_0p7rem: 0.7rem;
    --size_0p75rem: 0.75rem;
    --size_0p8rem: 0.8rem;
    --size_0p85rem: 0.85rem;
    --size_0p9rem: 0.9rem;
    --size_0p95rem: 0.95rem;
    --size_1p0rem: 1.0rem;
    --size_1p05rem: 1.05rem;
    --size_1p1rem: 1.1rem;
    --size_1p15rem: 1.15rem;
    --size_1p2rem: 1.2rem;
    --size_1p25rem: 1.25rem;
    --size_1p3rem: 1.3rem;
    --size_1p35rem: 1.35rem;
    --size_1p4rem: 1.4rem;
    --size_1p45rem: 1.45rem;
    --size_1p5rem: 1.5rem;
    --size_1p55rem: 1.55rem;
    --size_1p6rem: 1.6rem;
    --size_1p65rem: 1.65rem;
    --size_1p7rem: 1.7rem;
    --size_1p75rem: 1.75rem;
    --size_1p8rem: 1.8rem;
    --size_1p85rem: 1.85rem;
    --size_1p9rem: 1.9rem;
    --size_1p95rem: 1.95rem;

    --size_2p0rem: 2.0rem;
    --size_2p05rem: 2.05rem;
    --size_2p1rem: 2.1rem;
    --size_2p15rem: 2.15rem;
    --size_2p2rem: 2.2rem;
    --size_2p25rem: 2.25rem;
    --size_2p3rem: 2.3rem;
    --size_2p35rem: 2.35rem;
    --size_2p4rem: 2.4rem;
    --size_2p45rem: 2.45rem;
    --size_2p5rem: 2.5rem;
    --size_2p55rem: 2.55rem;
    --size_2p6rem: 2.6rem;
    --size_2p65rem: 2.65rem;
    --size_2p7rem: 2.7rem;
    --size_2p75rem: 2.75rem;
    --size_2p8rem: 2.8rem;
    --size_2p85rem: 2.85rem;
    --size_2p9rem: 2.9rem;
    --size_2p95rem: 2.95rem;
    --size_3p0rem: 3.0rem;

    --size_3p05rem: 3.05rem;
    --size_3p1rem: 3.1rem;
    --size_3p15rem: 3.15rem;
    --size_3p2rem: 3.2rem;
    --size_3p25rem: 3.25rem;
    --size_3p3rem: 3.3rem;
    --size_3p35rem: 3.35rem;
    --size_3p4rem: 3.4rem;
    --size_3p45rem: 3.45rem;
    --size_3p5rem: 3.5rem;
    --size_3p55rem: 3.55rem;
    --size_3p6rem: 3.6rem;
    --size_3p65rem: 3.65rem;
    --size_3p7rem: 3.7rem;
    --size_3p75rem: 3.75rem;
    --size_3p8rem: 3.8rem;
    --size_3p85rem: 3.85rem;
    --size_3p9rem: 3.9rem;
    --size_3p95rem: 3.95rem;
    --size_4p0rem: 4.0rem;

    --size_4p05rem: 4.05rem;
    --size_4p1rem: 4.1rem;
    --size_4p15rem: 4.15rem;
    --size_4p2rem: 4.2rem;
    --size_4p25rem: 4.25rem;
    --size_4p3rem: 4.3rem;
    --size_4p35rem: 4.35rem;
    --size_4p4rem: 4.4rem;
    --size_4p45rem: 4.45rem;
    --size_4p5rem: 4.5rem;
    --size_4p55rem: 4.55rem;
    --size_4p6rem: 4.6rem;
    --size_4p65rem: 4.65rem;
    --size_4p7rem: 4.7rem;
    --size_4p75rem: 4.75rem;
    --size_4p8rem: 4.8rem;
    --size_4p85rem: 4.85rem;
    --size_4p9rem: 4.9rem;
    --size_4p95rem: 4.95rem;
    --size_5p0rem: 5.0rem;

    --size_5p05rem: 5.05rem;
    --size_5p1rem: 5.1rem;
    --size_5p15rem: 5.15rem;
    --size_5p2rem: 5.2rem;
    --size_5p25rem: 5.25rem;
    --size_5p3rem: 5.3rem;
    --size_5p35rem: 5.35rem;
    --size_5p4rem: 5.4rem;
    --size_5p45rem: 5.45rem;
    --size_5p5rem: 5.5rem;
    --size_5p55rem: 5.55rem;
    --size_5p6rem: 5.6rem;
    --size_5p65rem: 5.65rem;
    --size_5p7rem: 5.7rem;
    --size_5p75rem: 5.75rem;
    --size_5p8rem: 5.8rem;
    --size_5p85rem: 5.85rem;
    --size_5p9rem: 5.9rem;
    --size_5p95rem: 5.95rem;
    --size_6p0rem: 6.0rem;
   
   
   
    /* width and height size */
    --width_main: 70%;
    --width_medium: 75%;
  --width_small: 90%;
  --width_smaller: 95%;
  --width_full: 100%;
  --width_half: 50%;
  --width_100: 100%;
  --width_95: 95%;
  --width_90: 90%;
  --width_85: 85%;
  --width_80: 80%;
  --width_75: 75%;
  --width_70: 70%;
  --width_65: 65%;
  --width_60: 60%;
  --width_55: 55%;
  --width_50: 50%;
  --width_40: 40%;
  --width_45: 45%;
  --width_30: 30%;
  --width_35: 35%;
  --width_25: 25%;
  --width_20: 20%;
  --width_15: 15%;
  --width_10: 10%;
  --width_5: 5%;

  /* border radius px */
  --radius_1px: 1px;
  --radius_2px: 2px;
  --radius_3px: 3px;
  --radius_5px: 5px;
  --radius_6px: 6px;
  --radius_7px: 7px;
  --radius_8px: 8px;
  --radius_9px: 9px;
  --radius_10px: 10px;
  --radius_11px: 11px;
  --radius_12px: 12px;
  --radius_13px: 13px;
  --radius_14px: 14px;
  --radius_15px: 15px;
  --radius_16px: 16px;
  --radius_17px: 17px;
  --radius_18px: 18px;
  --radius_19px: 19px;
  --radius_20px: 20px;

  /* border radius percent */
  --radius_5p: 5%;
  --radius_10p: 10%;
  --radius_15p: 15%;
  --radius_20p: 20%;
  --radius_25p: 25%;
  --radius_30p: 30%;
  --radius_35p: 35%;
  --radius_40p: 40%;
  --radius_45p: 45%;
  --radius_50p: 50%;
  }
  /* html[data-theme=dark] {
    --color-fill: rgb(53, 54, 64);
    --color-text-base: rgb(233, 237, 241);
    --color-accent: rgb(255, 120, 200);
    --color-card: rgb(75, 76, 89);
    --color-card-muted: rgb(113, 85, 102);
    --color-border: rgb(134, 67, 107);
  } */
  /* colors 
  One: 
  */
  
  /* global */
  *,
  *::after,
  *::before{
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--text_family);
    text-decoration: none;
    list-style: none;
    color: var(--text_color);
    font: inherit;
    /* // user-select: none; */
  }
  ::-webkit-scrollbar{
    width: 0;
    height: 0;
  }
  /* ::selection{
    background: $main_color;
    color: $white_color;
  } */
  /* remove arrows on inputs */
  ::-webkit-outer-spin-button,
  ::-webkit-inner-spin-button{
    display: none;
  }
  html{
    font-size: var(--main_text_size);
    scroll-behavior: smooth;
    
  }
  
  h1{
    font-size: 3em;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  /* make images responsive */
  img, picture, video, svg{
    display: block;
    max-width: var(--width_100);
  }

  /* make inputs, and form elements  uinherit the fornts */
  input, textarea, button, select{
    font: inherit;
  }
  body{
    min-width: 100vw;
    min-height: 100vh;
    font-family: var(--text_family);
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: var(--body_color);
  }
  
  /* presest styles */
  /* flex box */
  /* flex justify align */
  .flex_center{
    display: flex;
    align-items: center;
  }
  
  .flex_center_center{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .flex_center_start{
    display: flex;
    align-items: start;
    justify-content: center;
  }
  
  .flex_between_center{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .flex_between_end{
    display: flex;
    align-items: end;
    justify-content: space-between;
  }
  .flex_between_start{
    display: flex;
    align-items: start;
    justify-content: space-between;
  }
  .flex_end_start{
    display: flex;
    align-items: start;
    justify-content: flex-end;
  }
  .flex_start{
    display: flex;
    align-items: start;
  }
  .flex_start_center{
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .flex_end_center{
    display: flex;
    align-items: center;
    justify-content: end;
  }
  .flex_start_start{
    display: flex;
    align-items: start;
    justify-content: start;
  }
  .flex_start_end{
    display: flex;
    align-items: end;
    justify-content: start;
  }
  .flex_ali_center{
    display: flex;
    align-items: center;
  }
  .flex_ali_start{
    display: flex;
    align-items: start;
  }
  .flex_ali_end{
    display: flex;
    align-items: end;
  }
  .flex_js_start{
    display: flex;
    justify-content: start;
  }
  .flex_js_center{
    display: flex;
    justify-content: center;
  }
  .flex_js_center{
    display: flex;
    justify-content: center;
  }
  .flex_js_between{
    display: flex;
    justify-content: space-between;
  }
  .flex_js_end{
    display: flex;
    justify-content: end;
  }
  .flex_column{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .flex_col{
    display: flex;
    flex-direction: column;
  }
  .flex_col_center_center{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .flex_col_center_start{
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
  }
  .flex_col_start_center{
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
  }
  
  /* grid */
  .grid{
    display: grid;
    grid-auto-flow: row;
  }
  .grid_class{
    display: grid;
  }
  .i_grid{
    display: inline grid;
    grid-auto-flow: row;
  }
  /* grid two columns auto rows*/
  .two_columns{
    grid-template-columns:  repeat(auto-fit, minmax(45%, 1fr));
  }
  .three_columns{
    grid-template-columns:  repeat(3, minmax(32%, 1fr));
  }
  .three_columns_fixed{
    grid-template-columns:  repeat(3, minmax(300px, 1fr));
    gap: 20px;
  
  }
  .three_columns_auto{
    grid-template-columns: repeat(3, 1fr);
    justify-content: space-between;
    gap: 20px;
  
  }
  
  
  /* buttons */
  
  .btn_bgless{
    cursor: pointer;
    outline: none;
    background: transparent;
  }
  .btn_borderless{
    cursor: pointer;
    outline: none;
    border: 0;
    cursor: pointer;
  }
  .btn_bdnbgless{
    cursor: pointer;
    outline: none;
    border: 0;
    cursor: pointer;
    background: transparent;
  }
  .btn_outline{
    cursor: pointer;
    outline: none;
    border: 1px solid var(--body_color);
    cursor: pointer;
    background: transparent;
  }
  .btn_filled{
    cursor: pointer;
    outline: none;
    background: var(--text_color);
  }
  .btn_circle{
    border-radius: 50%;
  }
  .btn_round_corners{
    border-radius: 10px;
  }
  .btn_round_radius{
   border-radius: 8px;
  }
  .btn_bdgless{
    cursor: pointer;
    outline: none;
    cursor: pointer;
    border: 0;
    background: transparent;
  }

  /* btn styles */
  .btn{
   
    text-align: center;
    font-weight: 500;
    font-size: var(--size_1p1em);
    color: var(--body_color);
    transition: all 0.35s ease;
    outline: none;
    cursor: pointer;
    background-color: var(--text_color);
    &.circular{
      border-radius: 50%
    }
   
    &.br_2{
      border-radius: 2px;
    }
    &.br_4{
      border-radius: 4px;
    }
    &.br_6{
      border-radius: 6px;
    }
    &.borderless{
      border: 0;
    }
    &.transparent{
      background: transparent;
    }
    &.hidden{
      opacity: 0;
      pointer-events: none;
    }
    &.visible{
      opacity: 1;
      pointer-events: initial;
    }
    &.outlined{
      border: 1px solid var(--text_color);
    }
    
  }