@font-face {
    font-family: 'Time';
    src: url('./Time.ttf');
}

@media (min-width:320px) and (max-width:768px) {    
    *{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Time', sans-serif;
    }
    
    body{
        display: flex;
        flex-direction: column;
        padding: 0;
        background-color: #202020;
        background: url('./Back.jpg');
        background-position: center;
        background-size: cover;
        overflow: hidden;
    }

    .container{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;

    }
    
    .zemodiv{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .zemoimg img{
        width: 256px;
    }

    .zemotext{
        color: #FECA22;
        font-size: 24px;
        font-weight: bold;
        margin-top: 20px;
        letter-spacing: 4px;
    }

    .footer{
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 64px;
        width: 100%;
        height: 72px;
        background-color: #FECA22;
        color: #202020;
    }

    .phone{
        display: flex;
        align-items: center;
        font-size: 24px;
        letter-spacing: 4px;
    }
}

@media (min-width:769px){

    *{
        box-sizing: border-box;
        font-family: 'Time', sans-serif;
        margin: 0;
        padding: 0;
    }
    
    body{
        display: flex;
        flex-direction: column;
        padding: 0;
        background-color: #202020;
        background: url('./Back.jpg');
        background-position: center;
        background-size: cover;
        overflow: hidden;
    }

    .container{
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1039%26quot%3b)' fill='none'%3e%3cpath d='M1155.589%2c703.161C1207.192%2c700.356%2c1247.667%2c663.877%2c1273.194%2c618.943C1298.353%2c574.656%2c1310.386%2c520.478%2c1284.185%2c476.798C1258.559%2c434.076%2c1205.398%2c421.911%2c1155.589%2c422.881C1107.797%2c423.812%2c1062.154%2c442.04%2c1035.387%2c481.644C1004.782%2c526.926%2c987.471%2c585.019%2c1013.538%2c633.057C1040.53%2c682.8%2c1099.078%2c706.233%2c1155.589%2c703.161' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M323.454%2c602.505C355.164%2c604.47%2c385.054%2c584.588%2c399.4%2c556.24C412.606%2c530.145%2c403.122%2c500.158%2c387.884%2c475.195C373.427%2c451.512%2c351.195%2c431.227%2c323.454%2c431.826C296.499%2c432.408%2c276.264%2c454.038%2c263.672%2c477.878C252.013%2c499.953%2c251.435%2c525.231%2c262.232%2c547.74C274.925%2c574.2%2c294.163%2c600.69%2c323.454%2c602.505' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1253.725%2c301.968C1299.708%2c302.134%2c1343.832%2c278.766%2c1365.543%2c238.231C1386.226%2c199.615%2c1374.407%2c154.572%2c1353.205%2c116.239C1331.112%2c76.295%2c1299.37%2c35.641%2c1253.725%2c36.062C1208.529%2c36.479%2c1179.106%2c78.414%2c1157.373%2c118.044C1136.722%2c155.701%2c1123.364%2c199.387%2c1143.294%2c237.431C1164.5%2c277.91%2c1208.028%2c301.803%2c1253.725%2c301.968' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M967.62%2c402.044C1008.605%2c399.884%2c1031.209%2c358.927%2c1050.9%2c322.917C1069.472%2c288.955%2c1087.609%2c250.235%2c1069.279%2c216.142C1050.251%2c180.75%2c1007.801%2c168.378%2c967.62%2c168.018C926.672%2c167.651%2c884.023%2c179.297%2c862.755%2c214.291C840.788%2c250.434%2c846.984%2c295.651%2c867.608%2c332.577C888.822%2c370.559%2c924.175%2c404.334%2c967.62%2c402.044' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M971.94 383.52 a130.55 130.55 0 1 0 261.1 0 a130.55 130.55 0 1 0 -261.1 0z' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M109.3 362.1 a111.86 111.86 0 1 0 223.72 0 a111.86 111.86 0 1 0 -223.72 0z' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M358.78 433.99 a111.4 111.4 0 1 0 222.8 0 a111.4 111.4 0 1 0 -222.8 0z' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M305.13 118.17 a95.61 95.61 0 1 0 191.22 0 a95.61 95.61 0 1 0 -191.22 0z' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M473.616%2c249.255C528.995%2c247.197%2c579.372%2c216.399%2c605.433%2c167.492C630.066%2c121.264%2c623.435%2c65.306%2c595.116%2c21.24C569.039%2c-19.337%2c521.747%2c-34.47%2c473.616%2c-37.624C417.291%2c-41.314%2c353.24%2c-43.058%2c321.009%2c3.281C285.369%2c54.521%2c290.756%2c124.927%2c323.661%2c177.965C354.934%2c228.372%2c414.337%2c251.458%2c473.616%2c249.255' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M967.6 500.65 a148.32 148.32 0 1 0 296.64 0 a148.32 148.32 0 1 0 -296.64 0z' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M135.8 34.6 a141.78 141.78 0 1 0 283.56 0 a141.78 141.78 0 1 0 -283.56 0z' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1319.348%2c521.522C1356.344%2c521.367%2c1395.623%2c512.717%2c1414.633%2c480.978C1434.057%2c448.547%2c1427.982%2c406.79%2c1406.835%2c375.455C1387.953%2c347.477%2c1353.073%2c341.175%2c1319.348%2c339.79C1281.982%2c338.256%2c1239.514%2c336.81%2c1218.467%2c367.722C1195.518%2c401.428%2c1200.307%2c447.684%2c1222.672%2c481.781C1243.153%2c513.006%2c1282.005%2c521.678%2c1319.348%2c521.522' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M824.324%2c510.21C847.355%2c510.512%2c866.924%2c495.052%2c878.373%2c475.066C889.749%2c455.209%2c893.507%2c430.313%2c881.12%2c411.07C869.478%2c392.984%2c845.819%2c390.322%2c824.324%2c391.104C804.525%2c391.824%2c784.769%2c398.161%2c774.263%2c414.958C763.135%2c432.751%2c762.916%2c455.101%2c772.679%2c473.678C783.193%2c493.683%2c801.726%2c509.913%2c824.324%2c510.21' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M520.332%2c605.084C559.235%2c603.428%2c590.298%2c577.751%2c611.195%2c544.895C634.19%2c508.741%2c652.382%2c465.555%2c633.553%2c427.067C612.825%2c384.698%2c567.359%2c355.533%2c520.332%2c359.166C477.548%2c362.471%2c454.3%2c404.78%2c433.832%2c442.495C414.688%2c477.77%2c396.155%2c517.812%2c415.006%2c553.245C434.704%2c590.271%2c478.43%2c606.867%2c520.332%2c605.084' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M139.564%2c308.535C158.066%2c307.719%2c171.113%2c292.585%2c180.34%2c276.527C189.525%2c260.544%2c196.496%2c241.402%2c187.333%2c225.406C178.133%2c209.344%2c158.074%2c205.442%2c139.564%2c205.343C120.829%2c205.243%2c100.922%2c209.061%2c90.902%2c224.891C80.289%2c241.658%2c82.062%2c263.27%2c92.041%2c280.422C101.96%2c297.472%2c119.857%2c309.404%2c139.564%2c308.535' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M-37.189%2c61.898C-20.044%2c62.31%2c-4.735%2c51.39%2c3.425%2c36.306C11.204%2c21.925%2c8.915%2c5.1%2c1.387%2c-9.414C-6.919%2c-25.428%2c-19.15%2c-41.801%2c-37.189%2c-41.994C-55.44%2c-42.189%2c-69.206%2c-26.653%2c-77.223%2c-10.256C-84.248%2c4.112%2c-82.318%2c20.448%2c-74.558%2c34.433C-66.519%2c48.921%2c-53.753%2c61.5%2c-37.189%2c61.898' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M1075.3 4.84 a150.55 150.55 0 1 0 301.1 0 a150.55 150.55 0 1 0 -301.1 0z' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M487.632%2c307.062C522.489%2c306.137%2c552.439%2c283.757%2c568.903%2c253.02C584.452%2c223.992%2c583.188%2c188.939%2c565.928%2c160.895C549.47%2c134.155%2c519.031%2c121.039%2c487.632%2c120.972C456.102%2c120.904%2c425.983%2c134.151%2c408.754%2c160.558C389.715%2c189.738%2c382.01%2c226.866%2c398.527%2c257.544C415.792%2c289.612%2c451.225%2c308.029%2c487.632%2c307.062' fill='rgba(254%2c 202%2c 34%2c 0.13)' class='triangle-float1'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1039'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");     */
    
    }

    .zemodiv{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .zemoimg img{
        min-width: 300px;
        max-width: 456px;
    }
    
    .zemotext{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: #FECA22;
        font-size: 51px;
        margin-top: 20px;
        letter-spacing: 4px;
    }

    .footer{
        position: absolute;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 64px;
        width: 100%;
        height: 72px;
        background-color: #FECA22;
        color: #202020;
    }

    .phone{
        display: flex;
        align-items: center;
        font-size: 42px;
        letter-spacing: 4px;
    }
}  

  /* HTML: <div class="loader"></div> */
.loader {
    text-shadow: 0px 0px 0px #FECA22;
    animation: l1 1s infinite;
  }
  @keyframes l1 {
      100% {text-shadow: 0px 0px 50px #fecb2200}
  }

  .glowing {
    z-index: -20;
    position: absolute;
    min-width: 700px;
    top: 0;
    left: 0;
    height: 550px;
    margin: -150px;
    transform-origin: right;
    animation: colorChange 5s linear infinite;
  }
  
  .glowing:nth-child(even) {
    transform-origin: left;
  }
  
  @keyframes colorChange {
    0% {
      /* filter: hue-rotate(0deg); */
      transform: rotate(0deg);
    }
    100% {
      /* filter: hue-rotate(360deg); */
      transform: rotate(360deg);
    }
  }
  
  .glowing span {
    position: absolute;
    top: calc(80px * var(--i));
    left: calc(80px * var(--i));
    bottom: calc(80px * var(--i));
    right: calc(80px * var(--i));
  }
  
  .glowing span::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -8px;
    width: 15px;
    height: 15px;
    background: #f00;
    border-radius: 50%;
  }
  
  .glowing span:nth-child(3n + 1)::before {
    background: #FECA22;
    box-shadow: 0 0 20px #FECA22,
      0 0 40px #FECA22,
      0 0 60px #FECA22,
      0 0 80px #FECA22,
      0 0 0 8px rgba(255, 230, 0, 0.1);
  }
  
  .glowing span:nth-child(3n + 2)::before {
    background: #FECA22;
    box-shadow: 0 0 20px #FECA22,
      0 0 40px #FECA22,
      0 0 60px #FECA22,
      0 0 80px #FECA22,
      0 0 0 8px rgba(255, 230, 0, 0.1);
  }
  
  .glowing span:nth-child(3n + 3)::before {
    background: #FECA22;
    box-shadow: 0 0 20px #FECA22,
      0 0 40px #FECA22,
      0 0 60px #FECA22,
      0 0 80px #FECA22,
      0 0 0 8px rgba(255, 230, 0, 0.1);
  }
  
  .glowing span:nth-child(3n + 1) {
    animation: animate 10s alternate infinite;
  }
  
  .glowing span:nth-child(3n + 2) {
    animation: animate-reverse 12s alternate infinite;
  }
  
  .glowing span:nth-child(3n + 3) {
    animation: animate 9s alternate infinite; 
  }
  
  @keyframes animate {
    0% {
      transform: rotate(180deg);
    }
    50% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes animate-reverse {
    0% {
      transform: rotate(360deg);
    }
    
    50% {
      transform: rotate(180deg);
    }
    
    100% {
      transform: rotate(0deg);
    }
  }