.header
{
    position: relative;
}
.video,main,header,body,.about{ position: relative;}
main{overflow: hidden;}

    .video::after {
        position: absolute;
        content: "";
        height: 65%;
        width: 38%;
        top: 20%;
        left: 10%;
        /* border: 1px solid red; */
        z-index: 999;
        border: 3px solid #f1f1f14f;
        border-radius: 50%;
        animation: mymove 3s;
        animation-fill-mode: forwards;
    }

    .video::before {
        position: absolute;
        content: "";
        height: 50%;
        width: 30%;
        top: -25%;
        right: 10%;
        /* border: 1px solid red; */
        z-index: 999;
        border: 3px solid #f1f1f14f;
        border-radius: 50%;
        animation: mydown 3s;
        animation-fill-mode: forwards;
    }

    @keyframes mymove {
        from {top: 0%;}
        to {top: 20%; }
      }

      @keyframes mydown {
        from {top: 0%;}
        to {top:-25%; }
      }


      .about::after {
        position: absolute;
        content: "";
        height: 65%;
        width: 23%;
        left: -15%;
        bottom: -25%;
        /* border: 1px solid red; */
        z-index: 999;
        border: 3px solid #f1f1f14f;
        border-radius: 50%;
        animation: mymoveleft 3s;
        animation-fill-mode: forwards;
    }
    
.about{    overflow: visible;}
    .about::before {
            position: absolute;
            content: "";
            height: 50%;
            width: 18%;
            top: -14%;
            right: -5%;        
            z-index: 999;
            border: 3px solid #f1f1f14f;
            border-radius: 50%;
            animation: mymoveright 3s; 
             animation-fill-mode: forwards; 
        
    }
    .about .container{position: relative;}

    .about .container::after {
        position: absolute;
        content: "";
        height: 26%;
        width: 12%;
        bottom: 0;
        right: -26%;
        z-index: 999;
        border: 3px solid #f1f1f14f;
        border-radius: 50%;
    }
    @keyframes mymoveleft {
        from {left: 0%;}
        to {left: -15%; }
      }

      @keyframes mymoveright {
        from {right: 0%;}
        to {right:-5%; }
      }


      @media (max-width: 768px) {
        .about::after,
        .about::before {
            width: 18%;  /* Ensure the same width on mobile as desktop */
        }
    }
    
    /* Optional: Fine-tune for smaller devices if needed */
    @media (max-width: 480px) {
        .about::before {          
            height: 10%;
            width: 15%;
            top: -5%;           
        }
        .about::after{
            height: 10%;
             width: 23%;
                 bottom: -5%;  /* Adjust if you want a larger size on smaller screens */
        }
    }