/* style.css */
/* Scroll Animation */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: white;
    font-family: 'Poppins', sans-serif;
}

html {
  scroll-behavior: smooth;
}


body {

    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    min-height: 100vh auto;
    background-image: url(images/office.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;

}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 40px;
    background: rgba(24, 23, 23, 0.1);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 20;
}


.logopar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 70px;
    width: 350px;
}

.apexlogo {
    height: 60px;
    width: 60px;
    background-image: url(images/apexlogo.png);
    background-size: cover;
}


.logo {
    color: #ed8e00;
    font-size: 1.9rem;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    font-size: medium;
   
}

nav ul li {
    margin-left: 20px;
}

nav ul li ::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #e38902;
    display: block;
    margin: auto;
    transition: 0.3s;
}

.navbars i {
    display: none;
}


nav ul li :hover::after {
    width: 100%;
}


nav ul li a {
    text-decoration: none;
    color: #fff;
    transition: 0.3s;
}


nav ul li a:hover,
nav ul li a.active {
    color: #ff9800;
}


@media(max-width:1300px) {

    header {
        padding: 5px 20px;
    }

    .apexlogo {
        height: 50px;
        width: 55px;
    }

    .logo {
        font-size:  1.5rem;
    }

    nav ul {
        font-size: 1.2rem;
    }

    nav ul li {
        margin-left: 20px;
        font-size: smaller;
    }


}

@media(max-width:1024px) {
     .logo {
        font-size:  1.7rem;
    }
}


@media(max-width:650px) {

    header {
        padding: 5px 20px;
    }

    .apexlogo {
        height: 50px;
        width: 55px;
    }

    .logo {
        font-size: 1.5rem;
    }

      nav ul {
        font-size: smaller;
        display: block;
        margin-top: 5px;
       
       
      
    }

    nav ul li {

        font-size: smaller;
        margin-top: 35px;
        margin-left: 25px;
         
    }

    .navbars i {

        display: block;
        margin: 12px;
        font-size: 25px;
        color:#155cc0;
        cursor: pointer;
        transition: 1s;
        
       
    }

    .navbars li a {
        width: 100%;
    }

    nav {
        position: absolute;
        height: 100vh;
        width: 200px;
        top: 0;
        display: none;
        right: -200px;
          background: rgba(0, 0, 0, 0.918);
        backdrop-filter: blur(10px);
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
        z-index: 2;
       
      
    }

}


@media(max-width:600px) {
    .logo{font-size: 1.2rem;}
}



/*styling for HOME*/


.hero {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    text-align: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: fadeInDown 1s ease-out;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    animation: fadeInUp 1.5s ease-out;
}

.btn {
    padding: 10px 20px;
    background: #ff9800;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.7s;

}



@media(max-width:1300px) {
    .hero h1 {
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1.1rem;
    }

    .btn {
        font-size: 1rem;
    }
}

@media(max-width:600px) {
    .hero h1 {
        font-size: 1.5rem;
    }

    .hero p {
        font-size: 0.8rem;
    }

    .btn {
        font-size: 0.6rem;
    }
}

.btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 5px rgb(197, 191, 191), 0 0 25px rgb(197, 195, 191), 0 0 5px rgb(209, 207, 198);
}

.boxes {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 90vh ;
    row-gap: 1rem;
    justify-content: space-evenly;
    flex-wrap: wrap;
}


.box1 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
    height: 250px;
    width: 240px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s;
}



.box2 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
    height: 250px;
    width: 240px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s;
}



.box3 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
    height: 250px;
    width: 240px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s;
}



.box4 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
    height: 250px;
    width: 240px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s;
}


@media(max-width:1300px) {

    .box1 {
        height: 200px;
        width: 190px;
    }

    .box2 {
        height: 200px;
        width: 190px;
    }

    .box3 {
        height: 200px;
        width: 190px;
    }

    .box4 {
        height: 200px;
        width: 190px;
    }

}


@media(max-width:600px) {
    .boxes {
        height: 60vh;
        margin-bottom: 100px;
    }

    .box1 {
        height: 190px;
        width: 170px;
    }

    .box2 {
        height: 190px;
        width: 170px;
    }

    .box3 {
        height: 190px;
        width: 170px;
    }

    .box4 {
        height: 190px;
        width: 170px;
    }

}

.box1:hover,
.box2:hover,
.box3:hover,
.box4:hover {
    transform: scale(1.08);
}


.boxes i {
    color: #ff9800;
    margin: 25px;
    font-size: 60px;
}

.paragraph {
    height: auto;
    padding-left: 20px;
    padding-right: 20px;

}

.para {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;

}

.para2 {
    font-size: 14px;
    font-weight: 100;
    margin: 15px;
    text-align: center;
}


@media(max-width:1300px) {
    .boxes i {
        font-size: 3.5rem;
    }

    .para {
        font-size: 16px;
    }

    .para2 {
        font-size: 12px;
    }

}



@media(max-width:600px) {
    .boxes i {
        font-size: 50px;
    }

    .para {
        font-size: 14px;
    }

    .para2 {
        font-size: 10px;
    }

}


@media(max-width:345px) {
   .boxes{
    height: 150vh;
   }

}




/* STYLELING FOR Courses*/


.courses {

    display: grid;
    grid-template-areas: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "box-1 box-2 box-3 "
        "box-4 box-5 box-6"
        "box-7 box-8 box-9";

    padding: 60px;
    row-gap: 3rem;
    width: 100%;
    background: rgba(55, 55, 55, 0.4);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);


}


.cbox {


    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    padding-left: 30px;
    align-content: center;
    height: 170px;
    width: 400px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.116);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.5s;
}


.cbox:hover {
    transform: scale(1.04);
}


.comfun1 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/funda.png);

}

.comfun2{
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/tally.png);

}

.comfun3 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/adca.png);

}

.comfun4 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/dca_v2.png);

}

.comfun5 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/dtp.png);

}

.comfun6 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/adga.png);

}

.comfun7 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/ccc.png);

}

.comfun8 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/dfa.png);

}

.comfun9 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/excel.png);

}

.comfun10{
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/hindi_typing.png);

}

.comfun11{
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/english_typing.png);

}

.comfun12 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/urdu_typing.png);

}

.comfun13 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/web.png);

}

.comfun14 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/prog.png);

}

.comfun15 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/DBMS.png);

}

.comfun16 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/data.png);

}

.comfun17 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/level.png);

}

.comfun18 {
    border-radius: 5px;
    height: 90px;
    width: 90px;
    background-size: cover;
    background-image: url(images/MDIT.png);

}


.ctext1 {
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: 600;
}

.ctext2 {
    font-size: small;
}




@media(max-width:1444px) {

    .courses {


        padding: 30px;
    }

    .cbox {
        padding-left: 20px;
        height: 110px;
        width: 280px;

    }

    .comfun1,
    .comfun2,
    .comfun3,
    .comfun4,
    .comfun5,
    .comfun6,
    .comfun7,
    .comfun8,
    .comfun8,
    .comfun8,
    .comfun9,
    .comfun10,
    .comfun11,
    .comfun12,
    .comfun13,
    .comfun14,
    .comfun15,
    .comfun16,
    .comfun17,
    .comfun18 {
        border-radius: 5px;
        height: 50px;
        width: 50px;
    }

   



    .ctext1 {
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: 600;
    }

    .ctext2 {
        font-size: 9px;
    }

}


@media(max-width:1000px) {

    .courses {


        grid-template-areas:
            "box-1 box-2 "
            "box-3 box-4  "
            "box-5 box-6 "
            "box-7 box-8"
        ;

        padding: 30px;

    }

    .cbox {
        padding-left: 20px;
        height: 110px;
        width: 280px;
        border-radius: 12px;

    }

    .comfun1,
    .comfun2,
    .comfun3,
    .comfun4,
    .comfun5,
    .comfun6,
    .comfun7,
    .comfun8,
    .comfun8,
    .comfun8,
    .comfun9,
    .comfun10,
    .comfun11,
    .comfun12,
    .comfun13,
    .comfun14,
    .comfun15,
    .comfun16,
    .comfun17,
    .comfun18 {
        border-radius: 5px;
        height: 50px;
        width: 50px;
    }



    .ctext1 {
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: 600;
    }

    .ctext2 {
        font-size: 9px;
    }

}

@media(max-width:700px) {

    .courses {


        grid-template-areas:
            "box-1"
            "box-2"
            "box-3"
            "box-4"
            "box-5"
            "box-6"
            "box-7"
            "box-8"
        ;

        padding: 30px;

    }
}



@media(max-width:400px) {

    .courses {
        padding: 10px;
    }


    .cbox {
        padding-left: 20px;
        height: 110px;
        width: 240px;
        border-radius: 12px;

    }
}

/*--------styling for about-----------*/

.about-section {

    padding-bottom: 40px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 95vh;
    width: 100%;
    background: rgba(46, 46, 46, 0.5);
    backdrop-filter: blur(10px);
  

}

.picture {
    background-image: url(images/about-1.jpg);
    height: 80vh;
    width: 65vh;
    background-size: cover;
    border-radius: 5px;
     border-color: #4c9aff;
    box-shadow: 0 0 15px rgba(35, 125, 243, 0.9);
}

.about {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 79vh;
    width: 63vh;
    justify-content: center;

}

.about h1 {
    color: #ff9800;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.about p {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    font-size: 14px;
}





.certified{
    height: 90vh ;
    width: 100%;
    background: #212529;
   display: grid;
    grid-template-areas: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "certi-1 certi-2 certi-3 "
        "certi-4 certi-5 certi-6"
        ;   

    padding: 80px;
    gap: 2.5rem;
}

.Certi{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    
    gap: 1rem;
    align-content: center;
    height: 230px;
    width: 400px;
    padding: 25px;
    border-radius: 20px;
    background: black;
     
}


.certi-logo1{
    border-radius: 5px;
    height: 120px;
    width: 245px;
    background-size: cover;
    background-image: url(images/lgcersailogo.png)
}

.certi-logo2{
    border-radius: 100px;
    height: 120px;
    width: 120px;
     margin-left: 10px;
    background-size: cover;
    background-image: url(images/up3.png);
    
}

.certi-logo3{
    border-radius: 100px;
    height: 115px;
    width: 165px;
    background-size: cover;
    background-image: url(images/msme1.png)
}

.certi-logo4{
 border-radius: 100px;
    height: 120px;
    width: 155px;
    background-size: cover;
    background-image: url(images/csc.jpeg);

   
}

.certi-logo5{
    border-radius: 30px;
    height: 120px;
    width: 135px;
    background-size: contain;
     background-repeat: no-repeat;
    background-image: url(images/APEX\ LOGO1.png)
}

.certi-logo6{
    border-radius: 30px;
    height: 135px;
    width: 140px;
    margin-left: 35px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(images/darpan.png)
}


.certi-text1 {
    margin-bottom: 10px;
    font-size: 21px;
    font-weight: 600;
}

.certi-text2 {
    font-size: small;
    
}








@media(max-width:1444px) {

    .certified {

        height: 62vh;
        padding: 50px;
        gap: 1rem;
    }

    .Certi{
   
    gap: 1rem;
    height: 220px;
    width: 370px;
    padding: 25px;
   
     
   }

   
.visit{
    height: 220px;
    width: 370px;}

    .certi-logo1,
    .certi-logo4,
    .certi-logo2{
        height: 105px;
    }
   
    
     .certi-logo3{
        height: 100px;
    }
    




    .certi-text1 {
        margin-bottom: 10px;
        font-size: 22px;
        font-weight: 600;
    }

    .certi-text2 {
        font-size: 14px;
    }

}


@media(max-width:1250px) {

    .certified {
        height: auto;
        grid-template-areas:
            "box-1 box-2 "
            "box-3 box-4  "
            "box-5 box-6 "
            "box-7 box-8"
        ;
        padding: 40px;
    }

    .Certi{

        gap: 1rem;
        height: 220px;
        width: 370px;
        padding: 25px;
     
   }

   .visit{
    height: 220px;
    width: 370px; 
    }

   

    .certi-logo2{
        height: 110px;
    }
     .certi-logo3{
        height: 100px;
    }
    .certi-logo6{
        height: 120;
        width: 130;
    }


    .certi-text1 {
        margin-bottom: 12px;
        font-size: 20px;
        font-weight: 600;
    }

    .certi-text2 {
        font-size: 14px;
    }

}

@media(max-width:900px) {

    .certified {


        grid-template-areas:
            "box-1"
            "box-2"
            "box-3"
            "box-4"
            "box-5"
            "box-6"   
        ;

        padding: 20px;

    }

    .about li{
    font-size: small ;
}

    .Certi{

        gap: 1rem;
        height: 220px;
        width: 382px;
        padding: 25px;
     
   }
   

   .visit{
        height: 220px;
        width: 382px; 
    }


    .certi-logo1{
        height: 112px;
        width: 220px;
    }

     .certi-logo2{
       width: 110px;
       
    }
    .certi-logo3{
       width: 140px;
       
    }
    .certi-logo4{
       width: 125px;
       
    }
     .certi-logo6{
       width: 115px;
       
    }



    


     .certi-text1 {
        margin-bottom: 10px;
        font-size: 20px;
        font-weight: 600;
    }

    .certi-text2 {
        font-size: 12px;
    }


    
}



@media(max-width:500px) {

    .Certi{

        gap: 1rem;
        height: 170px;
        width: 300px;
        padding: 25px;
     
   }
    .certi-logo1{
        height: 82px;
    }

     .certi-logo2{
         height: 85px;
     
       
    }
    .certi-logo3{
        height: 80px;
          width: 152px;
       
    }
    .certi-logo4{
        height: 80px;
       width: 130px;
       
    }
     .certi-logo6{
          height: 90px;
    }

     .certi-logo5{
          height: 90px;
      
       
    }
}



@media(max-width:1200px){


     .picture{

   height: 61vh;
    width: 50vh;
}
     .about{
     gap: 20px;
    height: 69vh;
    width: 45vh;

    }
    

    .about h1{
        font-size: 24px;
    }

    .about h2{
        font-size: larger;
    }

    .about p{
        font-size: 11px;
    }

}


@media(max-width:900px){


    .picture{

   height: 51vh;
    width: 41.5vh;

    }

    .about{
     gap: 20px;
    height: 69vh;
    width: 34vh;

    }

    .about h1{
        font-size: 24px;
    }

    .about h2{
        font-size: 15px;
    }

    .about p{
        font-size: 11px;
    }

}

@media(max-width:700px){

     .about-section{
        flex-direction: column;
         height: 65rem ;
    }
}

@media(max-width:400px){

      .picture{

     height: 49vh;
     width: 40vh;

    }
 
    .about{
     gap: 20px;
    height: 69vh;
    width: 38vh;
    }
}



/*------------------------------styling for contect-----------------------------------*/


.mapcont{
    height: 70vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

iframe{
    width: 100%;
    height: 100%;
    filter: invert(100%);
}


.contectbox{
    background:black;  
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
}
  


.contect2{
    background: transparent;
    height: 50vh;
    width: 40%;
    padding-left: 100px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
}




.contect2 h2{
    margin-bottom: 15px;
}

.contect2 p {
    font-size: large;
    font-weight: 600;

}

.forms h2{
    color: #ffffff;
}


.forms{

    background: transparent;
    height: 50vh;
    width: 30%;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px;
    position: relative;
    
}

@media(max-width:1024px){
     .forms{
        height: 50vh;
        width: 40%;
        padding: 10px;
    }

     .contect2{
       
        padding-left: 70px;
    }

    
    .contect2 p {
    font-size: 17px;
    font-weight: 600;

    }
    


}


@media(max-width:786px){

    .contectbox{
        flex-direction: column;
        height: 99vh;
    }
    
    .contect2{
        margin: 20px;
        width:60%;
        padding-left: 50px;
    }

    .forms{
        width:50%;
    }

    .contect2 h2{
    margin-bottom: 15px;
    }

    .contect2 p {
    font-size: 15px;
    font-weight: 600;

    }

}


@media(max-width:600px){

      .forms{
        height: 50vh;
        width: 70%;
        padding: 10px;
    }
    
    .contect2{
        margin: 20px;
        width:60%;
        padding-left: 0px;
    }
      

}

.forms label{
    position: relative;
}

.forms label input{
    width: 100%;
    padding: 10px 10px 20px 10px;
    outline: none;
    border: none;
    border-radius: 10px;
    font-size: 0.9em;
    background: rgba(101, 101, 101, 0.627);
    backdrop-filter: blur(10px);
     box-shadow: 0 4px 10px rgba(60, 60, 60, 0.3);

}

.forms label input + span {
    position: absolute;
    top: 15px;
    left:10px;
    cursor: text;
    color:#595f66;
     transition: 0.3s ease;
}

.forms label input:placeholder-shown + span{
    top:15px;
    font-size: 0.9em;
}

.forms label input:focus + span,
.forms label input:valid + span {
    top:29px;
    font-size:0.7em;
    font-weight:600;
}

.forms label input:valid + span{
  color:#e68a00;
}

.submit{
    outline: none;
    border: none;
    background:#df8600;
    padding: 10px;
    border-radius: 10px;
    transition: 0.3s;

}

.submit:hover{
    background:#ff9800;
}




/*------------------------------styling for gallery-----------------------------------*/


.g-back{
    height: 90vh auto;
    width: 100%;
    background: rgba(30, 29, 29, 0.5);
    backdrop-filter: blur(10px);
}

.carousel{
    margin: 90px auto;
    width: 100%;
    display: flex;
    overflow-x: auto;
    user-select: none;
  
}
.carousel:active{
      cursor: grabbing;
}

.carousel::-webkit-scrollbar{
    display: none;
}

.group{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding-right: 1em;
    animation: spin 40s infinite linear;
}



 .group:hover {
            animation-play-state: paused;
        }




@keyframes spin{
    from {translate: 0;}
    to {translate: -50%;}
}

.card{
    flex: 0 0 10em;
    height: 11em;
    width: 15em;
    padding: .2em;
    background: rgb(0, 0, 0);
    font-size: 3em;
    border-radius: .2em;
    text-align: center;
    align-content: center;
}

.G-image1{
   
    height: 10.5em;
    padding: 1em;
   background-image: url(gallery/pic-1.jpg);
   background-size: cover;
    
    border-radius: 6px;
    
    
}
.G-image2{
    height: 10.5em;
    padding: 1em;
    background-image: url(gallery/pic-2.jpg);
    background-size: cover;
    border-radius: 6px;
   
}
.G-image3{
     height: 10.5em;
    padding: 1em;
   background-image: url(gallery/pic-3.jpg);
    background-size: cover;
    border-radius: 6px;
}
.G-image4{
    height: 10.5em;
    padding: 1em;
   background-image: url(gallery/pic-4.jpg);
    background-size: cover;
    border-radius: 6px;
}
.G-image5{
     height: 10.5em;
    padding: 1em;
    background-image: url(gallery/pic-5.jpg);
    background-size: cover;
    border-radius: 6px;
}
.G-image6{
    height: 10.5em;
    padding: 1em;
   background-image: url(gallery/pic-6.jpg);
    background-size: cover;
    border-radius: 6px;
}

@media(max-width:1024px){
    .card{
     flex: 0 0 8em;
    height: 9em;
    width: 4em;
}

.G-image1{
   
    height:8.5em;

}

.G-image2{
   
    height:8.5em;

}


.G-image3{
   
    height:8.5em;

}

.G-image4{
   
    height:8.5em;

}

.G-image5{
   
    height: 8.5em;

}

.G-image6{
   
    height:8.5em;

}
}




/*------------------------------styling for downloads-------------------------------*/



.D-section{
    height: 50vh auto;
    width: 100%;
   display: grid;
    grid-template-areas:  auto;
    grid-template-rows: auto;
    justify-items: center;
    align-items: center;
    grid-template-areas:
        "box-1 box-2 box-3"
         "box-4 box-5 box-6" 
         "box-7 box-8 box-9" 
         "box-10 box-11 box-12"
       ;
    background: black;
    padding: 60px;
    row-gap: 3.5rem;
}

.D-box{
    height: 320px  ;
    width: 250px  ;
     background: rgba(86, 79, 79, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 25px;
}

.D-logo1{
    height:128px;
    width:190px;
    background-image: url(Downloads/3-1.png);
    background-size: contain;

    border-radius: 5px;
}


.D-logo2{
    height:135px;
    width:180px;
    background-image: url(Downloads/3-ii.png);
    background-size: contain;
    border-radius: 5px;
}

.D-logo3{
    height:185px;
    width:180px;
    background-image: url(Downloads/4th\ bill.jpg);
    background-size: contain;
    border-radius: 5px;
}

.D-logo4{
    height:185px;
    width:130px;
    background-image: url(Downloads/gst1.png);
    background-size: contain;
    border-radius: 5px;
}

.D-logo5{
    height:95px;
    width:180px;
    background-image: url(Downloads/gst2.png);
    background-size: contain;
    border-radius: 5px;
}

.D-logo6{
    height:125px;
    width:180px;
    background-image: url(Downloads/payment.png);
    background-size: contain;
    border-radius: 5px;
}

.D-logo7{
    height:185px;
    width:180px;
    background-image: url(images/word.jpg);
    background-size: contain;
    border-radius: 30px;
}

.D-logo8{
    height:185px;
    width:180px;
    background-image: url(Downloads/pdflogo.jpg);
    background-size: contain;
    border-radius: 30px;
}

.D-logo9{
    height:185px;
    width:180px;
   background-image: url(Downloads/zip.png);
    background-size: contain;
    border-radius: 30px;
}

.D-logo10{
    height:185px;
    width:180px;
    background-image: url(images/word.jpg);
    background-size: contain;
    border-radius: 30px;
}

.D-logo11{
    height:185px;
    width:180px;
   background-image: url(Downloads/pdflogo.jpg);
    background-size: contain;
    border-radius: 30px;
}

.D-logo12{
    height:185px;
    width:180px;
   background-image: url(Downloads/zip.png);
    background-size: contain;
    border-radius: 30px;
}

.D-btn {
    padding: 8px 20px;
    background: #3683f0;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.7s;
    text-decoration: none;

}
 
.D-box center{
    font-size: 12px;
}


@media(max-width:1024px){
    .D-section{
          grid-template-areas:
        "box-1 box-2"
        "box-3 box-4"
        "box-5 box-6" 
        "box-7 box-8"
        "box-9 box-10"
        "box-11 box-12"
       ;
    }
  
}

@media(max-width:700px){

    .D-box{
    height: 300px auto ;
    width: 260px auto;
    }


    .D-logo{
    height:175px;
    width:170px;
    }

    .D-section{
          grid-template-areas:
        "box-1" "box-2"
        "box-3" "box-4"
        "box-5" "box-6" 
        "box-7" "box-8"
        "box-9" "box-10"
        "box-11" "box-12"
       ;
    }
  
}







/*--------------------------------styling for footer----------------------------------*/

footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    height: 100%;
    width: 100%;
    padding: 40px;
    background-color: #212529;

}




.fcontainer {
    display: flex;

    flex-direction: column;
}

.useheading {
    font-size: 1.5rem;
    margin-bottom: 30px;
}


.row {
    font-size: 16px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 25px 40px ;
   
}

.row a{
    text-decoration: none;
}


.row li {
    width: 40%;
   
}


.locat {
    height: 90px;
    width: 320px;
    background: black;
    display: flex;
    margin-top: 15px;
    margin-left: 5px;
    flex-wrap: wrap;


}

.locat2 {
    height: 70px;
    width: 80%;
    background: black;
    display: flex;
    margin: 15px 0px 10px 5px;
    flex-wrap: wrap;


}




.locat i {
    margin: 20px 10px 0px 20px;
    font-size: 35px;
    color: white;

}

.locat2 i {
    margin: 20px 10px 0px 20px;
    font-size: 35px;
    color: white;
}


.gkp {
    margin-top: 10px;
    font-size: 25px;
    font-weight: 700;
}

.durga {
    margin-top: 4px;
    margin-left: 75px;
    font-size: 12px;
}






.fbox1 {

    margin: 10px;
    height: 370px ;
    width: 365px ;
    border-radius: 5px;
    background-image: url(images/institute.jpg);
    background-size: cover;
    background-color: black;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 30px;
}

.fbox2 {
    flex: 1 1 480px;
    margin: 10px;
    width: 480px ;
    border-radius: 5px;
    background-color: black;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    padding: 28px;
}

.fbox3 {
    flex: 1 1 455px;
    margin: 10px;
    height: 370px;
    width: 455px;
    border-radius: 5px;
    background-color: black;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

}





.mail {
    height: 30px;
    width: 80%;
    background: black;
    display: flex;
    flex-wrap: wrap;
    margin-left: 48px;


}

.mail i {

    font-size: 25px;
    margin: 14px 5px 10px 0;
}


.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.sbox {

    margin-top: 8px;
    width: 300px;
    height: 45px;
    padding: 0 20px;
    border: 1.5px solid rgb(156, 156, 156);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


.sbox::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.sbox:focus {
    border-color: #4c9aff;
    box-shadow: 0 0 10px rgba(76, 154, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
}

.sbox:hover {
    background: rgba(255, 255, 255, 0.2);
}

.icons {

    margin: 7px 0px 0px 20px;
    display: flex;
    flex-direction: row;
    list-style: none;
    gap: 32px;

}



.arrow {
    margin-left: 10px;
}



.rights {
    height: 50px;
    background-color: black;
    padding-left: 10px;
    padding-top: 20px;
    justify-self: baseline;
    vertical-align: baseline;

}



@media (max-width: 1300px) {
    .fbox1 {
        height: 300px;
        width: 290px;

    }

    

    .fbox3 {
        height: 340px;


    }

    .useheading {
        font-size: 1.5rem;
    }

    .row {
        font-size: 1rem;
         gap: 25px 40px ;
    }

    .locat {
        margin-top: 10px;
    }

    .locat2 {
        margin: 5px 0px 10px 5px;
    }

    .locat i {
        font-size: 2rem;
    }

    .locat2 i {
        font-size: 2rem;
    }

    .gkp {
        margin-top: 5px;
        font-size: 1.4rem;
    }

    .durga {
        font-size: .8rem;
        margin-top: 0px;
        margin-left: 70px;

    }

    .mail {
        margin-left: 30px;
    }

    .mail i {
        font-size: 1.4rem;
        margin: 10px 10px 10px 0px;
    }

    .sbox {
        margin: 8px;
        margin-left: 10px;
        width: 270px;
        height: 40px;
    }

    .icons {
                            
        margin-top: 10px;
        gap: 20px;

    }

    .rights {

        height: 38px;
        font-size: small;
        padding: 15px;
    }
}

@media (max-width: 600px) {
    .fbox1 {
        height: 300px;
        width: 290px;

    }

    .fbox2 {
        height: 300px;

    }

    .fbox3 {
        height: 360px;

    }

    .row {
        gap: 30px 20px;

    }



     

    footer {

        padding: 10px;
    }

    .useheading {
        font-size: 20px;
    }

    .row {
        font-size: 11px;
    }

    .locat {
        margin-top: 10px;
        width: 290px;
    }

    .locat2 {
        margin: 5px 0px 10px 5px;
    }

    .locat i {
        font-size: 25px;
    }

    .locat2 i {
        font-size: 25px;
    }

    .gkp {
        margin-top: 5px;
        font-size: 20px;
    }

    .durga {
        font-size: 9px;
        margin-top: 0px;
        margin-left: 63px;

    }

    .mail {
        margin-left: 30px;
    }

    .mail i {
        font-size: 18px;
        margin: 10px 10px 10px 0px;
    }

    .sbox {
        margin-top: 20px;
        margin-left: 0px;
        width: 200px;
        height: 40px;
    }

    .icons {
        margin-left: 5px;
        margin-top: 20px;
        gap: 20px;

    }


    .rights {
        font-size: small;
        height: 35px;

        padding: 10px;
    }
}


 @media(max-width:350px){
        .sbox{
        margin-left: 0px;
         width: 200px;
        height: 40px;
        }
    }