html {
                font-family: Helvetica;
                min-height: 100dvh;
              }
              
              body {
                margin: 0;
                min-height: 100vh;
                background-image: url(images/charger.webp);
                background-position: center center, left bottom, 0 0;
                background-repeat: no-repeat, repeat-x, no-repeat;
                background-attachment: fixed, scroll, fixed;
                background-size: cover;
                padding-top: 50px;
                padding-bottom: 10px;
              }
              
              .wrapper {
                display: grid;
                max-width: 768px;
                border-radius: 20px;
                background: #2d4e63;
                margin-top: 20px;
                margin-bottom: 20px;
              }
              header {
                display: block;
                border-radius: 10px;
                border: 2px solid rgb(49, 50, 85);
                margin: 20px;
                box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
              }
              
              header h1 {
                clear: left;
                margin: 310px 0;
                color: #a90505;
                line-height: 2;
                text-align: center;
                letter-spacing: 4px;
                background: linear-gradient(to bottom, #aeaadc 0%, #4f3a89 100%);
                border-radius: 10px;
              }
              section {
                margin: 10px;
                border-radius: 20px;
                padding: 15px;
                box-shadow: 0 4px 4px rgba(1, 137, 235, 0.443);
                background: linear-gradient(to bottom, #817de8 0%, #022898 100%); 
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                text-align: center;
              }
              
              h2 {
                margin: 15px 0 10px;
                text-align: center;
                color: #fff;
              }
              
              p {
                margin: 10px 0;
                line-height: 1.8;
                max-width: 80ch;
                color:#fff;
              }
              
              img {
                width: 100%;
              }
              
              footer {
                display: flex;
                gap: 5px;
                margin: 0 15px 10px;
              }
              
              footer a {
                color: white;
                text-decoration: none;
                line-height: 2;
              }
              
              footer a:first-child {
                margin-right: auto;
              }
              
              footer a[href^="javascript"] {
                position: relative;
                color: #000;
                background-color: #fff1f1;
                border-radius: 3px;
                padding: 0 10px;
              }
              /*phone style */
  @media (min-width: 0px) {
    .flex-card {
      width: calc(100% - 0px);
    margin: 20px;
    position: relative;
    overflow: hidden;
    height: 175px; 
    }
    .wrapper {
      margin: 20px auto;
    }
  
    .callout{
      margin: 20px auto;
    }
    .content-wrapper {
      display: flex;
      align-items: flex-start;
    }
  
    .content-wrapper p {
      flex: 2;
    }
  
    header {
      height: 400px;
      background: url(images/logo.webp) no-repeat center center / cover;
    }
  
    header h1 {
      font-size: 2.75em;
      line-height: 2;
      align-self: flex-end;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
  }
  .nav-main-menu-toggle {
    display: flex;
  }
  
    }
  /* Tablet styles */
  @media (min-width: 768px) {
    .flex-card {
      width: calc(33% - 0px);
    margin: 30px;
    position: relative;
    overflow: hidden;
    height: 300px; 
    }

    .wrapper {
      margin: 20px auto;
    }

    .callout{
      margin: 20px auto;
    }
    .content-wrapper {
      display: flex;
      align-items: flex-start;
    }
  
    .content-wrapper p {
      flex: 2;
    }
  
    header {
      height: 400px;
      background: url(images/logo.webp) no-repeat center center / cover;
    }
  
    header h1 {
      font-size: 2.75em;
      line-height: 2;
      align-self: flex-end;
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
  }
  
    }
  
  /* Desktop styles */
  @media (min-width: 1024px) {
    .flex-card {
      width: calc(33% - -30px);
    margin: 10px;
    position: relative;
    overflow: hidden;
    height: 300px; 
    }
      }
  .btn {
    background-color: rgb(83, 150, 221);
    border: none;
    color: rgb(0, 0, 0);
    padding: 1px 12px;
    font-size: 16px;
    cursor: pointer;
  }

              .btn {
                background-color: rgb(83, 150, 221);
                border: none;
                color: rgb(0, 0, 0);
                padding: 1px 12px;
                font-size: 16px;
                cursor: pointer;
              }
              
              .btn:hover {
                background-color: RoyalBlue;
              }
              /* Button Model S */
              .btn-model-s {
                all: unset;
                width: 120px;
                height: 40px;
                font-size: 16px;
                background: transparent;
                border: none;
                position: relative;
                color: #f0f0f0;
                cursor: pointer;
                z-index: 1;
                padding: 10px 20px;
                margin: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                white-space: nowrap;
                user-select: none;
                -webkit-user-select: none;
                touch-action: manipulation;
              }
              .button-small {
                padding: 5px 10px;
                font-size: 12px;
              }
              
              .button-large {
                padding: 15px 30px;
                font-size: 20px;
              }
              .btn-model-s::after,
              .btn-model-s::before {
                content: '';
                position: absolute;
                bottom: 0;
                right: 0;
                z-index: -99999;
                transition: all .4s;
              }
              
              .btn-model-s::before {
                transform: translate(0%, 0%);
                width: 100%;
                height: 100%;
                background: #28282d;
                border-radius: 10px;
              }
              
              .btn-model-s:after {
                transform: translate(10px, 10px);
                width: 45px;
                height: 45px;
                background: #007bff96; 
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border-radius: 50px;
              }
              
              .btn-model-s:hover::before {
                transform: translate(5%, 20%);
                width: 110%;
                height: 110%;
              }
              
              .btn-model-s:hover::after {
                border-radius: 10px;
                transform: translate(0, 0);
                width: 100%;
                height: 100%;
              }
              
              .btn-model-s:active::after {
                transition: 0s;
                transform: translate(0, 5%);
              }
              
              /* Button Model 3 */
              .btn-model-3 {
                --color: #0bf8cd;
                --color2: rgb(0, 0, 0);
                padding: 0.8em 1.75em;
                margin: 10px;
                background-color: grey;
                border-radius: 6px;
                border: 1px solid var(--color);
                transition: .5s;
                position: relative;
                overflow: hidden;
                cursor: pointer;
                z-index: 1;
                font-weight: 300;
                font-family: 'helvetica', sans-serif;
                text-transform: uppercase;
              }
              
              .btn-model-3::after,
              .btn-model-3::before {
                content: '';
                display: block;
                height: 100%;
                width: 100%;
                transform: skew(90deg) translate(-50%, -50%);
                position: absolute;
                inset: 50%;
                left: 25%;
                z-index: -1;
                transition: .5s ease-out;
                background-color: var(--color);
              }
              
              .btn-model-3::before {
                top: -50%;
                left: -25%;
                transform: skew(90deg) rotate(180deg) translate(-50%, -50%);
              }
              
              .btn-model-3:hover::before {
                transform: skew(45deg) rotate(180deg) translate(-50%, -50%);
              }
              
              .btn-model-3:hover::after {
                transform: skew(45deg) translate(-50%, -50%);
              }
              
              .btn-model-3:hover {
                color: var(--color2);
              }
               
              .btn-model-3:active {
                filter: brightness(.7);
                transform: scale(.98);
              }
              
              /* Button Model Y */
              .btn-model-y {
                display: inline-block;
                background-color: #50575e; 
                color: white;
                text-align: center;
                margin: 10px;
                text-decoration: none;
                font-size: 16px;
                cursor: pointer;
                border-radius: 5px;
                border: none;
                transition-duration: 0.4s;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
              }
              
              .btn-model-y:hover {
                background-color: #35ded8; 
                color: black;
              }
              
              .btn-model-y:active {
                background-color: #004080; 
                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
              }
              
              
              /* Button Model X */
              .btn-model-x {
                margin: 10px;
                border: none;
                border-radius: 5px;
                font-weight: bold;
                letter-spacing: 3px;
                background: #DCFFFC;
                text-transform: uppercase;
                color: #088178;
                transition: all 1000ms;
                font-size: 15px;
                position: relative;
                overflow: hidden;
                outline: 2px solid #088178;
              }
              
              .btn-model-x:hover {
                color: #DCFFFC;
                transform: scale(1);
                outline: 2px solid #088178;
                box-shadow: 4px 5px 17px -4px #088178;
              }
              
              .btn-model-x::before {
                content: "";
                position: absolute;
                left: -50px;
                top: 0;
                width: 0;
                height: 100%;
                background-color: #088178;
                transform: skewX(30deg);
                z-index: -1;
                transition: width 1000ms;
              }
              
              .btn-model-x-warning {
                background-color: #b61818;
                color: #DCFFFC;
                outline: 2px solid #801717;
              }
              
              .btn-model-x-warning:hover {
                color: #DCFFFC;
                outline: 2px solid #b61818;
                box-shadow: 4px 5px 17px -4px #b61818;
              }
              
              .btn-model-x-warning::before {
                background-color: #801717;
              }
              
              .btn-model-x:hover::before {
                width: 250%;
              }
              
              .btn-model-x:active {
                transform: scale(0.9);
              }
              .navbar {
                overflow: hidden;
                height: 60px;
                left: 0;
                border-radius: 6px;
                background-color: #333;
                font-family: Arial;
                float: left;
              }
            
              .navbar a {
                font-size: 16px;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
              }
              
            
              .dropdown .dropbtn {
                font-size: 16px; 
                border: none;
                outline: none;
                color: white;
                padding: 14px 16px;
                background-color: inherit;
                font-family: inherit; 
              }
              
              .navbar a:hover, .dropdown:hover .dropbtn {
                background-color: rgb(91, 126, 156);
              }
              
              .dropdown-content {
                display: none;
                position: absolute;
                background-color: #b8c4dc;
                min-width: 160px;
                border-radius: 6px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
              }
              
              .dropdown-content a {
                color: black;
                border: .5px solid black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
              }
              
            
              .dropdown-content a:hover {
                background-color: #ddd;
              }
             
              .dropdown:hover .dropdown-content {
                display: block;
              }            
              .flex-wrapper {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .flex-card {
                width: calc(33% - -30px);
                margin: 10px;
                position: relative;
                overflow: hidden;
                height: 300px; 
            }
            
            .flex-card img {
                display: block;
                background-color: #0000006b;
                padding: 5px;
                width: 100%;
                height: auto;
                transition: transform 0.2s;
            }
            
            .flex-card:hover img {
                transform: scale(1.1) rotate(-1deg); 
            }
            
            .flex-card .content {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                background-color: rgba(0, 0, 0, 0.7); 
                color: white;
                padding: 10px;
                transform: translateY(100%);
                transition: transform 0.5s;
            }
            
            .flex-card:hover .content {
                transform: translateY(0);
            }
            
            .flex-card h2 {
                margin: 0;
                font-size: 18px;
            }
            
            .flex-card p {
                margin: 5px 0;
                font-size: 14px;
            }