/* General Styles */

:root {
    --animation-duration: 20s;
    --animated-items-bx1: 3;
    --animated-items-bx2: 3;
    --animated-items-bx3: 3;
    --delay-constant: 1.5s;
    --header-height: 70px;
    --text-font-size-1: 6.563rem;
    --text-font-size-1b: clamp(2.7rem, 7vw, 6.563rem);
    --text-font-size-1a: clamp(2rem, 4vw + 1rem, 3.6rem);
    --text-font-size-2: 3.438rem;
    --text-font-size-3: 2.827rem;
    --text-font-size-4: 2.188rem; /* 35px */
    --text-font-size-4a: clamp(1rem, 2.2vw, 2.3rem);
    --text-font-size-4b: clamp(1.5rem, 6vw, 2.8rem);
    --text-font-size-5: 1.375rem;
    --text-font-size-6: 0.938rem;
    --text-font-size-6a: 1.1rem;
    --text-font-size-7: 1.5rem;
    --text-font-size-7a: clamp(1.3rem, 1.7vw, 1.5rem);
    --text-font-size-7b: clamp(0.9rem, 1.7vw, 1.5rem);
    --but-font-size-1: 3.438rem;
    --but-font-size-2: 2.188rem;
    --but-font-size-2a: clamp(1px, 4.7vw, 2.188rem);
    --text-font-size-8: 4.688rem;
    --text-font-size-8a: clamp(1.6rem, 5.5vw, 4.688rem);

    --line-height-1: 3rem; /* 48px */
    --line-height-2: 1.875rem; /* 30px */
    --line-height-3: 2.188rem; /* 35px */
    --font-family-1: "Libre Franklin", sans-serif;
    --font-w-200:200;
    /*--text-font-size-7: 20px;
    --text-font-size-8: 20px;
    --text-font-size-9: 20px;*/


    --color_0: 255, 255, 255;
    --color_1: 255, 255, 255;
    --color_2: 0, 0, 0;
    --color_3: 237, 28, 36;
    --color_4: 0, 136, 203;
    --color_5: 255, 203, 5;
    --color_6: 114, 114, 114;
    --color_7: 176, 176, 176;
    --color_8: 255, 255, 255;
    --color_9: 114, 114, 114;
    --color_10: 176, 176, 176;
    --color_11: 255, 255, 255;
    --color_12: 227, 227, 227;
    --color_13: 151, 151, 151;
    --color_14: 79, 79, 79;
    --color_15: 0, 0, 0;
    --color_16: 237, 255, 186;
    --color_17: 228, 255, 152;
    --color_18: 202, 255, 48;
    --color_19: 135, 170, 32;
    --color_20: 67, 85, 16;
    --color_21: 173, 171, 255;
    --color_22: 132, 129, 255;
    --color_23: 10, 3, 255;
    --color_24: 7, 2, 170;
    --color_25: 3, 1, 85;
    --color_26: 209, 219, 195;
    --color_27: 171, 184, 153;
    --color_28: 127, 148, 99;
    --color_29: 85, 99, 66;
    --color_30: 42, 49, 33;
    --color_31: 199, 211, 213;
    --color_32: 154, 169, 172;
    --color_33: 103, 126, 130;
    --color_34: 69, 84, 87;
    --color_35: 34, 42, 43;
    --color_36: 255, 255, 255;
    --color_37: 0, 0, 0;
    --color_38: 227, 227, 227;
    --color_39: 151, 151, 151;
    --color_40: 79, 79, 79;
    --color_41: 202, 255, 48;
    --color_42: 202, 255, 48;
    --color_43: 202, 255, 48;
    --color_44: 202, 255, 48;
    --color_45: 0, 0, 0;
    --color_46: 79, 79, 79;
    --color_47: 0, 0, 0;
    --color_48: 202, 255, 48;
    --color_49: 202, 255, 48;
    --color_50: 255, 255, 255;
    --color_51: 202, 255, 48;
    --color_52: 202, 255, 48;
    --color_53: 255, 255, 255;
    --color_54: 151, 151, 151;
    --color_55: 151, 151, 151;
    --color_56: 255, 255, 255;
    --color_57: 255, 255, 255;
    --color_58: 202, 255, 48;
    --color_59: 202, 255, 48;
    --color_60: 255, 255, 255;
    --color_61: 202, 255, 48;
    --color_62: 202, 255, 48;
    --color_63: 255, 255, 255;
    --color_64: 151, 151, 151;
    --color_65: 151, 151, 151;

    
    --wst-button-color-fill-primary: rgb(var(--color_48));
    --wst-button-color-border-primary: rgb(var(--color_49));
    --wst-button-color-text-primary: rgb(var(--color_50));
    --wst-button-color-fill-primary-hover: rgb(var(--color_51));
    --wst-button-color-border-primary-hover: rgb(var(--color_52));
    --wst-button-color-text-primary-hover: rgb(var(--color_53));
    --wst-button-color-fill-primary-disabled: rgb(var(--color_54));
    --wst-button-color-border-primary-disabled: rgb(var(--color_55));
    --wst-button-color-text-primary-disabled: rgb(var(--color_56));
    --wst-button-color-fill-secondary: rgb(var(--color_57));
    --wst-button-color-border-secondary: rgb(var(--color_58));
    --wst-button-color-text-secondary: rgb(var(--color_59));
    --wst-button-color-fill-secondary-hover: rgb(var(--color_60));
    --wst-button-color-border-secondary-hover: rgb(var(--color_61));
    --wst-button-color-text-secondary-hover: rgb(var(--color_62));
    --wst-button-color-fill-secondary-disabled: rgb(var(--color_63));
    --wst-button-color-border-secondary-disabled: rgb(var(--color_64));
    --wst-button-color-text-secondary-disabled: rgb(var(--color_65));
    --wst-color-fill-base-1: rgb(var(--color_36));
    --wst-color-fill-base-2: rgb(0, 0, 0);
    --wst-color-fill-base-shade-1: rgb(var(--color_38));
    --wst-color-fill-base-shade-2: rgb(var(--color_39));
    --wst-color-fill-base-shade-3: rgb(var(--color_40));
    --wst-color-fill-accent-1: rgb(var(--color_41));
    --wst-color-fill-accent-2: rgb(var(--color_42));
    --wst-color-fill-accent-3: rgb(var(--color_43));
    --wst-color-fill-accent-4: rgb(var(--color_44));
    --wst-color-fill-background-primary: rgb(var(--color_11));
    --wst-color-fill-background-secondary: rgb(var(--color_12));
    --wst-color-text-primary: rgb(var(--color_15));
    --wst-color-text-secondary: rgb(var(--color_14));
    --wst-color-action: rgb(202, 255, 48);
    --wst-color-disabled: rgb(var(--color_39));
    --wst-color-title: rgb(var(--color_45));
    --wst-color-subtitle: rgb(var(--color_46));
    --wst-color-line: rgb(var(--color_47));

    --wst-font-style-h2: var(--font_2);
    --wst-font-style-h3: var(--font_3);
    --wst-font-style-h4: var(--font_4);
    --wst-font-style-h5: var(--font_5);
    --wst-font-style-h6: var(--font_6);
    --wst-font-style-body-large: var(--font_7);
    --wst-font-style-body-medium: var(--font_8);
    --wst-font-style-body-small: var(--font_9);
    --wst-font-style-body-x-small: var(--font_10);

    --wst-color-custom-1: rgb(var(--color_13));
    --wst-color-custom-2: rgb(var(--color_16));
    --wst-color-custom-3: rgb(var(--color_17));
    --wst-color-custom-4: rgb(var(--color_19));
    --wst-color-custom-5: rgb(var(--color_20));
    --wst-color-custom-6: rgb(var(--color_21));
    --wst-color-custom-7: rgb(var(--color_22));
    --wst-color-custom-8: rgb(10, 3, 255);
    --wst-color-custom-9: rgb(var(--color_24));
    --wst-color-custom-10: rgb(var(--color_25));
    --wst-color-custom-11: rgb(var(--color_26));
    --wst-color-custom-12: rgb(var(--color_27));
    --wst-color-custom-13: rgb(var(--color_28));
    --wst-color-custom-14: rgb(var(--color_29));
    --wst-color-custom-15: rgb(var(--color_30));
    --wst-color-custom-16: rgb(var(--color_31));
    --wst-color-custom-17: rgb(var(--color_32));
    --wst-color-custom-18: rgb(var(--color_33));
    --wst-color-custom-19: rgb(var(--color_34));
    --wst-color-custom-20: rgb(var(--color_35));
    --wst-color-custom-21: rgb(255, 255, 255);
}
  h3 {
    font-family: var(--font-family-1);
  }
  
  html {font-size: 100%;} /* 16px */
  
  h3 {
    font-size: var(--text-font-size-3); /* 45.28px */
    font-weight: var(--font-w-200);
    }
  
    .my-body {
        margin: 0;
        font-family: var(--font-family-1);
        font-optical-sizing: auto;
        font-weight: normal;
        font-style: normal;
        box-sizing: border-box;
        background-color: var(--wst-color-fill-base-2);
        color: var(--wst-color-custom-21);
        overflow-x: hidden;
        width: 100vw;
        height: 100vh;
        /* display: flex; */
        /* flex-direction: column; */
    }
  .no-scroll{
            overflow: hidden;
  }
  
  .padding-left-right{
      padding-left:60px;
      padding-right: 60px;
      box-sizing: border-box;
  }
  .container1 {
      display: grid;
      grid-template-columns: auto auto;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
       /*padding: 0 60px;
     position: relative;*/
  }

  .showNav{
        display: grid !important;
  }
  .slideNav{
        /* position:absolute;
        display: grid; */
        left: 0 !important;
  }
  .container10{
      display: grid;
      grid-template-columns: 33.33% 33.33% 33.33%;
      box-sizing: border-box;
  }
  
  .container12{
      font-size:12px;
      padding-left: 50px;
      border-left:solid #fff 1px;
      box-sizing: border-box;
  }
  .container13{
      display: flex;
      justify-content: right;
      /* text-align: right; */
      align-items: center;
  }
  .container17{
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 0, 60px; */
  }
  .containerMobMenu{
      display: none;
      grid-template:15% 70% 15%/auto;
      background-color: var(--wst-color-fill-base-2);
      position: absolute;
      top:0;
      left:20%;
      width:100%;
      height:100vh;
      overflow:hidden;
      box-sizing:border-box;
      transition: all 0.5s ease;
  }
  .mob-menu-foot{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    /* align-items:center; */
  }
  .soc-mob-foot{
      font-size:2.4rem; 
      align-items: center;
      padding-left: 10px;
  }
  .soc-mob-foot a{
    font-size:2.4rem; 
    color:#fff; 
  }
  .but-mob-foot{
       padding-left: 3svw;
       align-items: center;
  }
  .mobNav{
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
  }
  .contaner-footer{
      padding: 20px 0;
      display: grid;
      grid-template: auto / 65% 35%;
      box-sizing: border-box;
  }
  .container17 .logo{
    color: var(--wst-color-action);
    cursor: pointer;
  }
  
  
  /* Header Styles */
  .my-header {
      position: sticky;
      top: calc(var(--header-height) * -1);
      left: 0; 
      width: 100%;
      height: var(--header-height);
      z-index: 100;
      background-color: transparent;
      padding: 20px 0;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      transition: all 0.3s;
  }
  
  .logo {
      font-size: 1.5rem;
      font-weight: bold;
      flex-grow: 1;
  }
  

  /*the second slider*/
  

  /*the third slider*/

  nav {
      position: relative;
      margin-right: 20px;
  }
  #menu-icon{
    display: none;
  }
  .apps-icon{
      font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
      font-size:60px;
  }

  nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      flex-grow: 2;
  }
  
  nav li {
      margin: 0 15px;
  }
  
  nav a {
      color: var(--wst-color-custom-21);;
      text-decoration: none;
      font-size: var(--text-font-size-5);
  }
  .mobNav ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
  }
  .mobNav li {
    width:fit-content;
    margin: auto;
    font-size: 2rem;
  }
  .mobNav a {
    text-decoration: none;
    color: #fff;
  }
  .mobNav a:hover{
    color: var(--wst-color-action);
  }
  .mobNav a:active{
    color: var(--wst-color-action);
  }

  .menuClose{
      font-size: 30px !important;
      cursor: grab;
      margin-left:auto;
      font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24;
  }
  
  .instagram a {
      color: var(--wst-color-custom-21);;
      font-size: var(--text-font-size-5);
  }
  
  /* hero section Styles */
  
  
  /* Hi Button Styles */
  .text-style-3{
      font-size: var(--text-font-size-5);
      line-height: var(--line-height-3);
      text-transform: uppercase;
      font-weight: normal;
      color: var(--wst-color-action);
  }
  /*
  .bg-cont:hover{
    clip-path: circle(300px);
    background-color:var(--wst-color-custom-8);
  }
  */
  .btn3{
    font-size: clamp(1rem, 3.6vw, 2rem);
    padding: 15px 40px;
    border-radius: 50px;
    background: transparent;
    color: #fff;
    border: 2px solid var(--wst-color-action);
    cursor: pointer;
  }
  #section-11{
    background-color: rgb(33, 33, 33);
  }
  
  /* 
  ////////////////////////////////////////////////////////////////////
  ////////////////////////////////////////////////////////////////////
  */
  /* Utilities */
  .flex-cont{
    display:flex;
  }

/* custom cursor */

/* Example: Different cursor style on hover over links */

/* Example: Different cursor style on mousedown */

  /* Responsiveness */
  @media (max-width:1000px) {
      nav{
            position:absolute;
            display: none;
      }
      #menu-icon{
        display: inline-block;
        font-size: 3.75em;
        cursor: pointer;
      }
      .container10{
        display: grid;
        grid-template-columns: 33.33% 33.33% 33.33%;
        width:65%;
        box-sizing: border-box;
      }
      .instagram{
          text-align: center;
          margin-left: 25px;
      }
      .instagram a{
         font-size: 3.75em;
      }
        .container17{
            /* padding: 30px 0px; */
        }
        .contaner-footer{
            padding: 20px 0;
            display: grid;
            grid-template: auto auto/ auto;
            box-sizing: border-box;
        }
        .container10{
            display: grid;
            grid-template-columns: 33.33% 33.33% 33.33%;
            box-sizing: border-box;
            width:100%;
        }
        .container12{
            font-size:12px;
            padding-left: 0px;
            border-left:none;
            box-sizing: border-box;
        }

    }

    /* Responsiveness */
    @media (max-width:750px) {
        .padding-left-right{
            padding-left:35px;
            padding-right: 35px;
            box-sizing: border-box;
        }

    }

  /* Responsiveness */
  @media (max-width:700px) {
    .padding-left-right{
        padding-left: 35px;
        padding-right: 35px;
        box-sizing:border-box;
    }
    .contaner-footer{
        padding: 20px 0;
        display: grid;
        grid-template: auto auto/ auto;
        box-sizing: border-box;
    }
    .container10{
        display: grid;
        grid-template: auto auto auto / auto;
        box-sizing: border-box;
        width:100%;
    }
    .container12{
        font-size:12px;
        padding-left: 0px;
        border-left:none;
        box-sizing: border-box;
    }

    
}