@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=PT+Sans+Narrow:wght@400;700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Jost", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

}
:root{
    --blue: rgb(14, 129, 158);
    --box-color:rgb(3, 3, 54);
    --backgground: rgba(7, 113, 212, 0.301);

}

body{
    font-family: 'jost';  
    width: 100%;  
}

.bg1{
    
    background: url(image/Firefly\ people\ worshiping.jpg);
    height: 110vh;
    width: 100%;
    height: fit-content;
   background-position: 40%;
    background-size:cover;
    background-repeat: no-repeat;
}
.bg{
    z-index: -999;
    height: 110vh;
    height: fit-content;
    width: 100%;
   background: linear-gradient(to top, rgba(2, 6, 73, 0.658), var(--box-color));
}
nav{
    width: 100%;
    height: 100px;
    z-index: 999;
    background-color: rgba(2, 3, 46, 0.185);
    text-decoration: none;
  

 
}
.nav{
    height: 100px;
   
    z-index: 999;
    background-color:var(--box-color);
    text-decoration: none;

 
}



nav img{
    position: absolute;
    top: 0;
    width:200px;
     margin: 10px 40px;

}

nav ul{
    display: flex;
    list-style-type: none;
    position: relative;
    justify-content: right;
    margin-right: 100px;

   
    

}

nav li{
   margin-left: 20px;
  
}

nav li a{
    display: block;
    margin-top: 25px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    padding: 16px 10px;
    font-size: 17px;
    font-weight: 400;

}
nav li a:hover{
    transition: .5s ease-in-out;
    color:var(--blue);
    letter-spacing: 1.5px;
}
nav ul button{
    width: 100px;
    height: 40px;
    background-color: rgb(255, 255, 255);
    margin:28px 8px ;
    border: none;
    float: right;
    transition: .8s ease ;
}
button a{
    text-decoration: none;
    color: black;
    text-align: center;
}
button:hover{
    letter-spacing: 1px;
    width: 117px;
}
nav .menu  i{
    display: none;
    position: absolute;
    text-align: center;
    font-size: 45px;
    color:var(--blue);
    padding: 10px 6px;
    width: 50px;
    height: 40px;
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    margin:28px 5px ;
    right: 0%;
    top: 0;
    border: none;
    float: right;
    z-index: 999;
    cursor: pointer;
   


  

}
.sidebar{
   
    display: none;
    padding: 0;
    margin: 0;
    text-align: left;
    position: absolute;
    top: 15%;
    left: 0;
    background: rgba(255, 252, 252, 0.973);
    width: 100%;
    height: 0;
    overflow: hidden;
    font-size: 5px;
    z-index: 10;
    border-radius: 10px;
    transition: .8s ease-in-out;
  
  

}

.sidebar li{
    margin:0;
    padding: 10px 10px;
}

.sidebar li a { color:var(--box-color);
    font-weight: bold;
    margin-top: 0;
    padding: 0;
}@media (max-width:620px){
    nav ul button{
        
        width: 70px;
        height: 70px;
        font-size: 17px;
        margin: 0;
    }
    button:hover{
        letter-spacing: 1px;
        width: 87px;
    }
}

@media (max-width:1020px) {
    nav img{
        width: 150px;
        margin:0;
        margin-top: 10px;
    }
    nav ul button{
        display: none;
        width: 70px;
        height: 70px;
        font-size: 17px;
        margin: 0;
    }
    button:hover{
        letter-spacing: 1px;
        width: 87px;
    }
    nav ul li a{
        display: none;
    }
    .sidebar{
        display:block;
        height: 0px;
    }
.sidebar li a{
    display: block;
    padding: 10px;
    border-radius: 10px;
}

.sidebar li a:hover{
    background-color:var(--box-color);
}

nav .menu i{
  display: block;
   
}
}


.page1{
    position: relative;
 
    margin: auto;
margin: 50px;
}

.page1 h1{
   
    font-size: 30px;
    color: white;
    width: 100%;
  
    font-weight: 500;   
    
}
.page1 p{
    
    color:white;
   
    font-size: 15px;
    width: 95%;
    margin:5px 15px;
}

.page1 .btn1{
    width: 90%;
    height: 50px;
    margin: 10px 2px;
    font-weight: bold;
    border: none;
    color:var(--blue);
    margin:5px 10px;
  
}

.page1 .btn1 a{
    font-size: 19px;
    font-weight: 500;
    color: var(--blue);
}

.page1 .btn2{
    width: 90%;
    height: 50px;
    margin: 20px 10px;
    padding: 10px;
    font-weight: bold;
    background: none;
    border: 2px solid white;
    margin-bottom: 90px;
}
.page1 .btn2 a{
    font-size: 19px;
    font-weight: 500;
    color: rgb(255, 255, 255)
}

.page1 button:hover{
   transform: scale(1.051);
    transition: .9s ease-in-out;
    letter-spacing: 1px;
}

@media (min-width:600px) {
    .page1{
       text-align: center;
    }
   
    .page1 h1{
        width: 100%;
        font-size: 30px;

    }

    .page1 p{
        width: 70%;
        font-size: 20px;
    }
    .page1 .btn1{
        width: 170px;
      
     
    }
    .page1 .btn2{
        width: 170px;
       
    }
    
}
@media (min-width:860px) {
    .page1{
        margin: 200px;
    }
   
    .page1 h1{
        width: 100%;
        font-size: 60px;

    }

    .page1 p{
        width: 50%;
        font-size: 20px;
    }
}
.adbox{
    padding: 20px;
  color: black;
    width: 90%;
    height: fit-content;
    background-color: rgb(255, 255, 255);
    float:left;
   
}

.adbox .ad img{
    width: 65px;
    padding: 10px;
}

.adbox .ad {
   display: flex;
    float: left;
    margin: 10px 0px;
  

}
.adbox .ad h2{
    font-size: 20px;
    font-weight: 800;
    color: var(--blue);
}

.adbox .ad h2 span{
    color: black;
    font-size: 20px;
}

@media (min-width:600px) {
    .adbox{
        
          width: 100%;
          margin: 0;
          height: 100px;
          background-color: rgb(255, 255, 255);
          margin-bottom: 100px;
      }
      
      .adbox .ad {
          margin: 0px 60px;
      }
    }

    .page2{
        margin:150px 20px
    }

.page2 .para1{
    font-size: 17px;
    letter-spacing: 5px;
    color: var(--blue);
}

.page2 .tran{
    font-weight: 500;
    color: var(--box-color);
}

.page2 button{
    width: 250px;
    height: 50px;
    font-size: 17px;
    border: none;
    background-color: var(--box-color);
    color: white;
    margin-bottom: 40px;
}

.page2 button a{
    color: white;
    transition: .5s ease-in-out;
}

.page2 button a:hover{
   letter-spacing: 2px;
}




.page2 img{
    width: 100%;
    
}
.page2 .goal {
    color: var(--blue);
    font-weight: 600;

}
.page2 .goal span{
    color: var(--box-color);
    font-weight:550;
}
.page2 .four-box i{
    color: var(--blue);
    padding: 3px;
}
.page .para2{
    width: 100%;
    font-size: 10px;
    margin-bottom: 50px;
}
.page2 .four-box{
margin-top: 20px;
width: 100%;
height: 50px;
height:fit-content;
background-color:var(--backgground);
padding: 5px;
font-weight: 500;
}

.page2 .side .comm{
    width: 100%;
    height: 90px ;
    background-color:var(--backgground) ;
    margin-top: 20px;
    padding: 10px;
    display: flex;

}

.page2 .side .comm .box{
    background-color: var(--blue);
    width: 50px;
    color: white;
    position: relative;
    text-align: center;
    height: 50px;
    padding: 7px 3px;
}
.page2 .side .comm h2{
    font-weight: 600;
  color: var(--box-color);
}
.page2 .side .comm h2 span{
    font-size: 17px;
}

.page2 .side img{
    margin-top: 60px;
       width: 100%;
}
@media (min-width:800px) {
    .page2{
        margin:100px 80px;
        width: 90%;
    }
    .page2 .tran{
        font-size: 40px;
        font-weight: 500;
        width: 70%;
        color: var(--box-color);

    }

    .page2 button{
        margin-top: -40px;
        float: right;
    }
    .page2 img{
        margin-top: 50px;
        width: 36.33%; 
    }

    .page2 .para2{
        width: 40%;
    }

    .page2 .four-box{
        width: 36.33%;
      
    }
    .page2 .side {
        position: absolute;
        margin-top: -80%;
        font-size: 20px;
        width: 50%;
       right: 0;
    }
    .page2 .side .comm{
        width: 60.33%;
    }
    .page2 .side img{
       
           width: 80%;
    }
    }

    .page3{
        width: 100%;
        height: 120vh;
        height: fit-content;
        background-color: var(--backgground);
        padding:60px 5px;
    }

    .page3 .para3{
        padding: 5px 20px;
        letter-spacing: 4px;
        color: var(--blue);
        font-weight: 600;
        margin-bottom: 20px;

    }

    .page3 h1{
        padding: 5px 20px;
        font-weight: 500;
        color: var(--box-color);
       
    }

    .page3 button{
        margin: 5px 20px;
        width: 200px;
        height: 50px;
        background:none;
        border: 2px solid var(--box-color);
    }
    .page3 button a{
        font-size: 17px;
        color: var(--box-color);
        transition: .4s;
    }
    .page3 .card-list .card-item{
        color: var(--box-color);
        background-color: white;
        width: 100%;
        flex-direction: column;
        padding: 10px;
        display: flex;
        justify-content: center;

    }

    .slider-wrapper{
        overflow: hidden;
        max-width: 1200px;
        margin: 0 15px 55px;

    }

    .page3 .card-list .card-item .user-name{
        font-weight: 700;
        font-size: 30px;
    }

    .page3 .card-list .card-item .user-profession{
        font-weight: 500;
    }
  .page3 .card-list .card-item .user-image{
    width:100% ;
    padding-right:10px ;
    height: 250px;
  }
  .page3 .card-list .card-item .line{
    margin: 40px 4px;
    width: 90%;
    height: 1px;
    background-color: rgb(190, 188, 188);
  }
  .page3 .card-list .card-item h3{
    padding: 5px;
  }

    @media (min-width:800px) {
        .page3 {
           
            padding: 80px;
        }
    
        .page3 h1{
           width: 50%;
           font-size: 50px;
           
        }
    
        .page3 button{
            margin-top: -80px;
          float:right;
        }

        .page3 .card-list .card-item{
            color: var(--box-color);
            background-color: white;
            width:100%;
            height: 600px;
            overflow: hidden;
            display:flex ;
            flex-direction: column;
            justify-content: center;
          
        }
        .page3 .card-list .card-item .user-image{
            width:320px ;
            padding-left:0px ;
            height: 250px;
          }

       
    }

 .page4{
    margin: 80px 20px;
    float: left;
 }

 .page4 img{
    width: 100%;
   
 }

 .page4 h1{
    color: var(--blue);
    font-weight: 700;
 }
 .page4 h1 span{
    color: var(--box-color);
    font-weight: 700;
 }

 .page4 .para5{
    margin: 20px 0px;
    width: 100%;
    color: var(--box-color);

 }

 .page4 .para6{
    margin: 20px 0px;
    color: var(--box-color);
    font-weight: 700;
 }

 .page4 button{
    margin: 70px 0px;
    width: 200px;
    height: 50px;
    font-size: 20px;
    background: var(--backgground);
    border: 1px solid black;
 
    transition: .6s ease;
 }

 .page4 button a{
       color:var(--box-color);
 }

 @media (min-width:900px) {

    .page4 img{
        width: 50.66%;
        height: 500px;
        float: left;

     }
     .page4 h1{
        color: var(--blue);
        font-weight: 700;
        width: 30%;
        float: right;
        margin-right: 146px;

     }
     .page4 h1 span{
        color: var(--box-color);
        font-weight: 700;
     }
    
     .page4 .para5{
        width: 33.66%;
        color: var(--box-color);
        float:right;
        margin-right: 100px;
     
    
     }
    
     .page4 .para6{
        color: var(--box-color);
        font-weight: 700;
        float:right;
        width: 40%;
        margin-right: 26px;
     }
     .page4 button{
      margin-left: 100px;
     }
    
 }

 .page5{
    margin: 80px 20px;
 }

 .page5 .para7{
    letter-spacing: 3px;
    color: var(--blue);
    font: 17px;
 }

 .page5 h1{
    font-weight: 500;
    color: var(--box-color);
    margin: 20px 0;
 }

 .page5 img{
    width: 100%;
    margin: 30px 0;
 }

 .page5 .para8{
  
    color: var(--blue);
    font: 17px;
 }

 .page5 h3{
    color: var(--box-color);
    font-weight: 500;
 }
 @media (min-width:900px){
    .page5{
        margin: 30px 30px;
    }

    .page5 .para7{
        font-size: 19px;
    }

    .page5 h1{
        font-size: 50px;
        width: 500px;
    }
    .page5 .img{
        width: 500px;
        height: 500px;

    }
    .page5 .right{
        float: right;
        width: 45%;
        margin-top: -860px;
    }

    .page5 img{
        width: 250px;
    }
 }

 .footer{
    width: 100%;
    height: fit-content ;
    background: var(--box-color);
    color: white;
    padding: 30px 20px;
 }


 .footer img{
    width: 200px;
    margin-bottom: 30px;
 }

 .footer .para8{
    width: 100%;
    margin-bottom: 30px;

 }
 .footer h4{
    font-size: 20px;
 }

 .footer span{
    margin: 30px 20px;
 }
 .footer span a{
    margin: 10px;
    color: white;
    transition: .3s ease-in-out;

 }
.footer span a:hover{
    color: var(--blue);
}

.footer h2{
    margin: 30px 0px;
    font-size: 25px;
    font-weight: 600;
}

.footer ul li {
    list-style-type: none;
    text-decoration: none;
    padding: 6px 5px;
}

.footer ul li a{
    text-decoration: none;
    color: white;
    font-size: 18px;
    transition: .3s ease-in-out;
}

.footer a:hover{
    color: var(--blue);
}

.footer a{
    font-size: 18px;
    color: white;
    text-decoration: none;
    transition: .3s ease-in-out;
     margin: 10px 0px;
}


.footer .para9{
    margin: 20px 0px;
    font-size: 18px;
}

.footer address{
    font-size: 18px;
    width: 80%;
    margin-bottom: 20px;
}
.footer .para10 a{
   border-bottom: 1px solid;
}
@media (min-width:900px) {
    .footer{
        padding:  50px;
        height: fit-content;

    }

    .footer .para8{
        width: 35%;
        font-size: 20px;

    }

    .footer .right{
        float:right;
        margin-top: -330px;
        width: 50%;
    }
    .footer .right1{
        float:right;
        margin-top: -505px;
        width: 50%;
    }

    .footer ul li {
        list-style-type: none;
        text-decoration: none;
        margin: 20px 0px;
    
    }

    .footer .line{
        width: 100%;
        height: 0.1px;
        background: var(--blue);
        margin-top: 150px;

    }

}

/* index contact style*//* index contact style*//* index contact style*//* index contact style*/
/* index contact style*//* index contact style*/
/* index contact style*//* index contact style*//* index contact style*//* index contact style*/
/* index contact style*/
/* index contact style*//* index contact style*//* index contact style*//* index contact style*/
/* index contact style*/
/* index contact style*/


.bg2{
    background: url(image/Firefly\ people\ worshiping.jpg);
    height: 110vh;
    width: 100%;
    height: fit-content;
   background-position: 40%;
    background-size:cover;
    background-repeat: no-repeat;
}
.bg3{
    z-index: -999;
    height: 110vh;
    height: fit-content;
    width: 100%;
    background: linear-gradient(to top, rgba(2, 6, 73, 0.658), var(--box-color));
}
.page6{
    position: relative;


}

.page6 .para11{
    margin-top: 50px;
    letter-spacing: 4px;
    font-size: 19px;
    font-weight: 500;

}


.page6 h1{
   
    font-size: 50px;
    color: white;
    width: 95%;
    padding: 10px 0px;
    font-weight: 500;   
     margin:5px 10px;
}
.page6 p{
    
    color:white;
   
    font-size: 15px;
    width: 95%;
    margin:5px 15px;
}

.page6 .love{
    color: white;
    margin: auto;
    padding: 15px;
    width: 90%;
    height: 300px;
    background: var(--blue);
    margin-bottom: 100px;
}

.page6 .love h2{
    color: white;
    font-weight: 600;
}

.page6 .love h4{
    font-size: 19px;
    font-weight: 600;
    
}

.page6 form{
 
    background: white;
    margin: -80px 10px;
    padding: 20px;
    width: 94%;


}
.page6 form p{
    font-size: 20px;
    margin: 10px 0px;
    color: var(--box-color);
    font-weight: 600;
}

.page6 form input{
    width: 100%;
    height: 50px;
    outline: none;
    padding: 10px;
    font-size: 17px;
    border: 0.001px solid rgba(2, 2, 87, 0.13);
    transition: .3s ease-in-out;
}

.page6 form input:hover{
    border: 1px solid rgba(2, 2, 87, 0.986);
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.13);
}
.page6 form input::placeholder{
    font-size: 17px;
    padding: 10px;
    color: black;
}

.page6 form textarea{
    resize: none;
    outline: none;
    width: 100%;
    padding: 10px;
    font-size: 17px;
    border: 0.001px solid rgba(2, 2, 87, 0.13);
    transition: .3s ease-in-out;
}

.page6 form textarea:hover{
    border: 1px solid rgba(2, 2, 87, 0.986);
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.13);
}

.page6 form .sub{
    background: var(--box-color);
    color: white;
    border: none;
    outline: none;
}
.page6 form .sub:hover{
    letter-spacing: 3px;
    background: var(--blue);
}
@media (min-width:900px) {
    .page6{
        margin-left: 20px;
    }
   
    .page6 h1{
        width: 40%;
        font-size: 50px;

    }

    .page6 p{
        width: 40%;
        font-size: 20px;
    }
    .page6 .love{
    
        margin:20px 20px;
        padding: 15px;
        width: 40%;
      
    } 
    .page6 .love p{
        width: 100%;
    }

    .page6 .love h2{
        color: white;
        font-weight: 600;
    }
    
    .page6 .love h4{
      width: 40%;
        
    }

    .page6 form{
        margin: 20px;
        float: right;
        width: 50%;
        margin-top: -600px;

    }

    .page6 form input{
        width: 44%;
        height: 60px;
    }
    .page6 form .right1 {
        margin-top: -160px;
        float: right;
        width: 45%;
    }
    .page6 form .right1 p{
        width: 100%;
    }
    .page6 form .right1 input{
        height: 60px;
        width: 100%;
    }

    .bg2{
        height: 133vh;
        min-height: fit-content;
   
        width: 100%; 
    }
    .bg3{
        height: 13vh; 
      min-height: fit-content;
        width: 100%;
    }
    
}

  

@media (min-width:860px) {
    .page6{
        margin-left: 20px;
    }
   
    .page6 h1{
        width: 40%;
        font-size: 60px;

    }

    .page6 p{
        width: 40%;
        font-size: 20px;
    }
}

.line1{
    height: 200px;
}
.page7{
   
  margin: 30px  0;
}

.page7 .para13{
   
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--blue);
}

.page7 .location{
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    color: var(--box-color);
}

.page7 .para14{
    text-align: center;
    color: var(--box-color);
    font-size: 17px;
}

.page7 details{
   margin: 10px;
}

.page7 details summary{
    font-size: 20px;font-weight: 600;
    color: var(--box-color);
    border: 2px solid var(--box-color);
    padding: 10px;
}

.page7 details img{
    margin-top: 10px;
    width: 100%;
}

.page7 .adbox1{
    color: var(--box-color);
      width: 90%;
      margin: 10px 0;
      height: 300px;
  }
  
  .page7 .adbox1 .ad1 img{
      width: 60px;
      padding: 10px;
  }
  
  .page7 .adbox1 .ad1 {
     display: flex;
      
      margin: 10px 0px;
    
  
  }
  .page7 .adbox1 .ad1 h2{
      font-size: 17px;
      font-weight: 800;
      color: var(--blue);
  }
  
  .page7 .adbox1 .ad1 h2 span{
      color:var(--box-color);
      font-size: 17px;
      font-weight: 600;
  }
  
  @media (min-width:1200px) {
    .page7{
        display: block;
        margin: 30px;
    }
    .page7 .adbox1{
          
            width: 100%;
            margin: 0;
            height: 300px;
            background-color: rgb(255, 255, 255);
         
           
            margin-bottom: 100px;
        }
        
        .page7 .adbox1 .ad1 {
            margin: 30px 60px;
        }

        .page7 .local{
           
            display: flex;
            flex-wrap: nowrap;
        }

        .page7 .local details{
            width: 50%;
        }
      }
  

      /* About style begin */ /* About style begin */ /* About style begin */ /* About style begin */
      /* About style begin */ /* About style begin */ /* About style begin */ /* About style begin */
      /* About style begin */ /* About style begin */
      /* About style begin */ /* About style begin */
     

.page8{
    margin: 50px;
    color: white;
}

.page8 h1{
    font-size: 50px;
    font-weight: 600;
    
}

.page8 .btn1{
    width: 90%;
    height: 50px;
    margin: 10px 2px;
    font-weight: bold;
    border: none;
    color:var(--blue);
    margin:5px 10px;
  
}

.page8 .btn1 a{
    font-size: 19px;
    font-weight: 500;
    color: var(--blue);
}

.page8 .btn2{
    width: 90%;
    height: 50px;
    margin: 20px 10px;
    padding: 10px;
    font-weight: bold;
    background: none;
    border: 1px solid white;
    margin-bottom: 90px;
}
.page8 .btn2 a{
    font-size: 19px;
    font-weight: 500;
    color: rgb(255, 255, 255)
}

.page8 button:hover{
   transform: scale(1.051);
    transition: .9s ease-in-out;
    letter-spacing: 1px;
}

@media (min-width:600px) {
    .page8{
       text-align: center;
    }
   
    .page8 h1{
        width: 100%;
        font-size: 30px;

    }

    .page8 p{
        width: 70%;
        font-size: 20px;
    }
    .page8 .btn1{
        width: 130px;
      
     
    }
    .page8 .btn2{
        width: 130px;
       
    }
    
}
@media (min-width:860px) {
    .page8{
        margin: 50px;
    }
   
    .page8 h1{
        width: 100%;
        font-size: 60px;

    }

    .page8 p{
        width: 50%;
        font-size: 20px;
    }
}

.page9{
    margin: 20px;
}

.page9 img{
    width: 100%;
    
}

.page9 h1{
    font-size: 38px;
    font-weight: 600;
    color: var(--box-color);
}
.page9 h1 span{
    font-weight: 600;
    color: var(--blue);
}

.page9 p{
    color: var(--box-color);
    width: 100%;
}

.page9 button{
    width: 200px;
    height: 50px;
    margin: 30px 0;
    border: 1px solid var(--box-color);
    background: var(--backgground);
    transition: .4s ease-in-out;
}

.page9 button a{
    font-size: 19px;
    font-weight: 500;
    color: var(--box-color);
}

.page9 .right0 p{

text-align: justify;
}

.page9 .right0{
    border: 1px solid rgba(31, 2, 77, 0.226);
    padding: 20px;
}

@media (min-width:600px) {
 
    .page9{
        margin: 40px;
    }
    .page9 img{
        width: 40%;
        height: 600px;
    }
    .page9 p{
        width: 40%;
    }

    .page9 .right3{
        width:50% ;
        float: right; 
    }
    .page9 .right3 img{
        width: 80%;
    }
    .page9 .right3 p{
        width: 100%;
    }

    .page9 .right0 img{
        float: right;
        
        width: 50%;
        }

}

.page10{
    width: 100%;
    height: fit-content;
    background: var(--backgground);
    padding: 50px 20px;
}

.page10 .para15{
    letter-spacing: 5px;
    text-align: center;
    font-weight: 500;
    color: var(--blue);
}

.page10 h2{
    font-size: 30px;
    font-weight: 600;
    color: var(--box-color);
    text-align: center;
}

.page10 .para16{
    text-align: center;
    color: var(--box-color);
}

.page10 .box{
    width: 100%;
    border: 0.1px solid rgba(2, 2, 83, 0.295);
    padding: 20px;
    height: 270px,fit-content;
    margin: 20px 0;
    transition: .5s ease-in-out;
}

.page10 .box .image{
    padding: 10px 0;
    background: white;
    display: flex;
    justify-content: center;
    height: 100px;

}

.page10 .box .image img{
    width: 70px; 
}

.page10 .box h3{
    padding: 10px 0;
    font-weight: 500;
    color: var(--box-color);
}
.page10 .box p{
    color: var(--box-color);
    text-align: justify;
}

.page10 .box:hover{
    transform: translateY(-10px);
}

@media (min-width:600px) {
   .page10{
    padding: 20px 50px;
    float: left;
    margin-bottom: 200px;
   } 

   .page10 .box{
    width: 45%;
    float: left;
    margin: 20px;
   }
}

.page11{
    margin: 60px 20px;
}

.page11 .para16{
    text-align: center;
    letter-spacing: 5px;
    font-weight: 500;
    margin: 10px;
    color: var(--blue);
}

.page11 h2{
    text-align: center;
    font-size: 35px;
    font-weight: 600;
    color: var(--box-color);

}
.page11 .para17{
    text-align: center;
    color: var(--box-color);
    margin: 10px;

}
.page11 .fonder{
    width: 100%;
    border: 1px solid rgba(3, 3, 117, 0.233);
    padding: 20px;
}
.page11 img{
    width: 100%;
    height: 250px;
}
.page11 h3{
    margin: 10px 0;
    font-weight: 600;
    color: var(--box-color);
}
.page11 .para18{
    color: var(--box-color);
    margin: 10px 0;
    text-align: justify;
}
.page11 span{
    margin: 30px 20px;
 }
 .page11 span a{
    margin: 10px;
    color: var(--box-color);
    transition: .3s ease-in-out;

 }
.page11 span a:hover{
    color: var(--blue);
}

@media (min-width:600px) {
    .page11 .fonder{
     margin: auto;
     width: 95%;
     column-count: 2;
    }
    .page11 img{
        width: 100%;
        height: 500px;
    }
}

/* style minisities start */ /* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start */
/* style minisities start */ /* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start */
/* style minisities start */ /* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start */
/* style minisities start */ /* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start */
/* style minisities start */ /* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start */
/* style minisities start */ /* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start */ /* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start *//* style minisities start */

.bg3{
    background: url(image/about.jpg);
    height: 110vh;
    width: 100%;
    height: fit-content;
   background-position: 40%;
    background-size:cover;
    background-repeat: no-repeat;
}
.bg2{
    z-index: -999;
    height: 110vh;
    height: fit-content;
    width: 100%;
    background: linear-gradient(to top, rgba(2, 6, 73, 0.658), var(--box-color));
}

.page12{
    margin: auto ;
    color: white;
}

.page12 h1{
    font-size: 50px;
    font-weight: 600;
    margin: 16px;
}

.page12 p{
    width: 90%;
    margin: 10px;

}

.page12 button{
    width: 80%;
    height: 50px;
    background: none;
    border: 1px solid white;
    margin: 16px 10px;
}

.page12 button a{
    font-size: 18px;
    color: white;
    transition: .4s ease-in-out;
}

.page13{
    margin: 20px 20px;
    display: flex;
    flex-wrap: wrap;
   
    
}

.page13 .box {
    padding: 20px;
    border: 1px solid rgba(0, 18, 99, 0.336);
    width: 100%;
    height: 550px fit-content;
    margin: 10px 5px;
  
}

.page13 .box img{width: 100%;
}
.page13 .box h1{
    color: var(--box-color);
    text-transform: capitalize;
    margin: 10px 0;
    font-weight: 600;
}

.page13 .box p{
    font-size: 18px;
    font-weight: 400;
    line-height: 160%;
    margin-bottom: 10px;
    text-align: justify;
}

.page13 .box button{
    width: 100%;
    height: 50px;
    background-color: var(--box-color);
    border: none;
    transition: .4s ease-in-out;
    margin-bottom: 20px;
}

.page13 .box button a{
color: white;
font-size: 19px;
transition: .4s ease-in-out;
}

.page13 .box button:hover{
    background: var(--blue);
}

@media (min-width:1020px) {
    .page12{
        margin: 200px 0 ;
        color: white;
        font-size: 25px;
    }
    .page12 button{
        margin-bottom: 96px ; 
        width: 200px;
    }
    

    .page12 h1{
        font-size: 70px;
      
    }

    .page13 .box {
      display:block;
        width: 48%;


    }
.page14 p{
    text-align: justify;
    font-size: 18px;
    column-count: 2;
}
}

.page14{
    margin: 40px 20px;
}
.page14 h2{
    font-weight: 600;
    color: var(--box-color);
    margin: 10px 0;
}

.page14 p{
    text-align: justify;
    font-size: 18px;
  
}



/*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*/
/*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*/
/*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*//*Events Styles*/
/*Events Styles*//*Events Styles*/
/*Events Styles*//*Events Styles*/
/*Events Styles*/
/*Events Styles*/
/*Events Styles*/


.page15{
    margin: 40px 20px;
}

.page15 img{
    width: 100%;
}

.page15 h2{
    font-weight: 600;
    color: var(--box-color);
    margin: 10px 0;
}

.page15 p{
    color: var(--box-color);
    font-weight: 400;
    margin: 10px 0;
}

.page15 button{
    width: 200px;
    height: 50px;
    color: var(--backgground);
    border: 1px solid var(--box-color);
}

.page15 button a{
font: bold;
font-size: 20px;
color: var(--box-color);
}

@media (min-width:600px) {
    .page15{
        margin: 40px 20px;
  
       
    }
    .page15 img{
        width: 50%;
        height: 500px;
    }
    .page15 .right4{
        float: right;
        width: 45%;
    }
    .page15 h2{
        width: 100%;
        font-size: 40px;
  
    }
    
    .page15 p{
      width: 100%; 
    }
    
    .page15 button{
        width: 200px;
      
    }

}


.page16{
    margin: 50px 20px;
}

.page16 h1{
    font-weight: 700;
    text-align: center;
    color: var(--box-color);
    font-size: 40px;
 
}

.page16 .box{
    border: 1px solid rgba(0, 0, 85, 0.247);
    padding: 20px; 
     color: var(--box-color);
     margin: 20px 0;
     transition: .4s ease-in-out;
     cursor: pointer;
}

.page16 .box img{
    width: 100%;
}

.page16 h2{
    font-weight: 600;
  
}

.page16 p{
    width: 100%;margin-top: 10px;
  
  }

.page16 .box:hover{
    background: var(--backgground);
    transform: translateY(-4px);
}


@media (min-width:900px) {
    .page16{
        margin: 100px 30px;
        
       
    }

    .page16 .boxto{
          flex-wrap: wrap;
          display: flex;
    }
    
    .page16 .box{
        border: 1px solid rgba(0, 0, 85, 0.247);
        padding: 20px; 
        width: 45%;
         color: var(--box-color);
        display: flex;
        gap: 30px;
        margin: 20px;
         
    }
    
    .page16 .box img{
        width: 30%;
        height: 140px;
    }
    
    .page16 h2{
        font-size: 17px;
        width: 100%;
        
      
    }
    .page16 p{
      width: 100%;margin-top: 10px;
    
    }
}


.page17{
    margin: 100px 20px;
}

.page17 img{
    width: 100%;
}

.page17 h2{
    font-weight: 600;
    color: var(--box-color);
    margin: 10px 0;
}

.page17 p{
    color: var(--box-color);
    font-weight: 400;
    margin: 10px 0;
}

.page17 button{
    width: 200px;
    height: 50px;
    color: var(--backgground);
    border: 1px solid var(--box-color);
    margin: 20px 0px;
}

.page17 button a{
font: bold;
font-size: 20px;
color: var(--box-color);
}

@media (min-width:600px) {
    .page17{
      margin: 40px 30px;
       position: relative;
  
       
    }
    .page17 img{
        width: 80%;
        height: 370px;
      
    }
    .page17 .right4{
        margin-top: -310px;
        float:right;
        width: 55%;
       
    }
    .page17 h2{
      
        width: 50%;
        font-size: 40px;
  
    }
    
    .page17 p{
      width: 40%; 
    }
    
    .page17 button{
        width: 200px;
      
    }

}

.page18{

    margin:40px 10px ;
}

.page18 h2{
font-weight: 700;
text-align: center;
text-transform: uppercase;
color: var(--box-color);
}
.page18 table{
    
    color: var(--box-color);
    border: none;
    width: 100%;
    
}

.page18 table th{
    padding: 5px;
    font-size: 15px;
   font-weight: 600;
    background: var(--backgground);
}

.page18 table td{
    padding: 5px;
    font-size: 13px;
    font-weight: 500;
}

@media (min-width:600px) {
    .page18 table{
        font-size: 15px;
        color: var(--box-color);
        border: none;
        width: 100%;
        
    }
    .page18 table th{
        padding: 20px;
        font-size: 25px;
       
    }
    
    .page18 table td{
        padding: 5px;
        font-size: 19px;
        font-weight: 500;
        padding: 20px;
    }
}

.page19{
    margin: 40px 20px;
}

.page19 h2{
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: var(--box-color);
    }
    .page19 table{
        color: var(--box-color);
        border: none;
        width: 100%;
      
          
    }

    .page19 table tr th{  
        display: flex;
        flex-wrap: wrap;
        text-align: left;
        padding: 20px;
        margin: 10px 0;
        width: 100%;
        text-transform: capitalize;
        font-size: 20px;
       font-weight: 600;
       transition: .5s ease-in-out;
       cursor: pointer;
       
    }
      .page19 table th:hover{
         background: var(--backgground);
         letter-spacing: 2px;
      }

      @media (min-width:600px) {

      
        .page19 table tr {
        float: left;
        margin: 15px;
          width: 45%;
        }
      }