@media(max-width: 991px){

    h1{ font-size: 7vw; }

    h2{ font-size: 6vw; }    

    h3{ font-size: 4.5vw; }    

    h4{ font-size: 3.7vw; }

    h6{ font-size: 3vw; }

    p{ font-size: 2.5vw; }

    .button{ font-size: 2.5vw; padding: 1.3vh 4vw; }

    .forBigScreen{ display: none; }     
    
    .forTabScreen{display: block;}

    .forMobile{display: none;}

    /*===================== Contact Us Button =====================*/
    .contactUsButton{        
        width: 21vw;
        height: 21vw;                    
        right: 3vw;
        bottom: 2vh;    
    }

    .circularText{ font-size: 2vw; }

    .circularText span{
        position: absolute;
        left: 50%;
        top: 2%;
        transform-origin:0 10vw;
    }

    .contactUsButton i{
        font-size: 7vw;                
        padding: 2.7vw;        
    }  

    /*===================== Banner =====================*/
    .banner{ height: 35vh; background-attachment: scroll; }

    .banner p{ font-size: 3vw; }

    .scrollIcon{ padding: 2vw 2.5vw; bottom: 3vh; }
    
    .scrollIcon i{ font-size: 3vw; }

    /*====================== Header ======================*/
    header{ padding: 1.3vh; }
    
    .headerSocial i{font-size: 3vw; margin-right: 7vw;}

    .headerSocial{margin-left: 4vw;}

    #google_translate_element select{
        font-size:  2.5vw !important;
        color: var(--mainBlue)!important;
    }

    /*====================== NavBar ======================*/
    nav{ 
        height: 8vh;
        position: relative;
        display: block;        
        z-index: 9999 !important;
    }  

    .logo img{ width: 22vh;  margin-left: 3vw;}

    nav ul{
        display: flex;   
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;        
        height: 0;
        width: 100%;        
        transition: 0.3s ease;
        overflow: hidden;        
        background-color: #f1f0fd;
        position: absolute !important;
        top: 100%;
        left: 0;
        right: 0;        
    }

    nav ul li{ margin-left: 0; margin-top: 0; }

    nav ul li:first-child{margin-top: 4vh;}
    nav ul li:last-child{margin-bottom: 4vh;}   

    nav ul li a{
        font-size: 3vw;
        font-weight: 500; 
        margin: 2vh 0;        
        transform: translateY(-200%);
        transition: 0.3s ease;
        opacity: 0;                
    } 

    nav .button{margin-left: 0; font-size: 3vw;}    

    .dropNavBar{
        position: relative !important;
        width: 100%;        
        left: 0;
        transform: translateX(0) !important;                    
    }

    .dropNavBar li{        
        width: 100%;
        left: 0 !important;
        margin-left: 0 !important;        
        padding: 0 0!important;                  
    }

    .dropNavBar li a{font-size: 2.7vw; padding: 1.7vh; background-color: #f1f0fd; margin: 0; }

    .dropNavBar li:first-child{height: 0; padding: 0 !important;}

    .dropNavBar li:last-child{margin: 0 !important;}

 
    /*====================== NavBar Toggle Button ======================*/
     #toggleBtn{ 
        display: block;
        position: relative;       
        height: 6vw;
        width: 6vw;
        float: right;
        margin-right: 5vw;       
        transform: translateY(35%);
        overflow: hidden;
    }

    #toggleBtn .toggleCommon{
        position: absolute;
        height: 3px;
        width: 100%;
        border-radius: 25px;
        background-color: var(--mainBlue);
        transition: 0.3s;
    }

    #toggleBtn .toggleTopLine{top: 15%;}
    #toggleBtn .toggleMiddleLine{top: 50%; }
    #toggleBtn .toggleBottomLine{top: 85%; left: 0;}

    #toggleCheck:checked ~  #toggleBtn .toggleTopLine{transform: rotate(45deg); top: 50%;}
    #toggleCheck:checked ~  #toggleBtn .toggleMiddleLine{transform: rotate(-225deg); top: 50%;}
    #toggleCheck:checked ~  #toggleBtn .toggleBottomLine{left: 100%; opacity: 0;}

    #toggleCheck:checked ~ ul{height: auto;}   

    #toggleCheck:checked ~ ul a{
        opacity: 1;
        transform: translateY(0);
        transition-delay: calc(.15s * var(--i));
    } 

   /*====================== Hero Section ======================*/
   .heroSection{
        height: auto;        
        flex-direction: column;
        align-items: start;  
        padding: 3vh 0;
        gap: 7vh;
    }

    .heroLeftText{
        display: flex;    
        align-items: center;        
        width: 85%;        
        padding: 7vh 0;
    }

    .heroLeftTextBox{ gap: 3vh; }

    .heroLeftText h1,.heroLeftText p{width: 90%;}

    .heroRightPhoto{
        height: 40vh;
        width: 65%;    
        align-self: flex-end;
        margin-right: 7%;        
    }

    .heroAboutUsTextBox{
        width: 90%;
        margin-inline: 5%;
        display: flex;
        text-align: center;             
    }

    .heroAboutUsTextBox p:nth-child(1){text-align: center;}

    .heroAboutUsTextBox p{text-align: justify;}

    /*====================== Marquee ======================*/
    .marquee{ gap: 7vw; }

    .marquee img{ width: 21vw; height: 15vh; }

    .nitiAyogLogo{ width: 15vw !important; height: 11vh !important; }

    /*====================== Why Us Section ======================*/
    .whyBoxMain{ flex-wrap: wrap; }

    .whyBox{
        width: 43%;                    
        padding: 7vh 3%;         
    }

    .whyBox:nth-child(1){ margin-left: 1%; }

    .whyBox:nth-child(2){ border-right: none; }

    .whyBox:nth-child(3){  
        width: 44%;              
        border-right: solid 1px rgba(128, 128, 128, 0.5);            
    }

    .whyBox p{ line-height: 4vh; }

    /*====================== Object ======================*/
    #objective{ padding: 5vh 0; }

    #objective .tabs{                 
        flex-wrap: wrap;
        justify-content: center;
        gap: 3vw;
        padding: 7vh 0 5vh 0;           
    }

    #objective .tab{         
        width: 28vw;
        height: 28vw;        
    }

    #objective .tabContainMain{ 
        width: 90%;
        margin-inline: 5%;
        padding-top: 3vh;    
    }

    /*====================== Counter ======================*/
    .counterInnerBox{        
        gap: 2vw;
        width: 100%;            
    }

    .counterBox img{
        height: 18vw;
        width: 18vw;        
    }

    .counterBox .counter{       
        height: 12vh;    
        width: 37vw;    
    }

    /*====================== CardBox Section ======================*/
    #cardBoxMain{
        flex-wrap: wrap;
        justify-content: center;
        gap: 3vw;
        padding: 5vh 0;        
    }

    .cardBox{
        height: 50vh;
        width: 45vw;        
        border: solid 1px rgba(128, 128, 128, 0.7);
    }

    .cardBox img{ height: 40%; }

    .cardBox p{ font-size: 2vw; }

    .cardBox a{ font-size: 2.5vw; }

    .cardBox i{ font-size: 2vw; }

    /*====================== Video Section ======================*/
    .videoMainBox{
        flex-direction: column;        
        gap: 5vh;
    }

    .videoMainBox iframe{
        height: 35vh;
        width: 70vw;        
        border-radius: 2vw;
    }

    .videoTestBox{padding-bottom:5vh !important;}

    /*====================== Testimonial Section ======================*/
    #testimonialSection img{ 
        height: 12vw !important; 
        width: 12vw !important;         
    }

    #testimonialSection .testimonialBox p{ font-size: 1.7vw; }

    #testimonialSection .testName{ font-size: 2vw !important; }

    
    /*====================== Footer ======================*/
    footer{ flex-direction: column; }

    footer .footerParts{ margin-top: 0; gap: 3vh; align-items: center; }    
    
    footer .footerParts1{ 
        width: 90%; 
        margin-inline: 5%; 
        flex-direction: row;
        margin-top: 5vh;
    } 

    footer img{width: 20vw;}

    footer .footerLogoPara{font-size: 2.5vw;}

    footer .footerParts2{ 
        justify-content: center;
        align-items: center;
        width: 100%; 
        margin-left: 0;
    } 

    footer .footerParts3{ width: 100%; margin-left: 0;} 
    footer .footerParts4{ width: 100%; margin-left: 0;} 

    footer h6{font-size: 4.5vw;}

    footer p{font-size: 3vw;}

    footer i{font-size: 3vw;}

    footer .footerAddressPara{font-size: 3vw; text-align: center;}

    footer .footerIconText1{ display: flex; justify-content: center; }



    /*====================== Gallery Page ======================*/
    #gallery{        
        gap: 2vh;    
    }
    
    #gallery > img {       
        height: 28vh;
        width: 45%;        
    }


    /*===================== Nomination Page =====================*/
    #nominationDiv{ padding: 5vh 0; }

    #nominationbox h4{ margin: 5vh 0 3vh 0; }

    #nominationbox input , #nominationbox select{ font-size: 2vw !important; }
    
    #nominationbox .formfile span{ font-size: 2vw; }
    
    #textbox textarea{ font-size: 2vw; } 
    
    .formDivUploads span{ font-size: 1.7vw !important; }   

    textarea{ font-size: 2vw; width: 50vw; }

    .formDivAddress .formfile{margin-left: 4vw;}


    /*===================== Contact Us Page =====================*/
    #contactUs{ flex-direction: column; padding: 5vh 0 5vh 0; }

    .contactDetails{ gap: 2vh; width: 90%; }

    .contactDetails p{ line-height: 3vh; }

    .contactDetails i{ font-size: 3vw; }

    .contactDetails h2{ text-align: center; }

    .contactDetailsReachUs{text-align: center; margin-top: 3vh;}

    .contactAddress{ display: flex; align-items: center; justify-content: center; margin-bottom: 1.5vh; font-weight: 500; }

    .contactDetailsReachUs p{text-align: center;}

    .contactUsSocial i{
        font-size: 3vw;
        margin: 1vh 0 7vh 0;         
        padding: 1.5vh 2.2vw;        
    }

    .contactUsSocial{display: flex; justify-content: center; gap: 7vw;}

    .contactForm{        
        width: 96%;
        margin-inline: 2%;
        border-radius: 25px;        
        padding: 5vh 5vw;        
    }

    #contactUs .formdiv{ justify-content: center; gap: 5vw;}

    #contactUs  form input,  #contactUs form select{ font-size: 2vw; width: 40vw; } 

    #contactUs textarea{ font-size: 2vw; width: 100%; }

    #contactUs  .formfile span{ font-size: 2vw; }    

    .contactForm h4{text-align: center;}

    #contactUs #buttonDiv{text-align: center;}

    #contactUs form button{ margin: 5vh 0 0 0; }

    .contactMap iframe{ height: 35vh; }


    /*===================== About Us Page =====================*/
    #aboutUs .aboutUsTop{flex-direction: column; text-align: center; }

    #aboutUs .aboutUsLeft{ width: 96%;  margin-bottom: 3vh; }
    
    #aboutUs img{
        height: 35vh;
        width: 80vw;
        margin-left: 0;        
        margin-bottom: 3vh;
    }

    #aboutUs .aboutUsBottom{ text-align: center; }

    #aboutUsorganization p{text-align: center;}

    #aboutUsaim{ flex-direction: column; padding: 5vh 0; }

    #aboutUsaim img{
        align-self: flex-start;
        height: 40vh;
        width: 60%;            
    }

    .picSideTextBox{ gap: 3vh; margin-inline: 0; width: 94%; margin-top: 5vh;}

    .picSideTextBox p{text-align: center; line-height: 4.5vh;}

    .picSideTextBox h3{text-align: center;}

    #aboutUsmission{ 
        flex-direction: column-reverse;        
        padding: 5vh 0; 
    }

    
    #aboutUsmission img{
        align-self: flex-end;
        height: 40vh;
        width: 60%;          
    }

    .aboutUsVision img{ height: 40vh !important; }   
    

    /*===================== Award Page =====================*/
    .award{ padding: 5vh 2vw; }

    .award img{ height: 35vh; width: 90%; margin: 3vh 5%; }

    .awardTextBox{ width: 100%; text-align: center; }   

    /*===================== Privacy Policy Page =====================*/
    #privacyPolicy a{font-size: 2.5vw;}
    
}

@media(max-width: 767px){

    h1{ font-size: 10vw; }

    h2{ font-size: 8vw; } 

    h3{ font-size: 8vw; } 

    h4{font-size: 5vw;}

    h6{ font-size: 3.7vw; }

    p{ font-size: 5vw; }   

    .button{ font-size: 2.5vw; padding: 1.3vh 4vw; }

    .button{ font-size: 4vw; padding: 1.3vh 6vw; }  
    
    .forTabScreen{display: none;}

    .forMobile{display: block;}

    /*===================== Contact Us Button =====================*/
    .contactUsButton{ right: 7vw; bottom: 3vh; }  

    .circularText{ font-size: 3vw; }

    .circularText span{ top: -20%; transform-origin:0 15vw; font-weight: 700; }

    .contactUsButton i{
        font-size: 10vw;                
        padding: 4vw;        
    }

    /*===================== Banner =====================*/
    .banner{ height: 35vh; background-attachment: scroll; }

    .banner p{ font-size: 5vw; }

    .scrollIcon{ padding: 3vw 3.5vw; }
    
    .scrollIcon i{ font-size: 5vw; }

    /*====================== Header ======================*/    
    .headerSocial i{font-size: 6vw; margin-right: 7vw;}    

    #google_translate_element select{
        font-size:  3.5vw !important;
        color: var(--mainBlue)!important;
    }

     /*====================== NavBar ======================*/
     nav ul li a{ font-size: 3vw; font-weight: 500; } 

    nav .button{margin-left: 0; font-size: 3vw;}        

    .dropNavBar li a{font-size: 4vw; padding: 2.5vh 0; margin: 0;}

     nav{ height: 9.3vh;}

     .logo img{ width: 25vh;  margin-left: 3vw;}

     nav .button {font-size: 5vw;} 

     nav ul li a{ font-size: 5vw; }

    /*====================== NavBar Toggle Button ======================*/
     #toggleBtn{            
        height: 8.5vw;
        width: 8.5vw;        
        transform: translateY(50%);
    }
    
   /*====================== Hero Section ======================*/
   .heroSection{
        height: auto;        
        flex-direction: column;
        align-items: start;  
        padding: 3vh 0;
        gap: 3vh;
    }

    .heroLeftText{                
        width: 100%;        
        text-align: center;
        padding: 2vh 0;
        background-color: transparent;
    }

    .heroLeftTextBox p:nth-child(1){font-size: 4vw;}

    .heroLeftTextBox .buttondiv{width: 100%; margin-left: -4.5vw;}

    .heroRightPhoto{
        height: 45vh;
        width: 96%;            
        margin-right: 2%;        
        border-radius: 50px;
    }

    .heroAboutUsTextBox{
        width: 90%;
        margin-inline: 5%;
        display: flex;
        text-align: center;             
    }

    .heroAboutUsTextBox p:nth-child(1){text-align: center;}

    .heroAboutUsTextBox p{text-align: justify;}

    /*====================== Marquee ======================*/
    .marquee img{ width: 25w; height: 15vh; }

    .nitiAyogLogo{ width: 18vw !important; height: 8vh !important; }

    /*====================== Why Us Section ======================*/
    #whyUs h2{ text-align: center;  font-size: 10vw;}

    .whyBox{ width: 90%; padding: 7vh 5%; text-align: center;}

    .whyBox:nth-child(1){ margin-left: 0; }    

    .whyBox:nth-child(3){ width: 90%; }    

    /*====================== Object ======================*/
    #objective{ padding: 7vh 0;}

    #objective .tabs{           
        flex-direction: column;                      
        gap: 4vw;
        padding: 5vh 0 5vh 0;           
    }

    #objective .tab{         
        width: 30vw;
        height: 30vw;        
    }

    .objectInnerBox{display: flex; align-items: center;}

    #objective .tabContainMain p{ width: 50vw; }    

    #objective .tabs{ border-bottom: transparent; padding-bottom: 0; }

    #objective .tab{ border: solid 2px #103142; }

    /*====================== Counter ======================*/
    .counterBox{ padding: 7vh 0 7vh 0; }

    .counterBox h2{ font-weight: 600; }

    .counterBox h6{ font-size: 4.3vw;}

    .counterInnerBox{ gap: 3vw; }

    .counterBox img{
        height: 28vw;
        width: 28vw;        
    }

    .counterBox .counter{       
        height: 13vh;    
        width: 60vw;    
    }

    .counterOrder:nth-child(1){order: 1;}
    .counterOrder:nth-child(2){order: 2;}
    .counterOrder:nth-child(3){order: 4;}
    .counterOrder:nth-child(4){order: 3;}
    .counterOrder:nth-child(5){order: 5;}
    .counterOrder:nth-child(6){order: 6;}

    /*====================== CardBox Section ======================*/
    #cardBoxMain{ gap: 5vh; }

    .cardBox{
        height: 65vh;
        width: 80vw;                
    }

    .cardBox img{ height: 40%; }

    .cardBox p{ font-size: 4.5vw; }

    .cardBox a{ font-size: 5vw; }

    .cardBox i{ font-size: 5vw; }

    .cardBox .cardBoxText{ padding: 2% 0; }

    /*====================== Video Section ======================*/
    .videoMainBox iframe{
        height: 35vh;
        width: 90vw;        
        border-radius: 3vw;
    }

    .videoTestBox{padding-bottom:5vh !important;}

    /*====================== Testimonial Section ======================*/
    .testimonialTopText h2{font-size: 10vw;}

    #testimonialSection .testimonial{
        flex-direction: column;
        height: 45vh;       
        padding: 3vw;        
    }

    .testimonialTextBox{
        text-align: center;        
        height: auto; 
        width: 90vw;        
    }

    #testimonialSection img{ 
        height: 21vw !important; 
        width: 21vw !important;       
        margin: 3vh 0;  
    }

    #testimonialSection .testimonialBox p{ font-size: 3vw; }

    #testimonialSection .testName{ font-size: 4vw !important; margin-top: 3vh; text-align: center !important; }

    #testimonialSection .testimonialBox2 .testimonial{ height: 35vh; padding: 3vw; }

    .testimonialBox2 .testimonialTextBox{ width: 50vw; justify-content: center; }

    .testimonialBox3 .testimonialTextBox{ width: 70vw; justify-content: center; }

    .testimonialBox1{ margin-left: 2vw; animation: looping1 50s infinite linear; transform: translateX(-450%); }

    @keyframes looping1 {
        0% { transform: translateX(-450%); }
        100% { transform: translateX(30%); }
    }

    .testimonialBox2{ animation: looping2 80s infinite linear; transform: translateX(30%);}

    @keyframes looping2 {
        0% { transform: translateX(30%); }
        100% { transform: translateX(-570%); }
    }

    .testimonialBox3{ animation: looping3 45s infinite linear; transform: translateX(-400%);}

    @keyframes looping3 {
        0% { transform: translateX(-400%); }
        100% { transform: translateX(30%); }
    }

    
    /*===================== Footer =====================*/
     footer img{width: 28vw;}
    
     footer .footerLogoPara{font-size: 4vw;}
 
     footer h6{font-size: 5.5vw;}
 
     footer i{font-size: 5vw; margin-right: 2vw;}
 
     footer .footerAddressPara{font-size: 4vw; text-align: center;}
 
     footer .footerIconText1{ display: flex; justify-content: center; }
    
     footer p{font-size: 4.7vw;}

     footer .footerLogoPara{font-size: 3.5vw; text-align: justify;}


    /*====================== Gallery Page ======================*/   
    #gallery > img {       
        height: 30vh;
        width: 90%;        
    }


     /*===================== Nomination Page =====================*/
    #nominationbox input , #nominationbox select{ font-size: 4vw !important; width: 90% !important;  }

    #nominationbox .formdivcat select{width: 92% !important;}

    #nominationbox .formdivcat{display: flex; justify-content: start; margin-left: 0; margin-bottom: 3vh;}
 
    #nominationbox .formfile span{ font-size: 4.5vw; }

    #nominationbox .formfile { display: flex; justify-content: center; align-items: center; }
 
    #textbox textarea{ font-size: 4vw !important; } 
 
    #nominationbox  button{ font-size: 5vw; }

    #nominationbox .formdiv{display: flex; justify-content: space-evenly; flex-direction: column;}
    
    
    .formDivUploads span{ font-size: 4.5vw !important; }   

    textarea{ font-size: 4vw; width: 85vw; }

    .formDivAddress .formfile{margin-left: 0;}

    #nominationbox{ width: 94%; } 


    /*===================== Contact Us Page =====================*/    
    .contactDetails p{ line-height: 4vh; text-align: center; }
      
    .contactDetails i{ font-size: 5vw; }

    .contactAddressPara{font-size: 4.2vw;}        
    
    .contactUsSocial i{ font-size: 6vw; margin: 1vh 0 5vh 0; padding: 2vh 4.5vw; }        
    
    #contactUs .formdiv{ flex-direction: column; align-items: center; justify-content: none; gap: 0;}
    
    #contactUs  form input,  #contactUs form select{ font-size: 4.5vw; width: 90vw; } 
    
    #contactUs textarea{ font-size: 4.5vw; width: 104%; margin-left: -2%; }
    
    #contactUs  .formfile span{ font-size: 4.5vw; }    
    
    .contactForm h4{font-size: 7vw;}     
    
    #contactUs button{ font-size: 5vw; }     
    
    
    /*===================== About Us Page =====================*/
    #aboutUs img{ height: 35vh; width: 95vw; }               
        
    #aboutUsaim img{ width: 85%; }    
            
    #aboutUsmission img{ width: 85%; }

    /*===================== Award Page =====================*/
    .award img{ height: 30vh; width: 96%; margin: 3vh 2%; border-radius: 25px; }   


    /*===================== Privacy Policy Page =====================*/
    #privacyPolicy h3, #privacyPolicy h4{text-align: center;}

    #privacyPolicy{text-align: justify;}

    #privacyPolicy h4{font-size: 7vw;}    

    #privacyPolicy a{font-size: 5vw;}    
    
}