/* -----------------------
   Desktop
----------------------- */
@media only screen and (max-width: 2561px) {
    .mobile {
    display: none;
    }  
}


/* -----------------------
   Tablet
----------------------- */

@media (max-width: 1199px) {
    .mobile {
    display: none;
    }  
}


/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px){
  
    /* INDEX */
    
    .website{
    display: none;
    }
    
    
    .mobile {
    display: block;
    width: 100vw;
    height: 100%;
    font-size: 78%;
    color: white; 
    }
    
    #mobile-about{
    height: 32vh;
    width: 100%;
    padding-top: 12%;
    color: black; 
    }
    
    #mobile-about h3{
    line-height: .8;
    margin-top: 10px;
    }
    
    #mobile-about img{
    height: 16vh;
    }
    
    .mobile-navigation {
      width: 100%;
      height: 92vh;
      display: grid;
      gap: 3%;
      padding: 4.5%;
      grid-template-rows: repeat(5, 1fr);
    }

    #mobile-button {
      position: relative; /* needed for absolute circle */
      width: 100%;
      border: none;          /* removes actual border */
      outline: none;         /* removes focus outline */
      border-radius: 12px; /* rounded corners */
      background: #f5f5f5;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;         /* vertically centers content */
      justify-content: flex-start; /* aligns content to the left */
      padding-left: 50px;          /* space for the circle */
    -webkit-animation-delay: .4s;
    }

    #mobile-button1 {
      color: white;
      position: relative; /* needed for absolute circle */
      width: 100%;
      border: none;          /* removes actual border */
      outline: none;         /* removes focus outline */
      border-radius: 12px; /* rounded corners */
      background: #045DED;
      background-image: url("../images/zoom_clips_mobile.png");
      background-size: cover;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;         /* vertically centers content */
      justify-content: flex-start; /* aligns content to the left */
      padding-left: 13%;          /* space for the circle */
    -webkit-animation-delay: .3s;
    }
    
    #mobile-button2 {
      color: white;
      position: relative; /* needed for absolute circle */
      width: 100%;
      border: none;          /* removes actual border */
      outline: none;         /* removes focus outline */
      border-radius: 12px; /* rounded corners */
      background: #045DED;
      background-image: url("../images/facebook_navigation_mobile.png");
      background-size: cover;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;         /* vertically centers content */
      justify-content: flex-start; /* aligns content to the left */
      padding-left: 13%;          /* space for the circle */
    -webkit-animation-delay: .4s;
    }

    #mobile-button3 {
      color: black;
      position: relative; /* needed for absolute circle */
      width: 100%;
      border: none;          /* removes actual border */
      outline: none;         /* removes focus outline */
      border-radius: 12px; /* rounded corners */
      background: #F3F3F3;
      background-image: url("../images/facebook_design_mobile.png");
      background-size: cover;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;         /* vertically centers content */
      justify-content: flex-start; /* aligns content to the left */
      padding-left: 13%;          /* space for the circle */
    -webkit-animation-delay: .5s;
    }
    
    #mobile-button4 {
      color: black;
      position: relative; /* needed for absolute circle */
      width: 100%;
      border: none;          /* removes actual border */
      outline: none;         /* removes focus outline */
      border-radius: 12px; /* rounded corners */
      background: #f5f5f5;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;         /* vertically centers content */
      justify-content: flex-start; /* aligns content to the left */
      padding-left: 13%;          /* space for the circle */
    -webkit-animation-delay: .6s;
    }
    
    #mobile-button5 {
      color: black;
      position: relative; /* needed for absolute circle */
      width: 100%;
      border: none;          /* removes actual border */
      outline: none;         /* removes focus outline */
      border-radius: 12px; /* rounded corners */
      background: #f5f5f5;
      transition: background 0.2s ease;
      display: flex;
      align-items: center;         /* vertically centers content */
      justify-content: flex-start; /* aligns content to the left */
      padding-left: 13%;          /* space for the circle */
    -webkit-animation-delay: .7s;
    }
    
    /* Circle styling */
    .button-circle {
      position: absolute;
      left: 0; /* we’ll offset by half the width */
      top: 30%;                 /* vertical center */
      transform: translateX(-25%); /* offset by 50% of the circle width */
      height: 40%; /* 45% of button height */
      aspect-ratio: 1 / 1; /* make it a perfect circle */
      background-color: #000;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 20px;
}
    
    .button-circle1 {
      position: absolute;
      left: 0; /* we’ll offset by half the width */
      top: 30%;                 /* vertical center */
      transform: translateX(-25%); /* offset by 50% of the circle width */
      height: 40%; /* 45% of button height */
      aspect-ratio: 1 / 1; /* make it a perfect circle */
      background-color: #003C9D;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      font-size: 20px;
}
    
    /* Text wrapper */
    .button-text {
      display: flex;
      flex-direction: column;   /* stack lines vertically */
      justify-content: center;  /* vertical center inside button */
      line-height: 1.8;         /* spacing between lines */
      text-align: left;          /* left-align text */
    font-size: 110%;
    font-weight: 400;
}
    

    
    
    
}