@import url(landscape.css);
@import url(landscape_1300.css);
@import url(landscape_1000.css);
@import url(landscape_800.css);
@import url(portrait.css);
@import url(portrait_700.css);
@import url(portrait_500.css);

html{scroll-behavior: smooth;}

body{font-family: "Poppins", sans-serif; background-color: ghostwhite;}

*{margin: 0; padding: 0;}



/* =================================================== LOADER */
    #loader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #172431;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }

    #loader.hidden {
      opacity: 0;
      visibility: hidden;
      display: none;
    }

    .loader-circle {
      position: relative;
      width: 120px;
      height: 120px;
    }

    .loader-circle svg circle {
      fill: none;
      stroke-width: 10;
      stroke: #ddd;
    }

    .loader-circle svg .progress {
      fill: none;
      stroke-width: 10;
      stroke: #F0F27F;
      stroke-linecap: round;
      stroke-dasharray: 345; /* 2πr con r=55 */
      stroke-dashoffset: 345;
      transition: stroke-dashoffset 0.3s ease;
    }

    .loader-circle img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60px;
      height: 60px;
      transform: translate(-50%, -50%);
    }