*{
    max-width: 100vw;
    margin: 0px;
    padding: 0px;
    z-index: 1;
    font-family: "Poppins", sans-serif;
    font-weight: 550;
}
.button-hover {
    position: relative;
    color: #ffffff;
    cursor: pointer;
    overflow: hidden; /* Ensures the layer stays inside the button */
    transition: color 0.4s ease; /* Transition for text color change */
  }

  /* Transparent overlay effect on hover */
  .button-hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%; /* Start outside the button on the right */
    width: 100%;
    height: 100%;
    background-color:rgba(248, 242, 240, 0.185); /* Slightly transparent white */
    transition: left 0.8s ease; /* Animate the movement of the layer */
  }

  /* Change text color when hovered */
  .button-hover:hover {
    color: #fff; /* Change text color to white when hovered */
  }

  /* Move the transparent overlay to cover the button */
  .button-hover:hover::after {
    left: 0; /* Move the overlay to cover the button from right to left */
  }
  
header{
    background-image: url(image/back1.jpg);
    width: 100%;
    background-size: cover; 
    background-position: center;  
    background-repeat: no-repeat; 
    position: relative;
    color: white;  
    padding: 20px;
}


h1{
    font-size: 54px;
}
h2{
    font-size: 36px;
}
h3{
    font-size:24px;
}
h4{
    font-size: 16px;
}
h5{
    font-size: 12px;
}
h6{
    font-size: 10px;
}
/*main page starts here*/
.navbar{
    max-width: 100vw;
    padding: 2vw 8vw;
    display: flex;
    align-content: center;
    align-items: center;
    gap: 7.5vw;
}
.name{
    width: fit-content;/*logo of the website*/
    font-size: 2.5rem;
}
.icons1{/*first set of navabr icons*/
    display: flex;
    gap: 50px;
    float: left;
    align-content: center;
    align-items: center;
}
.icons2{/*second set of navbar icon*/
    display: flex;
    align-content: center;
    align-items: center;
    gap: 23px;
}
.navbar a{
    text-decoration: none;
    color: white;
}
.touch{
    padding: 10px 15px;
    background-color: rgb(255, 92, 33);
    border-radius: 7px;
    width: fit-content;
}
.award .circle1{
    position: absolute;
    z-index:1;
    top:50px;
    left: 670px;
    font-size:1000px;
    color: #cecece63;
    rotate:calc(180)
}
.award .circle2{
    position: absolute;
    z-index:1;
    top:200px;
    left:-300px;
    font-size:1000px;
    color: #cecece63;
    rotate:calc(180)
}
header{
    height: fit-content;
    overflow: hidden;
    padding-bottom: 5vw;
}
.mid{
    margin-top: 5vw;
    color: white;
    display: flex;
    margin-left: 8vw;
    gap: 8vw;
    position: relative;
}
.mid .workshop{
    position: absolute;
    left: 40%;
    top: 70%;
    width: 180px;
    height: fit-content;
    z-index: 55;
    background-color: white;
    border: solid;
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding: 30px 20px 20px 20px;
}
.workshop h4{
    color:black;
    margin-bottom: 3px;
}
.workshop h5{
    font-size: 14px;
    color: rgb(179, 179, 179);
    margin-bottom: 20px;
}
.workshop a{
    padding: 7px 18px;
    background-color: rgb(255, 92, 33);
    text-decoration: none;
    color: white;
    border-radius: 5px;
}
.workshop img{
    position: absolute;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    border: solid 6px transparent;
    top: -40px;
    background: linear-gradient(rgb(250, 248, 247),rgb(18, 0, 117))border-box;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

}
.text{
    padding-top: 8vw;
    width: fit-content;
}
.text h1{
    font-weight:600;
    margin-bottom: 20px;
}
.text h4{
    font-weight: 400;
    font-size: 14px;
}
.text a{
    color: white;
    text-decoration: none;
}
.but{
    margin-top: 30px;
    display: flex;
    gap: 40px;
}
.but1{
    height: 25px;
    background-color: rgb(255, 92, 33);
    padding: 15px 25px;
    display: flex;
    text-align: center;
    align-items: center;
    align-content: center;
    gap: 5px;
    border-radius: 7px;
}
.but2{
    height: 23px;
    border:solid;
    padding: 15px 25px;
    border: solid white 1px;
    display: flex;
    text-align: center;
    align-items: center;
    align-content: center;
    gap: 5px;
    border-radius: 7px;
}

.mid .image img{
    margin-top: 20px;
    width: 40vw;
    height: 40vw;
    border: solid 20px transparent;
    border: 30px solid transparent;
    background: linear-gradient(  rgb(255, 92, 33),rgb(151, 129, 230))border-box;
    border-radius: 50%;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
/*about us template starts here*/
.about-us{
    margin-top: 10vw;
}
.templates{
  
    margin: 0vw 8vw;
    display: flex;
    align-items: center;
    align-content: center;
    gap: 2vw;
    margin-bottom: 5vw;
}
.template-1{
    width: 19.5vw;
    border: solid 1px rgb(158, 151, 151);
    border-radius: 10px;
    background-color: rgb(236, 234, 234);
    height: fit-content;
    transition: background-color 0.6s ease, transform 1s ease;
}
.template-1:hover{
   background-color:rgb(72, 75, 236); 
   .icon-container1{
    background-color:rgb(72, 75, 236);
    transform: scale(1.1);
   }
}
.temp-back{
    background-color: white;
    padding: 30px 25px 1px 25px;
    border-radius: 10px;
    height: 280px;
    border-radius: 10px 10px 100px 10px;
}
.template-1 i{
    color: white;
    padding: 25px 20px;
    font-size: 32px;
}
.icon-container1{
    width: fit-content;
    background-color: rgb(255, 92, 33);
    border-radius: 50%;
    transition: background-color 0.6s ease, transform 0.8s ease;
}
.temp-back h4{
    margin: 20px 0px;
    font-weight: 700;
    transition: color 0.3s ease, transform 0.3s ease;
}
.temp-back a h4:hover{
    color:#0056b3; 
    transform: scale(1.02); 
}
.template-1 h5{
    font-weight: 400;
    color: gray;
}
.template-1 a{
    text-decoration: none;
    display: flex;
    align-items: center;
    align-content: center;
}
.template-1 a h4{
    color: orangered;
}
/*media query of about us templates for mobile*/
@media (max-width:800px) {
    body{
        max-width: 100vw;
        overflow-x: hidden;
    }
    h1{
        font-size: 50px;
        overflow-x: hidden;
    }
    h2{
        font-size: 32px;
    }
    h3{
        font-size:22px;
    }
    h4{
        font-size: 14px;
    }
    h5{
        font-size: 12px;
    }
    h6{
        font-size: 10px;
    }
    .about-us{
        margin-top: 10vw;
    }
    .templates{
        overflow-x: hidden;
        max-width: 100vw;
        margin: 0vw 0vw;
        display: flex;
        align-items: center;
        align-content: center;
        gap: 5vw;
        flex-direction: column;
        margin-bottom: 5vw;
    }
    .template-1{
        width: 90%;
        border: solid 1px rgb(158, 151, 151);
        border-radius: 10px;
        background-color: rgb(236, 234, 234);
        height: fit-content;
        transition: background-color 0.6s ease, transform 1s ease;
    }
    .template-1:hover{
       background-color:rgb(72, 75, 236); 
       .icon-container1{
        background-color:rgb(72, 75, 236);
        transform: scale(1.1);
       }
    }
    .temp-back{
        background-color: white;
        padding: 20px 20px 1px 25px;
        border-radius: 10px;
        height: fit-content;
        border-radius: 10px 10px 100px 10px;
    }
    .template-1 i{
        color: white;
        padding: 20px 20px;
        font-size: 28px;
    }
    .icon-container1{
        width: fit-content;
        background-color: rgb(255, 92, 33);
        border-radius: 50%;
        transition: background-color 0.6s ease, transform 0.8s ease;
    }
    .temp-back h4{
        margin: 20px 0px;
        font-weight: 700;
        transition: color 0.3s ease, transform 0.3s ease;
    }
    .temp-back a h4:hover{
        color:#0056b3; 
        transform: scale(1.02); 
    }
    .template-1 h5{
        font-weight: 400;
        color: gray;
    }
    .template-1 a{
        text-decoration: none;
        display: flex;
        align-items: center;
        align-content: center;
    }
    .template-1 a h4{
        color: orangered;
    }
    
} 
/*About us content starts here*/
 .aboutus-content{
    display: flex;
    margin-top: 10vw;
    gap: 4vw;
    height: fit-content;
    margin-bottom: 5vw;
}
.text-content h5{
    font-weight: 400;
    color: gray;
}
.image-content{
    height: fit-content;
    position:static;
}
.image-content img{
    margin-left: 6vw;
    height: 42vw;
    width: 42vw;
    border-radius: 50%;
    position:absolute;
}
.text-content{
    margin-left: 48vw;
    margin-right: 8vw;
    width: 42vw;
    position: static;
}
.text-content h3{
    color: rgb(99, 101, 236);
    margin: 20px;
}
.text-content h2{
    color: #2a254d;
    margin-bottom: 20px;
}
.text-content h5{
    margin-bottom: 20px;
}
.div1{
    display: flex;
    flex-direction: column;
    gap: 30px;

}
.div1 .container2{
    border: solid 1px rgb(197, 197, 197);
    display: flex;
    padding: 15px 30px;
    align-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 20px;
}
.text-portion h4{
    margin-bottom: 10px;
    color: #2a254d ;
}
.container2 i{
    font-size: 32px;
    color:  #2a254d;
    padding: 12px;
    background-color: rgb(222, 222, 233);
    border-radius: 5px;
}
.text-content a{
    display: flex;
    text-decoration:none;
    padding: 15px 30px;
    background-color: #4f5de4;
    width: fit-content;
    margin: 30px 0px;
    border-radius: 10px;
    align-content: center;
    align-items: center;
    gap: 10px;
    color: white;
}
.no{
    background-color: rgb(255, 253, 253);
    width: fit-content;
    height: 120px;
    position: absolute;
    z-index: 10;
    border-radius: 10px;
    margin-top: 400px;
    margin-left: 70px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    padding-left: 60px;
    padding-right: 60px;
    align-content: center;
}
.circ {
    width:80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    z-index: 11;
    margin-top: 420px;
    margin-left: 30px;
    background-color: rgb(255, 92, 33);
    align-items: center;
    text-align: center;
    align-content: center;
    font-size: 32px;
    color: white;
    box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.3); 
}
.no h4{
    color: gray;
    margin-bottom: 15px;
    font-weight: 400;
}
.no h3{
    color: #4f5de4;
}  
/*media query of about us templates for mobile*/
@media (max-width:800px) {    
    .aboutus-content{
        display: flex;
        margin-top: 10vw;
        gap: 0vw;
        height: fit-content;
        margin-bottom: 5vw;
        flex-direction: column;
        max-width: 100vw;
        overflow-y: hidden;
    }
    .text-content h5{
        font-weight: 400;
        color: gray;
    }
    .image-content{
        align-content: center;
        height: fit-content;
        position:static;
    }
    .image-content img{
        align-content: center;
        margin-left: 0px;
        height: 90vw;
        width: 90vw;
        border-radius: 50%;
        position:absolute;
        margin: 0px 20px;
    }
    .text-content{
        margin-left: 20px;
        margin-right: 0vw;
        margin-top: 105vw;
        width: 90vw;
        position:relative;
    }
    .text-content h3{
        color: rgb(99, 101, 236);
        margin: 10px 0px;
        font-size: 24px;
    }
    .text-content h2{
        color: #2a254d;
        font-size: 22px;
        margin-bottom: 20px;
    }
    .text-content h5{
        margin-bottom: 20px;
    }
    .div1{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .div1 .container2{
        border: solid 1px rgb(197, 197, 197);
        display: flex;
        padding: 10px 20px;
        align-content: center;
        align-items: center;
        gap: 20px;
        border-radius: 20px;
    }
    .text-portion h4{
        margin-bottom: 8px;
        color: #2a254d ;
    }
    .container2 i{
        text-align: center;
        align-content: center;
        align-items: center;
        font-size: 24px;
        color:  #2a254d;
        padding: 15px ;
        padding-right: 20px;
        background-color: rgb(222, 222, 233);
        border-radius: 5px;
    }
    .text-content a{
        display: flex;
        text-decoration:none;
        padding: 15px 30px;
        background-color: #4f5de4;
        width: fit-content;
        margin: 30px 0px;
        border-radius: 10px;
        align-content: center;
        align-items: center;
        gap: 10px;
        color: white;
    }
    .no{
        background-color: rgb(255, 253, 253);
        width: fit-content;
        height: 90px;
        position: absolute;
        z-index: 10;
        border-radius: 10px;
        margin-top: 270px;
        margin-left: 70px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding-left: 40px;
        padding-right: 20px;
        align-content: center;
    }
    .circ {
        overflow: hidden;
        max-width:80px;
        height: 80px;
        border-radius: 50%;
        position: absolute;
        z-index: 11;
        margin-top: 273px;
        margin-left: 25px;
        background-color: rgb(255, 92, 33);
        align-items: center;
        text-align: center;
        align-content: center;
        font-size: 32px;
        color: white;
        box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.3); 
    }
    .no h4{
        color: gray;
        margin-bottom: 10px;
        font-weight: 400;
        font-size: 14px;
    }
    .no h3{
        color: #4f5de4;
        font-size: 20px;
    }
}
   /*media Query for tablet*/
   @media (min-width:551px) and(max-width:1024px){
    .aboutus-content{
        display: flex;
        margin-top: 10vw;
        gap: 0vw;
        height: fit-content;
        margin-bottom: 5vw;
        flex-direction: column;
        max-width: 100vw;
        overflow-y: hidden;
    }
    .text-content h5{
        font-weight: 400;
        color: gray;
    }
    .image-content{
        align-content: center;
        height: fit-content;
        position:static;
    }
    .image-content img{
        align-content: center;
        margin-left: 0px;
        height: 90vw;
        width: 90vw;
        border-radius: 50%;
        position:absolute;
        margin: 0px 20px;
    }
    .text-content{
        margin-left: 20px;
        margin-right: 0vw;
        margin-top: 105vw;
        width: 90vw;
        position:relative;
    }
    .text-content h3{
        color: rgb(99, 101, 236);
        margin: 10px 0px;
        font-size: 24px;
    }
    .text-content h2{
        color: #2a254d;
        font-size: 22px;
        margin-bottom: 20px;
    }
    .text-content h5{
        margin-bottom: 20px;
    }
    .div1{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .div1 .container2{
        border: solid 1px rgb(197, 197, 197);
        display: flex;
        padding: 10px 20px;
        align-content: center;
        align-items: center;
        gap: 20px;
        border-radius: 20px;
    }
    .text-portion h4{
        margin-bottom: 8px;
        color: #2a254d ;
    }
    .container2 i{
        text-align: center;
        align-content: center;
        align-items: center;
        font-size: 24px;
        color:  #2a254d;
        padding: 15px ;
        padding-right: 20px;
        background-color: rgb(222, 222, 233);
        border-radius: 5px;
    }
    .text-content a{
        display: flex;
        text-decoration:none;
        padding: 15px 30px;
        background-color: #4f5de4;
        width: fit-content;
        margin: 30px 0px;
        border-radius: 10px;
        align-content: center;
        align-items: center;
        gap: 10px;
        color: white;
    }
    .no{
        background-color: rgb(255, 253, 253);
        width: fit-content;
        height: 90px;
        position: absolute;
        z-index: 10;
        border-radius: 10px;
        margin-top: 270px;
        margin-left: 70px;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        padding-left: 40px;
        padding-right: 20px;
        align-content: center;
    }
    .circ {
        overflow: hidden;
        max-width:80px;
        height: 80px;
        border-radius: 50%;
        position: absolute;
        z-index: 11;
        margin-top: 273px;
        margin-left: 25px;
        background-color: rgb(255, 92, 33);
        align-items: center;
        text-align: center;
        align-content: center;
        font-size: 32px;
        color: white;
        box-shadow: -4px 0px 15px rgba(0, 0, 0, 0.3); 
    }
    .no h4{
        color: gray;
        margin-bottom: 10px;
        font-weight: 400;
        font-size: 14px;
    }
    .no h3{
        color: #4f5de4;
        font-size: 20px;
    }
}
*{
    max-width: 100vw;
    margin: 0px;
    padding: 0px;
    z-index: 1;
    font-family: "Poppins", sans-serif;
    font-weight: 550;
}
@media (max-width: 700px) {
    body{
        max-width: 100vw;
    }
    h1{
        font-size: 54px;
    }
    h2{
        font-size: 36px;
    }
    h3{
        font-size:24px;
    }
    h4{
        font-size: 16px;
    }
    h5{
        font-size: 12px;
    }
    h6{
        font-size: 10px;
    }
}






/*course starts here*/
.course{
    padding: 8vw;
    background-color: #f8f7f8;
}
.course h3{
    color: #4f5de4;
    text-align: center;
    margin-bottom: 5px;
}
.course h2{
    color: #2a254d;
    text-align: center;
}
.course-template{
    margin-top: 180px;
    height: 400px;
    width: 26vw;
}
.course-content a{
    width: fit-content;
}

.course-template .temp{
    border: solid 1px rgb(184, 184, 184);
    border-radius: 20px;
    background-color: white;
    position: relative;
    padding:25px;
}
.temp h5{
    color:white;
    background-color: #4f5de4;
    padding:5px 10px;
    width: fit-content;
    border-radius: 5px;
    margin-bottom: 20px;
}
.circ2 i{
    position: absolute;
    margin-top: -100px;
    border-radius: 50%;
    padding: 10px;
    margin-left: 105px;
    background-color: rgb(255, 92, 33);
    color: white;
    z-index: 50;
    font-size: 28px;
    align-content: center;
    text-align: center;
}
.course-template img{
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin-top: -130px;
    margin-left: 130px;
    z-index: 12;
    border: 5px solid #f8f7f8;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.course-template a{
    text-decoration: none;
}
.active{
    color: orangered;
}
.stars{
    color: gray;
    margin-bottom: 10px;
}
.stars i{
    cursor: pointer;
}
.temp p1 {
    text-align: left;
    color: #2a254d;
    font-size: 20px;
    margin-bottom: 50px;
}
.price-box{
    display: flex;
    margin-top: 20px;
    align-items: center;
    align-content: center;
    gap: 60px;
    background-color: #f3f1f3;
    padding: 10px 15px;
    border-radius: 10px;
}
.price-box h5{
    background-color:#f3f1f3;
    color: gray;
    font-weight: 400;
    padding: 0px;
    margin: 0px;
}
.price-info{
    text-align: center;
    align-content: center;
    align-items: center;
    line-height: 16px;
}
.price-info h3{
    color: orangered;
}
.price-info h4{
    color:#4f5de4;
}
.course-box{
    display: grid;
    grid-template-columns: 26vw 3vw 26vw 3vw 26vw;
    grid-template-rows:400px 60px 400px;
}
.box1{
    grid-row: 1/2;
    grid-column: 1/2;
}
.box2{
    grid-row: 1/2;
    grid-column: 3/4;
}
.box3{
    grid-row: 1/2;
    grid-column: 5/6;
}
.box4{
    grid-row: 3/4;
    grid-column: 1/2;
}
.box5{
    grid-row: 3/4;
    grid-column:3/4;
}
.box6{
    grid-row: 3/4;
    grid-column:5/6;
}
@media(max-width:800px){
    .course{
        max-width: 100vw;
        overflow: hidden;
        padding: 2vw;
        background-color: #f8f7f8;
    }
    .course h3{
        color: #4f5de4;
        text-align: center;
        margin-bottom: 5px;
        font-size: 24px;
    }
    .course h2{
        color: #2a254d;
        text-align: center;
        font-size: 20px;
    }
    .course-template{
        margin-top: 180px;
        height: 400px;
        width: 100%;
    }
    .course-content a{
        width: fit-content;
    }
    
    .course-template .temp{
        border: solid 1px rgb(184, 184, 184);
        border-radius: 20px;
        background-color: white;
        position: relative;
        padding:25px;
    }
    .temp h5{
        color:white;
        background-color: #4f5de4;
        padding:5px 10px;
        width: fit-content;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    .circ2 i{
        position: absolute;
        margin-top: -100px;
        border-radius: 50%;
        padding: 10px;
        margin-left: 105px;
        background-color: rgb(255, 92, 33);
        color: white;
        z-index: 50;
        font-size: 28px;
        align-content: center;
        text-align: center;
    }
    .course-template img{
        position: absolute;
        height: 200px;
        width: 200px;
        border-radius: 50%;
        margin-top: -130px;
        margin-left: 130px;
        z-index: 12;
        border: 5px solid #f8f7f8;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
    .course-template a{
        text-decoration: none;
    }
    .active{
        color: orangered;
    }
    .stars{
        color: gray;
        margin-bottom: 10px;
    }
    .stars i{
        cursor: pointer;
    }
    .temp p1 {
        text-align: left;
        color: #2a254d;
        font-size: 20px;
        margin-bottom: 50px;
    }
    .price-box{
        display: flex;
        margin-top: 20px;
        align-items: center;
        align-content: center;
        gap: 60px;
        background-color: #f3f1f3;
        padding: 10px 15px;
        border-radius: 10px;
    }
    .price-box h5{
        background-color:#f3f1f3;
        color: gray;
        font-weight: 400;
        padding: 0px;
        margin: 0px;
    }
    .price-info{
        text-align: center;
        align-content: center;
        align-items: center;
        line-height: 16px;
    }
    .price-info h3{
        color: orangered;
    }
    .price-info h4{
        color:#4f5de4;
    }
    .course-box{
        display: grid;
        grid-template-columns:96vw;
        grid-template-rows:80px 96vw 80px 96vw 80px 96vw 80px 96vw 80px 96vw 80px 96vw;
        margin-bottom: 80px;
    }
    .box1{
        grid-row: 1/2;
        grid-column: 1/2;
    }
    .box2{
        grid-row: 3/4;
        grid-column: 1/2;
    }
    .box3{
        grid-row: 5/6;
        grid-column: 1/2;
    }
    .box4{
        grid-row: 7/8;
        grid-column: 1/2;
    }
    .box5{
        grid-row: 9/10;
        grid-column:1/2;
    }
    .box6{
        grid-row: 11/12;
        grid-column:1/2;
    }
}
/*create account starts here*/
.account{
    padding-top: 4vw;
    padding-bottom: 4vw;
    max-width:100vw;
    height:fit-content;
    background-color: #4f5de4;
    color: white;
    display: flex;
    gap: 8vw;

}
.create{
    width: 42vw;
    padding-left: 8vw;
    padding-top: 4vw;
}
.create .info{
    margin-top: 20px;
    padding: 20px;
    background-color:rgba(163, 204, 221, 0.226);
    border-radius: 8px;
}
.info h4{
    font-weight: 400;
}
.create a{
    text-decoration: none;
}
.create a h4{
    margin-top: 30px;
    text-decoration: none;
    padding: 10px 30px;
    background-color: rgb(255, 92, 33);
    width: fit-content;
    color: white;
    border-radius: 8px;
}
.time{
    width: 30vw;
    height: 30vw;
    border-radius: 50%;
    background-color: white;
    text-align: center;
    color: #2a254d;
}
.time p{
    margin-top: 40px;
}
.orr{
    color: orangered;
}
@media(max-width:800px){
    .account{
        overflow-x: hidden;
        padding: 0vw 2vw;
        max-width: 100vw;
        padding-top: 4vw;
        padding-bottom: 4vw;
        height:fit-content;
        background-color: #4f5de4;
        color: white;
        display: flex;
        flex-direction: column;
        gap: 4vw;
    }
    .create{
        padding: 5vw;
        width: 90vw;
        padding-left: 2vw;
        padding-top: 4vw;
    }
    .create .info{
        width: 80vw;
        margin-top: 20px;
        padding: 20px;
        background-color:rgba(163, 204, 221, 0.226);
        border-radius: 8px;
    }
    .info h4{
        font-weight: 400;
    }
    .create a{
        text-decoration: none;
    }
    .create a h4{
        margin-top: 30px;
        text-decoration: none;
        padding: 10px 30px;
        background-color: rgb(255, 92, 33);
        width: fit-content;
        color: white;
        border-radius: 8px;
    }
    .time{
        width: 92vw;
        margin: 2vw;
        height: 92vw;
        border-radius: 50%;
        background-color: white;
        text-align: center;
        color: #2a254d;
    }
    .time p{
        margin-top: 40px;
    }
    .orr{
        color: orangered;
    }
}
/*team starts here*/
.team{
    text-align: center;
    padding :8vw;
    background-color:#dad9da;
}
.team h3{
    color: #4f5de4;
}
.team h4{
    color: #2a254d;
}
.team-info{
    margin-top: 3vw;
    width:fit-content;
    display: flex;
    gap: 3vw;
    align-items: center;
}
.team1{
    width: 26vw;
    padding:1vw 0vw 0vw 0vw ;
    position: relative;
    transition:0.5s ease, 0.5s ease;
}
.team1 img{
    width: 24vw;
    height: 30vw;
    border-radius: 20px;
}
.col{
    top: 0px;
    bottom:0px;
    width: 40%;
    height: 40%;
    border-radius: 20px;
    background-color:#4f5de4;
    position: absolute;
    z-index: -5;
    transition: background-color 0.5s ease, transform 0.5s ease;
}
.col:hover{
    background-color: rgb(255, 92, 33);
    transform: scale(1.05);
}
.team1 img:hover +.col{
    background-color: rgb(255, 92, 33);
    transform: scale(1.05);
}
@media(max-width:700px){
    .team{
        max-width: 100vw;
        overflow-x: hidden;
        text-align: center;
        padding :5vw;
        background-color:#dad9da;
    }
    .team h3{
        color: #4f5de4;
    }
    .team h2{
        font-size: 16px;
        color: #2a254d;
    }
    .team-info{
        margin-top: 3vw;
        width:fit-content;
        display: flex;
        flex-direction: column;
        gap: 3vw;
        align-items: center;
    }
    .team1{
        width:90vw;
        padding:2vw 0vw 0vw 0vw ;
        position: relative;
        transition:0.5s ease, 0.5s ease;
    }
    .team1 img{
        width: 85vw;
        height: 90vw;
        border-radius: 10px;
    }
    .col{
        top: 0px;
        bottom:0px;
        width: 40%;
        height: 40%;
        border-radius: 10px;
        background-color:#4f5de4;
        position: absolute;
        z-index: -5;
        transition: background-color 0.5s ease, transform 0.5s ease;
    }
    .col:hover{
        background-color: rgb(255, 92, 33);
        transform: scale(1.05);
    }
    .team1 img:hover +.col{
        background-color: rgb(255, 92, 33);
        transform: scale(1.05);
    }
}
.blog{
    padding: 8vw;
    text-align: center;
}
.blog h3{
    color: #4f5de4;
}
.blog-container{
    display: grid;
    grid-template-rows:25vw 2vw 25vw ;
    grid-template-columns: 50vw 2vw 32vw;
}
.blog h2{
    color: #2a254d;
    margin-bottom: 2vw;
}
.blog-1{
    width: 50vw;
    height: 25vw;
    grid-row: 1/2;
    grid-column: 1/2;
    border: solid 1px rgb(202, 202, 202);
    border-radius: 20px;
}
.blog-2{
    width: 50vw;
    border: solid 1px rgb(202, 202, 202);
    height: 25vw;
    grid-row: 3/4;
    grid-column: 1/2;
    border-radius: 20px;
}
.blog-3{
    border: solid 1px rgb(202, 202, 202);
    grid-row: 1/4;
    grid-column: 3/4;
    width: 32vw;
    height: 52vw;
    border-radius: 15px;
}
.blog-1{
    border: solid 1px rgb(202, 202, 202);
    display: flex;
    gap: 0vw;
    object-fit: cover;
}
.blog-1 img{
    width: 40%;
    height: 100%;
    border-radius: 20px 0px 0px 20px;
}
.blog-1 .blog-text{
    width: 60%;
    padding: 30px 20px;
    text-align: left;
}
.blog-text h5{
    padding: 5px 10px;
    background-color: #4f5de4;
    color: white;
    width: fit-content;
    border-radius: 8px;
    margin-bottom: 30px;
}
.blog-text h2{
    line-height: 44px;
    font-size: 32px;
    margin-bottom: 20px;
}
.flex-info{
    display: flex;
    align-content: center;
    align-items: center;
    height: fit-content;
    padding: 15px 20px;
    gap:15px;
    background-color: #f3f1f3;
    border-radius: 5px;
}
.flex-info img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.s1{
    margin-right: 20px;
}
.s1 h4{
    margin-right: 20px;
}
.s1 h5{
    background-color:transparent;
    padding: 0px;
    margin: 0px;
    color: rgb(180, 180, 180);
    font-weight: 400;
}
.s2 h4{
    color: orangered;
}
.blog-2{
    border: solid 1px rgb(202, 202, 202);
    display: flex;
    gap: 0vw;
    object-fit: cover;
}
.blog-2 img{
    width: 40%;
    height: 100%;
    border-radius: 20px 0px 0px 20px;
}
.blog-2 .blog-text{
    width: 60%;
    padding: 30px 20px;
    text-align: left;
}
.flex-info img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.blog-3{
    position: relative;
    text-align: center;
    background-color: rgba(18, 18, 56, 0.9); /* Semi-transparent black background */
    backdrop-filter: blur(10px);    
}
.blog-3::after{
    content: "";                 
    position: absolute;                  
    top: 0; bottom: 0; left: 0; right: 0;  
    background-image: url(image/bmcbuilding.jpg); 
    background-size: cover;               
    background-position: center center;   
    opacity: 0.5;                     
    z-index: -1;  
    border-radius: 15px;
            
}
.blog-3-container{
    width: 100%;
    height: 100%;
}
.blog-3 i{
    position: relative;
    font-size: 48px;
    padding: 30px 28px;
    border-radius: 50%;
    background-color: #4551c2;
    color: white;
    margin-bottom: 30px;
    margin-top: 100px;
}
.blog-3 h2{
    font-size: 32px;
    color: white;
    margin-bottom: 100px;
}
.login-container{
    margin-top: 50px;
    position: relative;
}
input[type="email"] {
  padding: 15px 25px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  color: gray;
  font-weight: 450;
}
button {
  padding: 15px;
  background-color: rgb(255, 92, 33);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}
.login-container form{
    display: flex;
    flex-direction: column;
    width: auto;
    gap: 0px;
    margin-bottom: 20px;
}
.login-container{
    margin: 60px 60px 20px 60px;
}
.login-container h4{
    color: white;
    font-size: 18px;
    font-weight: 200;
}
@media(max-width:800px){
    .blog{
        max-width: 100vw;
        overflow-x:hidden;
        padding: 5vw;
        text-align: center;
    }
    .blog h3{
        color: #4f5de4;
        font-size: 24px;
    }
    .blog-container{
        display: grid;
        grid-template-rows:120vw 30px 120vw 30px 200vw ;
        grid-template-columns: 90vw;
    }
    .blog h2{
        color: #2a254d;
        margin-bottom: 2vw;
        font-size: 16px;
    }
    .blog-1{
        width: 90vw;
        height: 120vw;
        grid-row: 1/2;
        grid-column: 1/2;
        border: solid 1px rgb(202, 202, 202);
        border-radius: 20px;
    }
    .blog-2{
        width: 90vw;
        border: solid 1px rgb(202, 202, 202);
        height: 120vw;
        grid-row: 3/4;
        grid-column: 1/2;
        border-radius: 20px;
    }
    .blog-3{
        border: solid 1px rgb(202, 202, 202);
        grid-row: 5/6;
        grid-column: 1/2;
        width: 90vw;
        height: 150vw;
        border-radius: 15px;
    }
    .blog-1{
        border: solid 1px rgb(202, 202, 202);
        display: flex;
        flex-direction: column;
        gap: 0vw;
        object-fit: cover;
    }
    .blog-1 img{
        width: 100%;
        height: 60%;
        border-radius: 20px 20px 0px 0px;
    }
    .blog-1 .blog-text{
        width: 100%;
        height: 40%;
        padding: 10px 25px;
        text-align: left;
    }
    .blog-text h5{
        padding: 5px 10px;
        background-color: #4f5de4;
        color: white;
        width: fit-content;
        border-radius: 8px;
        margin-bottom: 20px;
    }
    .blog-text h2{
        width: 80vw;
        line-height: 20px;
        font-size: 16px;
        margin-bottom: 10px;
    }
    .flex-info{
        display: flex;
        align-content: center;
        align-items: center;
        height: fit-content;
        padding: 6px 10px;
        gap:10px;
        background-color: #f3f1f3;
        border-radius: 5px;
        width: fit-content;
    }
    .flex-info img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .s1{
        margin-right: 10px;
    }
    .s1 h4{
        margin-right: 10px;
        font-size: 12px;
    }
    .s1 h5{
        background-color:transparent;
        padding: 0px;
        margin: 0px;
        color: rgb(180, 180, 180);
        font-weight: 400;
        font-size: 10px;
    }
    .s2 h4{
        color: orangered;
        font-size: 12px;
    }
    .blog-2{
        border: solid 1px rgb(202, 202, 202);
        display: flex;
        flex-direction: column;
        gap: 0vw;
        object-fit: cover;
    }
    .blog-2 img{
        width: 100%;
        height: 60%;
        border-radius: 20px 20px 0px 0px;
    }
    .blog-2 .blog-text{
        width: 100%;
        height: 40%;
        padding: 10px 25px;
        text-align: left;
    }
    .flex-info img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }
    .blog-3{
        position: relative;
        text-align: center;
        background-color: rgba(18, 18, 56, 0.9); /* Semi-transparent black background */
        backdrop-filter: blur(10px);    
    }
    .blog-3::after{
        content: "";                 
        position: absolute;                  
        top: 0; bottom: 0; left: 0; right: 0;  
        background-image: url(image/image1.jpg); 
        background-size: cover;               
        background-position: center center;   
        opacity: 0.5;                     
        z-index: -1;  
        border-radius: 15px;
                
    }
    .blog-3-container{
        width: 100%;
        height: 100%;
    }
    .blog-3 i{
        position: relative;
        font-size: 32px;
        padding: 25px;
        border-radius: 50%;
        background-color: #4551c2;
        color: white;
        margin-bottom: 30px;
        margin-top: 60px;
    }
    .blog-3 h2{
        font-size: 28px;
        color: white;
        margin-bottom: 40px;
    }
    .login-container{
        margin-top: 10px;
        position: relative;
    }
    input[type="email"] {
      padding: 15px 25px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 16px;
      color: gray;
      font-weight: 450;
    }
    button {
      padding: 15px;
      background-color: rgb(255, 92, 33);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      margin-top: 10px;
    }
    .login-container form{
        display: flex;
        flex-direction: column;
        width: auto;
        gap: 0px;
        margin-bottom: 20px;
    }
    .login-container{
        margin: 30px 30px 20px 30px;
    }
    .login-container h4{
        color: white;
        font-size: 16px;
        font-weight: 300;
    }
    
}
.foot{
    max-width: 100vw;
    padding: 8vw;
    background-color: #2a254d;
    display: flex;
    gap:3vw;
}
.eduact{
    width: 25vw;
}
.eduact h2{
    margin-bottom: 15px;
}
.eduact a{
    text-decoration: none;
    color: rgb(202, 202, 202);
}
.eduact .links{
    display: flex;
    gap: 20px;
}
.eduact .links .fa-facebook-f{
    padding: 10px 12px;
}
.eduact .links i{
    background-color: #221e3d;
    border-radius: 50%;
    padding: 10px ;
}
.eduact h4{
    font-weight: 300;
    color: rgb(202, 202, 202);
    margin-bottom: 25px;
}
.quick-links{
    width: 12.5vw;
}
.quick-links a{
    text-decoration: none;
    color:rgb(180, 180, 180);
}
.explore a {
    text-decoration: none;
    color:rgb(180, 180, 180);
}
.explore{
    width: 12.5vw;
}
.contact-us{
    width: 25vw;
}
.links-foot{
    display: flex;
    flex-direction:column;
    gap: 10px;
}
.links-foot a{
    font-weight: 400;
}
.foot h3{
    color: rgb(202, 202, 202);
    margin-bottom: 30px;
}
.contact-content{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-bottom:20px ;
}
.contact-content h4 p{
    text-decoration: none;
    color:rgb(180, 180, 180);
    font-weight: 300;
}
.contact-content i{
    color: rgb(209, 86, 41);
    font-size: 24px;
}
.contact-content .fa-location-dot{
    margin-right: 5px;
}
.subscribe form{
    display: flex;
    max-width: 25vw;
}
 .subscribe input[type="email"] {
    padding: 15px ;
    margin: 10px 0;
    border: 1px solid #9b9b9b;
    border-radius: 5px 0px 0px 5px;
    font-size: 16px;
    color: gray;
    font-weight: 450;
    width: 65%;
    height: 30px;
    background-color: transparent;
  }
 .subscribe button {
    padding: 15px;
    background-color: rgb(255, 92, 33);
    color: white;
    border: none;
    border-radius: 0px 5px 5px 0px;
    font-size: 16px;
    cursor: pointer;
    width: 35%;
    height: 62px;
    margin-top: 10px;
  }
input:focus{
    outline: none;
}
@media(max-width:800px){
    .foot{
        overflow-x: hidden;
        width: 92vw;
        padding: 4vw;
        background-color: #2a254d;
        display: flex;
        flex-direction: column;
        gap:7vw;
    }
    .eduact{
        width:80vw;
    }
    .eduact h2{
        margin-bottom: 15px;
        font-size: 32px;
    }
    .eduact a{
        text-decoration: none;
        color: rgb(202, 202, 202);
    }
    .eduact .links{
        display: flex;
        gap: 10px;
    }
    .eduact .links .fa-facebook-f{
        padding: 10px 12px;
    }
    .eduact .links i{
        background-color: #221e3d;
        border-radius: 50%;
        padding: 10px ;
    }
    .eduact h4{
        font-weight: 300;
        color: rgb(202, 202, 202);
        margin-bottom: 25px;
    }
    .quick-links{
        width: 50vw;
    }
    .quick-links a{
        text-decoration: none;
        color:rgb(180, 180, 180);
    }
    .explore a {
        text-decoration: none;
        color:rgb(180, 180, 180);
    }
    .explore{
        width: 50vw;
    }
    .contact-us{
        width: 60vw;
    }
    .links-foot{
        display: flex;
        flex-direction:column;
        gap: 10px;
    }
    .links-foot a{
        font-weight: 400;
    }
    .foot h3{
        color: rgb(202, 202, 202);
        margin-bottom: 10px;
    }
    .contact-content{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        margin-bottom:10px ;
    }
    .contact-content h4 p{
        text-decoration: none;
        color:rgb(180, 180, 180);
        font-weight: 300;
    }
    .contact-content i{
        color: rgb(209, 86, 41);
        font-size: 14px;
    }
    .contact-content .fa-location-dot{
        margin-right: 5px;
    }
    .subscribe form{
        display: flex;
        max-width: 80vw;
    }
     .subscribe input[type="email"] {
        padding: 15px ;
        margin: 10px 0;
        border: 1px solid #9b9b9b;
        border-radius: 5px 0px 0px 5px;
        font-size: 16px;
        color: gray;
        font-weight: 450;
        width: 65%;
        height: 25px;
        background-color: transparent;
      }
     .subscribe button {
        padding: 15px;
        background-color: rgb(255, 92, 33);
        color: white;
        border: none;
        border-radius: 0px 5px 5px 0px;
        font-size: 16px;
        cursor: pointer;
        width: 35%;
        height: 58px;
        width: fit-content;
        margin-top: 10px;
      }
    input:focus{
        outline: none;
    }
}
footer{
    overflow-x: hidden;
    background-color: #221e3d;
}
footer h4{
    padding: 20px;
    color:rgb(180, 180, 180);
    font-weight: 300;
    text-align: center; 
}