@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@400;500&family=Dosis&family=Exo+2&family=Josefin+Slab:wght@500&family=Raleway&family=Roboto+Slab&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Habibi&family=Overlock+SC&family=Salsa&display=swap');



*{
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}


                /* FRONT PAGE DESIGN STARTS */
/* header starts */








.sidebar {
    position: fixed;
    left: -25rem;
    width: 25rem;
    height: 100%;
    background: #042331;
    transition: all 0.5s ease;
    overflow-x: hidden;
    z-index: 1;
}

.sidebar header {
    font-size: 2.2rem;
    color: white;
    text-align: center;
    line-height: 7rem;
    background: #063146;
    user-select: none;
}

.sidebar ul a {
    display: block;
    
    height: 100%;
    width: 100%;
    line-height: 6.5rem;
    font-size: 2rem;
    color: white;
    padding-left: 1rem;
    box-sizing: border-box;
    border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
    border-bottom: 0.1rem solid black;
    transition: .3s;
    text-decoration: none;
    font-family: sans-serif;
    
}



ul li{
    list-style-type: none;
}

ul li:hover a {
    padding-left: 5rem;
}


.sidebar ul li i, .dropdown i {
    margin-right: 1.6rem;
}



#check {
    display: none;
}


label #btn, label #cancel {
    position: absolute;
    cursor: pointer;
    background: #042331;
    border-radius: 0.3rem;
}

label #btn {
    left: 4rem;
    top: 2.5rem;
    font-size: 3.5rem;
    color: white;
    padding: 0.6rem 1.2rem;
    transition: all 0.5s;
}

label #cancel {
    z-index: 1111;
    left: -19.5rem;
    top: 1.7rem;
    font-size: 3rem;
    color: #0a5275;
    padding: 0.4rem 0.9rem;
    transition: all 0.5s ease;
}


#check:checked ~ .sidebar {
    left: 0;
}

#check:checked ~ label #btn  {
    left: 25rem;
    opacity: 0;
    pointer-events: none;
}


#check:checked ~ label #cancel  {
    left: 19.5rem;
}














/* Dropdown Button */
.dropbtn {
   



font-family: sans-serif;
  border: .5rem solid #042331;
    display: inline;
    margin-left: -3.5rem;
    color: white;
    background: #042331;
    height: 100%;
    text-align: start;
    width: 200%;
    line-height: 6.5rem;
    font-size: 2rem;
    /* color: white; */
    padding-left: 4rem;
    /* box-sizing: border-box; */
    border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
    border-bottom: 0.1rem solid black;
    transition: .3s;

    
  }


  .dropbtn:hover {
    margin-left: 4rem;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: rgb(4, 71, 97);
    width: 100%;
  }
  
  /* Links inside the dropdown */
  html  .dropdown-content a {
   








    display: block;
    
    height: 100%;
    width: 100%;
    line-height: 6.5rem;
    font-size: 1.5rem;
    color: white;
    padding-left: 4rem;
    box-sizing: border-box;
    border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
    border-bottom: 0.1rem solid black;
    transition: .3s;
   




  }

  html  .dropdown:hover  .dropdown-content a {
    width: 130%;
  }
  


  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: rgb(32, 136, 177);}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
    background-color: #042331;
}


main {

    height: 10rem ;
    width: 100%;
    border: .5rem solid #18131a;
    background: #18131a;
    /* display: flex; */
    position: fixed;
    top: 0%;
    opacity: .7;
    z-index: 9999;
}

main:hover {
    opacity: 1;
    transition: .2s;
}

main h3 {
    text-align: end;
    font-size: 3rem;
    margin-right: 5rem;
    font-family: Arial, Helvetica, sans-serif;
    
    font-variant: small-caps;
    color: aliceblue;
}

#h3 {
    flex: 2;
}


#but {
    flex: 1;
    border: .2rem solid #18131a;
    display: none;
    justify-content: center;
    align-items: center;
}

#but button:hover {
    transform: scale(1.05);
     background-color: darkgrey;
    transition: .3s;
}





#but button {
    height: 5rem;
    width: 10rem;
    background-color: black;
    margin-left: 8rem;
    
}

#but button a {
    color: white;
    text-decoration: none;
    font-size: 1.5rem;
    font-family: 'Dpsis', cursive
}















/* header ends */


/* main starts */

/* main {
    height: 50rem;
    border: .5rem solid white;
    
  
} */



 .sectionTop {
    width: 100%;
    height: 51rem;
    overflow: hidden;
    position: relative;
    background-image: url(image-1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    justify-content: center;
    animation: change 30s infinite ease-in-out;
}




.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 3rem;
    
}

.content img {
    height: 34rem;
}


.content a {
    background-color: white;
    padding: 1.1rem 3rem;
    text-decoration: none;
    font-size:2.1rem ;
    color: black;
    font-family: 'Catamaran', sans-serif;
    
}

.content a:hover {
    background-color: black;
    color: white;
    transition-duration: .3s;
}



@keyframes change{
    0% {
        background-image: url(image-6.jpeg);
    }
    20% {
        background-image: url(image11.jpg);
    }
    40% {
        background-image: url(image12.jpg);
    }
    60% {
        background-image: url(image13.jpg);
    }
    80% {
        background-image: url(image10.webp);
    }
    100% {
        background-image: url(image-9.jpeg);
    }
}



/* 
main:hover {
    opacity: .9;
}


main > section  {
    height: 30rem;
    display: flex;
    justify-content: center;
    align-content: center;
    
}

main section img {
    height: 50rem;
}

main  button {
    margin-left: 45%;
    font-size: 1.5rem;
    height: 5rem;
    width: 12rem;
    border: white;
    border-radius: .1rem;
}

main button:hover {
    background: black;
    color: white;
    transition-duration: .3s;
} */






/* main ends */

/* information section starts */

#information {
    height: 60rem;
    border: .5rem solid white;
    background-color: rgb(238, 228, 228);
}


#information span {
    font-size: 1.5rem;
    text-align: center;
    font-family: 'Exo 2', sans-serif;
}

#information span h5 {
    margin-top: 7rem;
    font-size: 1.5rem;
     

}

#information h2 {
    font-size: 3.8rem;
    text-align: center;
    font-family: 'Dosis', sans-serif;  
}


#information p {
    font-size: 2rem;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    font-family: 'Josefin Slab', serif;
}

#information button {
    margin-left: 40%;
    font-size: 1.5rem;
    height: 5.5rem;
    width: 20rem;
    background-color: black;
    color: white;
    border-radius: .1rem;
    margin-top: 4rem;
    font-family: 'Catamaran', sans-serif;
}


#information button:hover {
    opacity: .5;
    transform: scale(1.02);
    transition-duration: .3s;
}







/* informatino section ends */

/* events section starts */

#events {
    height: 60rem ;
    border: .5rem solid white;
    display: flex;
    margin-top: 5rem;
}

#events section {
    border: .5rem solid white;
    flex: 1;
}

#events  .headLine {
    height: 10rem;
    border: .2rem solid white;
    padding-top: 1rem;
}

#events  .image {
    height: 30rem;
    border: .5rem solid white;
    
    
}
#events  .para {
    height: 15rem ;
    border: .5rem solid white;
   

}


#events  .headLine h5 {
    font-size: 3rem;
    text-align: center;
    margin-top: .5rem;
    font-family: 'Exo 2', sans-serif;;
}

#events  .image {
        background-image: url(image-4.jpeg);
        background-position: center;
        margin: 2%;
        background-size: 100%;
        background-repeat: no-repeat;
        border-radius: 10%;
}


#events .on-1 {
    background-image: url(wed-2.jpeg);
}



#events .on-2 {
    background-image: url(cor-1.jpeg);
}


#events .on-3 {
    background-image: url(soc-1.jpeg);
}

#events  .para p {
 margin-left: 5%;
font-size: 1.7rem;
}





/* events section ends */



/* testimonial section starts */

#test {
    height: 70rem;
    border: .5rem solid white;
    background-color: rgb(238, 228, 228);
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.contains {
    width: 100%;
    height: 60rem;
    background: #e8ecff;
    position: relative;
    margin: 5%;
}


.view-box {
    width: 90rem;
    height: 50rem;
    border-radius: 20rem;
    border: .5rem solid #e8ecff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* background-color: lightgreen; */
}


#testimonial {
    display: flex;
    transition: 0.7s;
    
}

.user {
    width: 80rem;
    height: 28rem;
    text-align: center;
    padding: 2rem 7rem;
    box-sizing: border-box;
    background-color: rgb(72, 202, 241);
    border-radius: 20rem;
    box-shadow: 0 1rem 2rem 0.5rem #00000061;
    position: relative;
}

.space {
    margin: 0 7rem;
}




.user img {
    width: 15rem;
    height: 17rem;
    border-radius: 50%;
    border: 1rem solid #e8ecff;
    top: -11rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}


.user p {
    font-size: 2rem;
    color: aliceblue;
    line-height: 3.2rem;
    margin: 6rem 0 3rem;
    padding: .5rem;
}


/* 
.user p::before {
    content: '\201C';
    font-size: 12rem;
    height: 0;
    display: inline-block;
    vertical-align: -57;
    margin-right: 1rem;
}

.user p::after {
    content: "\201D";
    font-size: 12rem;
    height: 0;
    display: inline-block;
    vertical-align: -70;
    margin-left: 1rem;
} */



.user h3 {
    font-size: 2.4rem;
    color: aliceblue;
   margin-bottom: 1rem;
}


.controls {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


.controls span {
    width: 1.5rem;
    height: 1.5rem;
    background: #321764;
    border-radius: 1.5rem;
    margin: 0 .5rem;
    cursor: pointer;
    transition: 0.7s;
}


.active {
    width: 4.5rem !important;
}













/* testimonial section ends */



/* footer section starts */
footer {
    height:30rem ;
    border: .5rem solid white;
    /* display: flex; */
    background-color: rgb(5, 5, 29);
}

#seprate {
    display: flex;
}
#seprate .sep1, #seprate .sep2 {
    height: 20rem;
    border: .1rem solid aliceblue;
    width: 50%;
}

.sep1 h1, .sep1 p {

        color: white;
}

.sep1 h1 {
    font-size: 1.9rem;
    text-align: center;


}

.sep1 p {
    font-size: 1.6rem;
    margin: 5%;
}


.sep2 p {
    color: white;
    font-size: 1.6rem;
    margin: 5%;
   margin-top: 2.7rem;
}

.links {
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.links li {
    margin-top: 2rem;
    font-size: 4.5rem;
    text-decoration: underline   rgb(5, 5, 29); ;
    
}

.links a {
    color: aliceblue;
    text-decoration: underline   rgb(5, 5, 29); 
}

.links li:hover {
    transform: scale(0.94);
    transition: .3s;
    
    
}

.links a:hover   {
    color: rgb(233, 201, 95);
}



/* footer section ends */


























/*               ---------      MEDIA QUEIRES START  -------               */ 

@media  screen and (max-width:480px) {



    /* header starts */



    .sidebar {
        position: fixed;
        left: -25rem;
        width: 25rem;
        height: 100%;
        background: #042331;
        transition: all 0.5s ease;
        overflow-x: hidden;
        z-index: 1;
    }
    
    .sidebar header {
        font-size: 2.2rem;
        color: white;
        text-align: center;
        line-height: 7rem;
        background: #063146;
        user-select: none;
    }
    
    .sidebar ul a {
        display: block;
        
        height: 100%;
        width: 100%;
        line-height: 6.5rem;
        font-size: 2rem;
        color: white;
        padding-left: 1rem;
        box-sizing: border-box;
        border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
        border-bottom: 0.1rem solid black;
        transition: .3s;
        text-decoration: none;
        font-family: sans-serif;
        
    }
    
    
    
    ul li{
        list-style-type: none;
    }

  .hide {
    display: none;
  }
    
    ul li:hover a {
        padding-left: 5rem;
    }
    
    
    .sidebar ul li i, .dropdown i {
        margin-right: 1.6rem;
    }
    
    
    
    #check {
        display: none;
    }
    
    
    label #btn, label #cancel {
        position: absolute;
        cursor: pointer;
        background: #042331;
        border-radius: 0.3rem;
    }
    
    label #btn {
        left: 4rem;
        top: 2.5rem;
        font-size: 3.5rem;
        color: white;
        padding: 0.6rem 1.2rem;
        transition: all 0.5s;
    }
    
    label #cancel {
        z-index: 1111;
        left: -19.5rem;
        top: 1.7rem;
        font-size: 3rem;
        color: #0a5275;
        padding: 0.4rem 0.9rem;
        transition: all 0.5s ease;
    }
    
    
    #check:checked ~ .sidebar {
        left: 0;
    }
    
    #check:checked ~ label #btn  {
        left: 25rem;
        opacity: 0;
        pointer-events: none;
    }
    
    
    #check:checked ~ label #cancel  {
        left: 19.5rem;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* Dropdown Button */
    .dropbtn {
       
    
    
    
    font-family: sans-serif;
      border: .5rem solid #042331;
        display: inline;
        margin-left: -3.5rem;
        color: white;
        background: #042331;
        height: 100%;
        text-align: start;
        width: 200%;
        line-height: 6.5rem;
        font-size: 2rem;
        /* color: white; */
        padding-left: 4rem;
        /* box-sizing: border-box; */
        border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
        border-bottom: 0.1rem solid black;
        transition: .3s;
    
        
      }
    
    
      .dropbtn:hover {
        margin-left: 4rem;
      }
      
      /* The container <div> - needed to position the dropdown content */
      .dropdown {
        position: relative;
        display: inline-block;
      }
      
      /* Dropdown Content (Hidden by Default) */
      .dropdown-content {
        display: none;
        position: absolute;
        background-color: rgb(4, 71, 97);
        width: 100%;
      }
      
      /* Links inside the dropdown */
      html  .dropdown-content a {
        display: block;
        height: 100%;
        width: 100%;
        line-height: 6.5rem;
        font-size: 1.5rem;
        color: white;
        padding-left: 4rem;
        box-sizing: border-box;
        border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
        border-bottom: 0.1rem solid black;
        transition: .3s;
       
    
    
    
    
      }
    
      html  .dropdown:hover  .dropdown-content a {
        width: 130%;
      }
      
    
    
      /* Change color of dropdown links on hover */
      .dropdown-content a:hover {background-color: rgb(32, 136, 177);}
      
      /* Show the dropdown menu on hover */
      .dropdown:hover .dropdown-content {display: block;}
      
      /* Change the background color of the dropdown button when the dropdown content is shown */
      .dropdown:hover .dropbtn {
        background-color: #042331;
    }
    
    
    main {
    
        height: 10rem ;
        width: 100%;
        border: .5rem solid #18131a;
        background: #18131a;
        /* display: flex; */
        position: fixed;
        top: 0%;
        opacity: .7;
        z-index: 9999;
    }
    
    main:hover {
        opacity: 1;
        transition: .2s;
    }
    
    main h3 {
        text-align: center;
        margin-left: 2rem;
        font-size: 1.8rem;
        /* margin-right: 5rem; */
        font-family: Arial, Helvetica, sans-serif;
        /* margin-left: 17rem; */
        font-variant: small-caps;
        color: aliceblue;
        display: block;
    }
    
    #but {
        flex: 1;
        border: .2rem solid #18131a;
        display: none;
        justify-content: center;
        align-items: center;
    }
    
    #h3 {
        
        display: flex;
        justify-content: flex-end;
        align-self: center;
       
    }
    

    #but button:hover {
        transform: scale(1.05);
         background-color: darkgrey;
        transition: .3s;
    }
    
    
    
    
    
    #but button {
        height: 4rem;
        width: 10rem;
        background-color: black;
        margin-left: -3rem;
        
    }
    
    #but button a {
        color: white;
        text-decoration: none;
        font-size: 1.5rem;
        font-family: 'Dosis', cursive;
    }
    
 
    
    
    
    
    
    
/* header ends */


/* main starts */

/* main {
    margin-top: 3rem;
    height: 70rem;
    border: .5rem solid white;
    
  
} */



 .sectionTop {
    width: 100%;
    height: 65rem;
    overflow: hidden;
    position: relative;
    background-image: url(image-1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    justify-content: center;
    animation: change 30s infinite ease-in-out;
}




.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 3rem;
    
}

.content img {
    height: 32rem;
}


.content a {
    background-color: white;
    padding: 1.1rem 3rem;
    text-decoration: none;
    font-size:2rem ;
    color: black;
    font-family: 'Catamaran', sans-serif;
    
}

.content a:hover {
    background-color: black;
    color: white;
    transition-duration: .3s;
}



@keyframes change{
    0% {
        background-image: url(image-6.jpeg);
    }
    20% {
        background-image: url(image11.jpg);
    }
    40% {
        background-image: url(image12.jpg);
    }
    60% {
        background-image: url(image13.jpg);
    }
    80% {
        background-image: url(image10.webp);
    }
    100% {
        background-image: url(image-9.jpeg);
    }
}



/* 
main:hover {
    opacity: .9;
}


main > section  {
    height: 30rem;
    display: flex;
    justify-content: center;
    align-content: center;
    
}

main section img {
    height: 50rem;
}

main  button {
    margin-left: 45%;
    font-size: 1.5rem;
    height: 5rem;
    width: 12rem;
    border: white;
    border-radius: .1rem;
}

main button:hover {
    background: black;
    color: white;
    transition-duration: .3s;
} */






/* main ends */

/* information section starts */

#information {
    height: 60rem;
    border: .5rem solid white;
    background-color: rgb(238, 228, 228);
}


#information span {
    font-size: 1.3rem;
    text-align: center;
    font-family: 'Exo 2', sans-serif;
}

#information span h5 {
    margin-top: 4.1rem;
    font-size: 1.4rem;
     

}

#information h2 {
    font-size: 2.7rem;
    text-align: center;
    font-family: 'Dosis', sans-serif;  
}


#information p {
    font-size: 1.4rem;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    font-family: 'Josefin Slab', serif;
}

#information button {
    margin-left: 38%;
    font-size: 1rem;
    height: 4rem;
    width: 10rem;
    background-color: black;
    color: white;
    border-radius: .1rem;
    margin-top: 3rem;
    font-family: 'Catamaran', sans-serif;
}


#information button:hover {
    opacity: .5;
    transform: scale(1.02);
    transition-duration: .3s;
}







/* informatino section ends */

/* events section starts */

#events {
    height: 195rem ;
    border: .5rem solid white;
    /* display: flex; */
    margin-top: 5rem;
    display: block;
}

#events section {
    border: .5rem solidwhite;
    /* flex: 1; */
    width:black;
    height: 60rem;
    margin-top: 3rem;
    background: rgb(240, 237, 237);
    
}

#events  .headLine {
    height: 7rem;
    border: .2rem solid rgb(240, 237, 237);
    padding-top: 1rem;
}

#events  .image {
    height: 28rem;
    border: .5rem solid rgb(240, 237, 237);
    
    
}
#events  .para {
    height: 15rem ;
    border: .5rem solid rgb(240, 237, 237);
   

}


#events  .headLine h5 {
    font-size: 3rem;
    text-align: center;
    margin-top: .5rem;
    font-family: 'Exo 2', sans-serif;;
}

#events  .image {
        background-image: url(image-4.jpeg);
        background-position: center;
        margin:  0 6%;
        /* height: 40rem; */
        background-size: 100%;
        
        background-repeat: no-repeat;
        border-radius: 10%;
}


#events .on-1 {
    background-image: url(wed-2.jpeg);
}



#events .on-2 {
    background-image: url(cor-1.jpeg);
}


#events .on-3 {
    background-image: url(soc-1.jpeg);
}

#events  .para p {
 margin: 10%;
font-size: 1.7rem;
}
 




/* events section ends */



/* testimonial section starts */

#test {
    height: 50rem;
    border: .5rem solid white;
    background-color: rgb(238, 228, 228);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
    
}

.contains {
    width: 100%;
    height: 35rem;
    background: #e8ecff;
    position: relative;
    margin: 5%;
}


.view-box {
    width: 90rem;
    height: 30rem;
    border-radius: 20rem;
    /* border: .5rem solid white; */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* background-color: lightgreen; */
}


#testimonial {
    display: flex;
    transition: 0.7s;
    
}

.user {
    width: 35rem;
    height: 14rem;
    text-align: center;
    padding: 2rem 7rem;
    box-sizing: border-box;
    background-color: rgb(72, 202, 241);
    border-radius: 20rem;
    box-shadow: 0 1rem 2rem 0.5rem #00000061;
    position: relative;
}

.space {
    margin: 0 52rem;
}




.user img {
    width: 8rem;
    height: 10rem;
    border-radius: 50%;
    border: 1rem solid #e8ecff;
    top: -7rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}


.user p {
    font-size: 0.87rem;
    color: aliceblue;
    line-height: 1.4rem;
    margin: 6% 3%;
    padding: .5rem;
}


/* 
.user p::before {
    content: '\201C';
    font-size: 12rem;
    height: 0;
    display: inline-block;
    vertical-align: -57;
    margin-right: 1rem;
}

.user p::after {
    content: "\201D";
    font-size: 12rem;
    height: 0;
    display: inline-block;
    vertical-align: -70;
    margin-left: 1rem;
} */



.user h3 {
    font-size: 1.2rem;
    color: aliceblue;
    margin-top: -0.8rem;
}


.controls {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


.controls span {
    width: 1rem;
    height: 1rem;
    background: #321764;
    border-radius: 1rem;
    margin: 0 .5rem;
    cursor: pointer;
    transition: 0.7s;
}


.active {
    width: 4.5rem !important;
}













/* testimonial section ends */



/* footer section starts */

footer {
    height:30rem ;
    border: .5rem solid white;
    /* display: flex; */
    background-color: rgb(5, 5, 29);
}

#seprate {
    display: flex;
}
#seprate .sep1, #seprate .sep2 {
    height: 20rem;
    border: .1rem solid aliceblue;
    width: 50%;
}

.sep1 h1, .sep1 p {

        color: white;
}

.sep1 h1 {
    font-size: 1.5rem;
    text-align: center;


}

.sep1 p {
    font-size: 1.2rem;
    margin: 8%;
}


.sep2 p {
    color: white;
    font-size: 1.2rem;
    margin: 5%;
   margin-top: 2.7rem;
}

.links {
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.links li {
    /* margin-top: 2rem; */
    font-size: 3.5rem;
    text-decoration: underline   rgb(5, 5, 29); ;
    
}

.links a {
    color: aliceblue;
    text-decoration: underline   rgb(5, 5, 29); 
}

.links li:hover {
    transform: scale(0.94);
    transition: .3s;
    
    
}

.links a:hover   {
    color: rgb(233, 201, 95);
}

}
/* footer section ends */

/*               ---------      MEDIA QUEIRES ENDS 0 -480PX  -------               */








































/*               ---------      MEDIA QUEIRES STARTS 481  -  767PX  -------               */

@media (min-width: 481px) and (max-width: 769px) {
    



            /* header starts */



            .sidebar {
                position: fixed;
                left: -25rem;
                width: 25rem;
                height: 100%;
                background: #042331;
                transition: all 0.5s ease;
                overflow-x: hidden;
                z-index: 1;
            }
            
            .sidebar header {
                font-size: 2.2rem;
                color: white;
                text-align: center;
                line-height: 7rem;
                background: #063146;
                user-select: none;
            }
            
            .sidebar ul a {
                display: block;
                
                height: 100%;
                width: 100%;
                line-height: 6.5rem;
                font-size: 2rem;
                color: white;
                padding-left: 1rem;
                box-sizing: border-box;
                border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
                border-bottom: 0.1rem solid black;
                transition: .3s;
                text-decoration: none;
                font-family: sans-serif;
                
            }
            
            
            
            ul li{
                list-style-type: none;
            }
            
            ul li:hover a {
                padding-left: 5rem;
            }
            
            
            .sidebar ul li i, .dropdown i {
                margin-right: 1.6rem;
            }
            
            
            
            #check {
                display: none;
            }
            
            
            label #btn, label #cancel {
                position: absolute;
                cursor: pointer;
                background: #042331;
                border-radius: 0.3rem;
            }
            
            label #btn {
                left: 4rem;
                top: 2.5rem;
                font-size: 3.5rem;
                color: white;
                padding: 0.6rem 1.2rem;
                transition: all 0.5s;
            }
            
            label #cancel {
                z-index: 1111;
                left: -19.5rem;
                top: 1.7rem;
                font-size: 3rem;
                color: #0a5275;
                padding: 0.4rem 0.9rem;
                transition: all 0.5s ease;
            }
            
            
            #check:checked ~ .sidebar {
                left: 0;
            }
            
            #check:checked ~ label #btn  {
                left: 25rem;
                opacity: 0;
                pointer-events: none;
            }
            
            
            #check:checked ~ label #cancel  {
                left: 19.5rem;
            }
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            /* Dropdown Button */
            .dropbtn {
               
            
            
            
            font-family: sans-serif;
              border: .5rem solid #042331;
                display: inline;
                margin-left: -3.5rem;
                color: white;
                background: #042331;
                height: 100%;
                text-align: start;
                width: 200%;
                line-height: 6.5rem;
                font-size: 2rem;
                /* color: white; */
                padding-left: 4rem;
                /* box-sizing: border-box; */
                border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
                border-bottom: 0.1rem solid black;
                transition: .3s;
            
                
              }
            
            
              .dropbtn:hover {
                margin-left: 4rem;
              }
              
              /* The container <div> - needed to position the dropdown content */
              .dropdown {
                position: relative;
                display: inline-block;
              }
              
              /* Dropdown Content (Hidden by Default) */
              .dropdown-content {
                display: none;
                position: absolute;
                background-color: rgb(4, 71, 97);
                width: 100%;
              }
              
              /* Links inside the dropdown */
              html  .dropdown-content a {
               
            
            
            
            
            
            
            
            
                display: block;
                
                height: 100%;
                width: 100%;
                line-height: 6.5rem;
                font-size: 1.5rem;
                color: white;
                padding-left: 4rem;
                box-sizing: border-box;
                border-top: 0.1rem solid rgb(255, 255, 255, 0.1 );
                border-bottom: 0.1rem solid black;
                transition: .3s;
               
            
            
            
            
              }
            
              html  .dropdown:hover  .dropdown-content a {
                width: 130%;
              }
              
            
            
              /* Change color of dropdown links on hover */
              .dropdown-content a:hover {background-color: rgb(32, 136, 177);}
              
              /* Show the dropdown menu on hover */
              .dropdown:hover .dropdown-content {display: block;}
              
              /* Change the background color of the dropdown button when the dropdown content is shown */
              .dropdown:hover .dropbtn {
                background-color: #042331;
            }
            
            
            main {
            
                height: 10rem ;
                width: 100%;
                border: .5rem solid #18131a;
                background: #18131a;
                /* display: flex; */
                position: fixed;
                top: 0%;
                opacity: .7;
                z-index: 9999;
            }
            
            main:hover {
                opacity: 1;
                transition: .2s;
            }
            
            main h3 {
                text-align: center;
                font-size: 2.3rem;
                
                font-family: Arial, Helvetica, sans-serif;
                font-variant: small-caps;
                color: aliceblue;
            }
            

                #h3 {
                    /* flex: 2; */
                    display: flex;
                    justify-content: flex-end;
                    align-self: center;
                    /* margin-left: 4rem; */
                    /* padding-left: 7rem; */
                }

            #but {
                flex: 1;
                border: .2rem solid #18131a;
                display: none;
                justify-content: center;
                align-items: center;
            }
            
            #but button:hover {
                transform: scale(1.05);
                 background-color: darkgrey;
                transition: .3s;
            }
            
            
            
            
            
            #but button {
                height: 4rem;
                width: 9rem;
                background-color: black;
                margin-left: 8rem;
                
            }
            
            #but button a {
                color: white;
                text-decoration: none;
                font-size: 1.2rem;
                font-family: 'Dosis', cursive
            }
            
            
            
            
            
            
            
            
            

/* header ends */


/* main starts */

/* main {
    height: 50rem;
    border: .5rem solid white;
    
  
} */



 .sectionTop {
    width: 100%;
    height: 45rem;
    overflow: hidden;
    position: relative;
    background-image: url(image-1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    justify-content: center;
    animation: change 30s infinite ease-in-out;
}




.content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 3rem;
    
}

.content img {
    height: 25rem;
}


.content a {
    background-color: white;
    padding: 1.1rem 3rem;
    text-decoration: none;
    font-size: 2rem ;
    color: black;
    font-family: 'Catamaran', sans-serif;
    
}

.content a:hover {
    background-color: black;
    color: white;
    transition-duration: .3s;
}



@keyframes change{
    0% {
        background-image: url(image-6.jpeg);
    }
    20% {
        background-image: url(image11.jpg);
    }
    40% {
        background-image: url(image12.jpg);
    }
    60% {
        background-image: url(image13.jpg);
    }
    80% {
        background-image: url(image10.webp);
    }
    100% {
        background-image: url(image-9.jpeg);
    }
}



/* 
main:hover {
    opacity: .9;
}


main > section  {
    height: 30rem;
    display: flex;
    justify-content: center;
    align-content: center;
    
}

main section img {
    height: 50rem;
}

main  button {
    margin-left: 45%;
    font-size: 1.5rem;
    height: 5rem;
    width: 12rem;
    border: white;
    border-radius: .1rem;
}

main button:hover {
    background: black;
    color: white;
    transition-duration: .3s;
} */






/* main ends */

/* information section starts */

#information {
    height: 58rem;
    border: .5rem solid white;
    background-color: rgb(238, 228, 228);
}


#information span {
    font-size: 1.3rem;
    text-align: center;
    font-family: 'Exo 2', sans-serif;
}

#information span h5 {
    margin-top: 6rem;
    font-size: 1.2rem;
     

}

#information h2 {
    font-size: 3rem;
    text-align: center;
    font-family: 'Dosis', sans-serif;  
}


#information p {
    font-size: 1.6rem;
    text-align: center;
    margin-left: 10%;
    margin-right: 10%;
    font-family: 'Josefin Slab', serif;
}

#information button {
    margin-left: 35%;
    font-size: 1.3rem;
    height: 5rem;
    width: 17rem;
    background-color: black;
    color: white;
    border-radius: .1rem;
    margin-top: 3rem;
    font-family: 'Catamaran', sans-serif;
}


#information button:hover {
    opacity: .5;
    transform: scale(1.02);
    transition-duration: .3s;
}







/* informatino section ends */

/* events section starts */

#events {
    height:218rem ;
    border: .5rem solid white;
    display: block;
    margin-top: 3rem;
}

#events section {
    margin-top: 6rem;
    border: .5rem solid  rgb(240, 237, 237);;
    background: rgb(240, 237, 237);;
    margin-left: 5%;
    margin-right: 5%;
    flex: 1;
    height: 64rem;
    border-radius: .5rem;
}

#events  .headLine {
    height: 8rem;
    border: .2rem solid  rgb(240, 237, 237);;
    padding-top: .5rem;
}

#events  .image {
    height: 30rem;
    border: .5rem solid  rgb(240, 237, 237);;
    
    
}
#events  .para {
    height: 20rem ;
    border: .5rem solid  rgb(240, 237, 237);;
   

}


#events  .headLine h5 {
    font-size: 2.5rem;
    text-align: center;
    margin-top: 2rem;
    font-family: 'Exo 2', sans-serif;;
}

#events  .image {
        background-image: url(image-4.jpeg);
        background-position: center;
        margin: 2%;
        background-size: 100%;
        background-repeat: no-repeat;
        border-radius: 10%;
        margin: 4% 7%;
}


#events .on-1 {
    background-image: url(wed-2.jpeg);
}



#events .on-2 {
    background-image: url(cor-1.jpeg);
}


#events .on-3 {
    background-image: url(soc-1.jpeg);
}

#events  .para p {
 margin-left: 5%;
font-size: 1.7rem;
}





/* events section ends */



/* testimonial section starts */

#test {
    height: 70rem;
    border: .5rem solid white;
    background-color: rgb(238, 228, 228);
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.contains {
    width: 100%;
    height: 50rem;
    background: #e8ecff;
    position: relative;
    margin: 5%;
}


.view-box {
    width: 90rem;
    height: 45rem;
    border-radius: 20rem;
    border: .5rem solid #e8ecff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* background-color: lightgreen; */
}


#testimonial {
    display: flex;
    transition: 0.7s;
    
}

.user {
    width: 45rem;
    height: 23rem;
    text-align: center;
    padding: 2rem 7rem;
    box-sizing: border-box;
    background-color: rgb(72, 202, 241);
    border-radius: 20rem;
    box-shadow: 0 1rem 2rem 0.5rem #00000061;
    position: relative;
}

.space {
    margin: 0 43rem;
}



 .user img {
    width: 12rem;
    height: 15rem;
    border-radius: 50%;
    border: 1rem solid #e8ecff;
    top: -11rem;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
} 


.user p {
    font-size: 1.5rem;
    color: aliceblue;
    line-height: 2.5rem;
    margin: 2.5rem 0 3rem;
    padding: .5rem;
}


/* 
.user p::before {
    content: '\201C';
    font-size: 12rem;
    height: 0;
    display: inline-block;
    vertical-align: -57;
    margin-right: 1rem;
}

.user p::after {
    content: "\201D";
    font-size: 12rem;
    height: 0;
    display: inline-block;
    vertical-align: -70;
    margin-left: 1rem;
} */



.user h3 {
    font-size: 2.1rem;
    color: aliceblue;
   margin-top: -1rem;
}


.controls {
    display: flex;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


.controls span {
    width: 1.5rem;
    height: 1.5rem;
    background: #321764;
    border-radius: 1.5rem;
    margin: 0 .5rem;
    cursor: pointer;
    transition: 0.7s;
}


.active {
    width: 4.5rem !important;
}













/* testimonial section ends */



/* footer section starts */  




footer {
    height:30rem ;
    border: .5rem solid white;
    /* display: flex; */
    background-color: rgb(5, 5, 29);
}

#seprate {
    display: flex;
}
#seprate .sep1, #seprate .sep2 {
    height: 20rem;
    border: .1rem solid aliceblue;
    width: 50%;
}

.sep1 h1, .sep1 p {

        color: white;
}

.sep1 h1 {
    font-size: 1.7rem;
    text-align: center;


}

.sep1 p {
    font-size: 1.4rem;
    margin: 5%;
}


.sep2 p {
    color: white;
    font-size: 1.4rem;
    margin: 5%;
   margin-top: 2.7rem;
}

.links {
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.links li {
    margin-top: 2rem;
    font-size: 4.5rem;
    text-decoration: underline   rgb(5, 5, 29); ;
    
}

.links a {
    color: aliceblue;
    text-decoration: underline   rgb(5, 5, 29); 
}

.links li:hover {
    transform: scale(0.94);
    transition: .3s;
    
    
}

.links a:hover   {
    color: rgb(233, 201, 95);
}



/* footer section ends */



    










































    
}


























                /* FRONT PAGE DESIGN ENDS */