@import url('https://fonts.googleapis.com/css?family Poppins:wght@100;200;380;400;500;600:700;800;900&display=swaр');
• {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { font-family: 'Poppins', sans-serif;
} 

h1{
font-size: 2.5rem;
font-weight: 700;
color: rgb(35, 15, 85);
}
span { font-size: 2.5rem ;
   color: #757373;
}
h6{
font-size: 1.1rem;
color: rgb(24, 24, 49);
}
nav {
   position: fixed;
   width: 100vw;
   background-color: #fff;
   display: flex;
   flex-direction: row;
   justify-content:space-around;
   align-items: center;
   padding: 1vw 8vw;
   box-shadow: 2px 2px 10px rgba(0,0,0,0.15);
   z-index: 999;
   top:0%;
   left:0%;
}
nav img{
   width: 90px;
   height:auto;
   cursor: pointer;
   margin-right:550px;
   margin-left:0px;
   }
   nav .navigation{
       display: flex;
       margin:0px 150px;
   }
   #menu-btn{
       width: 30px;
       height: 30px;
       display: none;
   }
   #menu-close{
       display: none;
   }
   #menu-icon {
    display: none; /* show the menu icon by default */
}
   nav .navigation ul{
       display: flex;
       justify-content: flex-end;
       align-items: center;
   }
   nav .navigation ul li{
       list-style: none;
       margin-left: 30px;
   }
   nav .navigation ul li a {
       text-decoration: none;
       color: rgb(21,21,100);
       font-size: 16px;
       font-weight: 500;
       transition: 0.3s ease;
   }
  
   nav .navigation ul li a.active,
   nav .navigation ul li a:hover{
       color: #FDC93B;
   }
   #home{
       background-image: linear-gradient(rgba(9,5,54,0.3),rgba(5,4,46,0.7)),url("new2.jpg");
       width: 100%;
       height: 100vh;
       background-size: cover;
       background-position: center;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       text-align: center;
       padding-top: 40px;
       animation: fadein 1s ease-in-out;
   }
   /*fadein animation*/
   @keyframes fadein{
    from { opacity: 0; 
        transform: scale(0);
    }
    to {
        opacity:1;
        transform: scale(1);
    }
   }
   /*opacity animation*/
   @keyframes fade{
    from { opacity: 0;
    }
    to {
        opacity:1;
    }
   }
   #home h2{
       color: #fff;
       font-size: 2.2rem;
       letter-spacing: 1px;
       
   }
   #home p{
       width: 50%;
       color: #fff;
       font-size: 0.9rem;
       letter-spacing: 1px;
       line-height: 25px;
   }
   #home .btn{
       margin-top: 30px;
   }
   #home a{
       text-decoration: none;
       font-size: 0.9rem;
       padding: 13px 35px;
       background-color: #fff;
       font-weight: 600;
       border-radius: 5px;
   }
   #home a.blue{
       color: #fff;
       background: rgb(21,21,100);
       transition: 0.3s ease;
   }
   #home a.blue:hover {
       color: rgb(21,21,100);
       background: #fff;
   }
   #home a.yellow{
       color: #fff;
       background: #FDC93B;
       transition: 0.3s ease;
   }
   #home a.yellow:hover {
       color: rgb(21,21,100);
       background: #fff;
   }
   .featuretitle{
    animation: fadein 2s ease-in-out;
       animation-timeline: view();
       animation-duration: 5s;
       animation-range: entry 50% cover 10%;
   }
   #features{
       padding: 5vw 8vw 0 8vw;
       text-align: center;
   }
   #features .fea-base{
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
       grid-gap: 1rem;
       margin-top: 50px;
   }
    #features .fea-box {
           background: #e0e0e2;
           text-align: start;
           padding:20px;
           border-radius:20px;
        
    }
    #features .fea-box i {
       font-size: 2.3rem;
       color: rgb(44,44,80);
    }
    #features .fea-box h3 {
       font-size: 1.2rem;
       font-weight: 600;
       color: rgb(46,46,59);
       padding: 13px 0 7px 0;
    }
    #features .fea-box p {
       font-size: 1rem;
       font-weight: 400;
       color: rgb(70,70,87);
      
    }
    #course {
        padding: 8vw 8vw 8vw 8vw;
        margin-top: 0%;
        text-align: center;
        overflow-x: auto; /* Enable horizontal scrolling */
      }
      
      #course .course-box {
        display: flex; /* Use flexbox for horizontal layout */
        flex-wrap: nowrap; /* Prevent wrapping to new lines */
        margin-top: 50px;
      }
      
      #course .courses {
        text-align: start;
        background: #F9F9FF;
        height: 250px; /* Set a fixed height for the course box */
        width: 250px; /* Set a fixed width for the course box */
        margin: 10px; /* Add some margin between course boxes */
        display: flex; /* Use flexbox for vertical layout */
        flex-direction: column; /* Stack elements vertically */
      }
      
      #course .courses img {
        width:100%;
        height: 450px; /* Adjust image height */
        background-size: cover;
        background-position: center;
        border-radius: 10px 10px 0 0; /* Add rounded corners to the image */
      }
      #course .courses .details span{
        font-size: 1.1rem;
      }
      #course .courses .details {
        padding: 15px;
        flex-grow: 1; /* Take up remaining space */
      }
      
      #course .courses .details i {
        color: #FDC93B;
        font-size: 0.9rem;
      }
      
      #course .courses .cost {
        background-color: rgb(74, 74, 136);
        color: #fff;
        line-height: 70px;
        width: 70px;
        height: 70px;
        text-align: center;
        border-radius: 50%;
        position: absolute;
        right: 15px;
        bottom: 15px; /* Adjust position of the cost badge */
      }
    #registration{
       padding:20px;
       margin:0%;
       background-image: linear-gradient(rgba(99,112,168,0.5),rgba(81,91,233,0.5)),url("logos/images.jpg");
       width: auto;
       height: 100%;
       background-size: 100vw;
       background-position: center;
       display: flex;
       justify-content: space-evenly;
       align-items: center;
      
    }
    #registration .reminder{
       color:#fff;
    }
    #registration .h1{
       color:#fff;
      
    }
    #registration .reminder .time{
       display: flex;
       margin-top: 40px;
        }
        #registration .reminder .time .date{
           text-align: center;
           padding: 13px 33px;
           background: rgba(255, 255, 255, 0.25);
           backdrop-filter: blur(4px);
           box-shadow: 0 8px 32px 0 rgba(31 28 135 0.37);
           border-radius: 10px;
           margin: 0 5px 10px 5px;
           border: 1px solid rgba(255 255 255 0.18);
           font-size: 1.1rem;
           font-weight: 600;
        }
        #registration .form{
           background: #fff;
           border-radius: 8px;
           display: flex;
           flex-direction: column;
           margin:0%;
           padding: 40px;
           left:20%;
           box-shadow: 0 8px 32px 0 rgba(31 28 135 0.37);
        }
        #registration .form input{
           margin: 15px 0;
           padding: 15px 10px;
           border: 1px solid rgb(84 40 241);
           outline: none;
        }
        #registration .form input::placeholder{
           color: #413c3c;
           font-weight: 500;
           font-size: 0.9rem;
        }
        #registration .form .btn{
           margin-top: 20px;
        }
        #registration .form a.yellow{
           text-decoration: none;
       font-size: 0.9rem;
       padding: 13px 35px;
       background-color: #fff;
       font-weight: 600;
       border-radius: 5px;
           color: #fff;
           background: #FDC93B;
           transition: 0.3s ease;
       }
       #registration .form a.yellow:hover {
           color: rgb(21,21,100);
           background: #fff;
       }
       #experts {
        padding: 8vw 8vw 8vw 8vw;
        text-align: center;
    }
    
    #experts .expert-box {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        grid-gap: 1rem;
        margin-top: 50px;
    }
    
    #experts .expert-box .profile {
        background: linear-gradient(rgba(199, 195, 241, 0.3),rgba(255, 197, 6, 0.7));
        padding: 30px 10px;
        display: flex;
        border-radius: 20px;
        box-shadow: 0px 8px 10px #817f7f;
        margin:0px 30px;
        flex-direction: column;
        align-items: center;
    }
    
    #experts .expert-box .profile img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin-bottom: 20px;
    }
    
    #experts .expert-box .profile h6 {
        margin-top: 0;
    }
    
    #experts .expert-box .profile .pro-links {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .pro-links #links{
        border-radius: 20px;
        padding:10px 13px;
        margin:5px;
        color:white;
        background-color: #101C32;
        transition: transform 0.5s ;
    }
    .pro-links #links:hover{
        transform: scale(1.1);
        background-color: white;
        color:black;
        cursor:pointer;
        padding:10px 13px;
    }
    #experts .expert-box .profile  {
        padding: 10px 13px;
        border: 1px solid rgb(173, 173, 173);
        cursor: pointer;
        transition: 0.3s ease;
    }
    
    #experts .expert-box .profile .pro-links i:hover {
        background: rgb(21 21 100);
        color: #fff;
        border: 1px solid rgb(21 21 100);
        cursor: pointer;
    }
       footer{
           padding: 8vw;
           background-color: #101C32;
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           flex-wrap: wrap;
       }
       footer .footer-col{
           padding-bottom: 40px;
       }
       footer h3{
           color: rgb(241 240 245);
           font-weight: 600;
           padding-bottom: 20px;
       }
       footer li{
           list-style: none;
           color: #7b838a;
           padding: 10px 0;
           font-size: 15px;
           cursor: pointer;
           transition:0.3s ease;
       }
       footer li:hover{
           color: rgb(241 240 245);
       }
       footer p{
           color: #7b838a;
       }
       footer .subscribe{
           margin-top: 20px;
       }
       footer input{
           width: 220px;
           padding: 15px 12px;
           background: #334F6C;
           border: none;
           outline: none;
           color: #fff;
       }
       footer .subscribe a{
       text-decoration: none;
       font-size: 0.9rem;
       padding: 13px 35px;
       background-color: #fff;
       font-weight: 600;
      
   }
  
   footer .subscribe a.yellow{
       color: #fff;
       background: #FDC93B;
       transition: 0.3s ease;
   }
   footer .subscribe a.yellow:hover {
       color: rgb(21,21,100);
       background: #fff;
   }
   footer .copyright{
       margin-top: 20px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       flex-wrap: wrap;
   }
   footer .copyright p{
       color: #fff;
   }
   footer .copyright .pro-links{
       margin-top: 0px;
   }
   .pro-links a{
    text-decoration: none;
   }
   footer .copyright .pro-links i{
       background-color: #5f7185;
       color: #fff;
   }
   footer .copyright .pro-links i:hover {
       background-color: #FDC93B;
       color: #2c2c2c;
   }
   #footlink{
    display: inline;
    padding:25px;
    margin:10px;
    border-radius: 50%;
    font-size: 1.5rem;
   }
   .yellow{
    border-radius:50px;
   }
   .subscribe input{
    border-radius: 20px;
    padding-right: 40px;
   }
   .subscribe input::placeholder {
    color: white; /* Change this to your desired color */
    opacity: 1; /* Ensure full opacity for Firefox */
  }
  
       /*about*/
       #about-home{
           background-image: linear-gradient(rgba(9,5,54,0.3),rgba(5,4,46,0.7)),url("back1.jpg");
           width: 100%;
           height: 60vh;
           background-size: cover;
           background-position: center;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           text-align: center;
           padding-top: 40px;
  
       }
       /*bounce animation*/
       @keyframes smoothbounceball{
        from { transform: translate3d(0, 0, 0);}
        to { transform: translate3d(0, 10px, 0);}
    }
       .about-img img{
        animation: smoothbounceball 0.5s ease-in-out;
    animation-direction: alternate;
    animation-iteration-count: infinite;
       }
       #about-home h2{
           color: #fff;
           font-size: 2.2rem;
           letter-spacing: 1px;
       }
       #about-container{
           display: flex;
           align-items: center;
           padding: 8vw 8vw 2vw 8vw;
       }
       #about-container .about-img{
           width: 60%;
           padding-right: 60px;
       }
       #about-container .about-img img{
           width: 100%;
       }
       #about-container .about-text{
         
           width: 40%;
         
          
       }
       #about-container .about-text h2{
           color: #29303B;
           padding-bottom: 15px;
       }
       #about-container .about-text p{
           color: #686F7A;
           font-weight: 300;
       }
       #about container .about-text .about-fe{
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           margin-top: 30px;
       }
       #about container .about-text .about-fe img{
           width: 50px;
           background-size: cover;
           background-position: center;
           margin-right: 20px;
       }
       #about container .about-text .about-fe .fe-text{
           width: 90%;
       }
       #about container .about-text .about-fe .fe-text h5{
           font-size: 16px;
           color: #29303B;
       }
       #trust{
           text-align: center;
           padding: 8vw;
       }
       #trust .trust-img{
           margin-top: 60px;
           display: flex;
           justify-content: space-between;
           align-items: center;
       }
       #trust .trust-img img{
           width: 90px;
           height: auto;
       }
       /*blog*/
       #blog-container{
           display: flex;
           align-items: flex-start;
           justify-content: space-between;
           padding: 8vw;
       }
       #blog-container .blogs{
           width: 60%;
       }
     
       #blog-container .blogs img{
           width: 100%;
           border-radius: 19px;
       }
       #blog-container .blogs .post{
           padding-bottom: 60px;
       }
       #blog-container .blogs .post h3{
           color: #29303B;
           padding: 15px 0 10px 0;
          
       }
       #blog-container .blogs .post h3{
           color: #757373;
           padding-bottom: 20px;
          
       }
       #blog-container .blogs .post a{
           text-decoration: none;
           font-size: 0.9rem;
           padding: 13px 35px;
           background-color: rgb(21 21 100);
           color: #fff;
           border-radius: 5px;
           font-weight: 600;
       }
       #blog-container .cate{
           width: 30%;
          
       }
       #blog-container .cate h2{
           padding-bottom: 7px;
       }
       #blog-container .cate a{
           text-decoration: none;
           color: #757373;
           font-weight: 500;
           line-height: 45px;
       }
       #blog-container .blogpost{
           width: 60%;
           margin: 0 auto;
       }
       #blog-container .blogpost p{
           text-align: justify;
           padding-bottom: 60px !important;
       }
       /*course inner*/
       #course-inner{
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           padding: 8vw;
       }
       #course inner h3{
           padding: 35px 0 25px 0;
           color: #29303B;
       }
       #course inner p{
          
           color: #64626e;
       }
       #course inner hr{
           height: 1px;
           background: rgba(236, 226, 229, 0.5);
           margin-top: 40px;
          
       }
       #course-inner .overview{
           width: 70%;
       }
       #course-inner .overview .course-img{
           width:100%;
           height: 60vh;
           object-fit: cover;
           border-radius: 12px;
           margin-bottom: 20px;
       }
       #course-inner .overview .course-head{
           display: flex;
           align-items: flex-start;
           justify-content: space-between;
       }
       #course-inner .overview .course-head .c-name{
           width: 70%;
       }
       #course-inner .overview .course-head .c-name h2{
           color: #29303B;
       }
       #course-inner .overview .course-head .c-name .star{
           margin: 6px 0;
       }
       #course-inner .overview .course-head .c-name .star i{
           color: #FDC93B;
           font-size: 0.9rem;
       }
       #course-inner .overview .course-head .c-name p{
           font-size: 15px;
       }
       #course-inner .overview .course-head span{
           padding: 16px 22px;
           border-radius: 5px;
           color: #5838fc;
           font-size: 24px;
           font-weight: 700;
           background-color: rgba(88, 56, 252, 0.1);
       }
       #course-inner .learn p{
           font-size: 15px;
           padding-bottom: 15px;
       }
       #course-inner .learn p i{
           color: #654ce4;
           font-weight: 700;
           margin-right: 20px;
       }
       #course inner .tutor{
           display: flex;
       }
       #course inner .tutor img{
           width: 70px;
           height: 70px;
           border-radius: 50%;
           margin-right: 20px;
       }
       #course inner .tutor h5{
           font-size: 15px;
       }
       #course-inner .enroll{
           width: 300px;
           padding: 0 30px 30px 30px;
           border-radius: 11px;
           box-shadow: 0px 20px 40px 0 rgb(11 2 55 / 8%);
       }
       #course-inner .enroll h3{
           padding-bottom: 10px;
       }
       #course-inner .enroll p{
        font-size: 15px;
        color: #64626e;
        margin: 15px 0;
       }
       #course-inner .enroll p i{
           color: #654ce4;
           font-weight: 500;
           margin-right: 18px 0;
           width: 16px;
           height: 16px;
           line-height: 16px;
           text-align: center;
          }
          #course-inner .enroll .enroll-btn{
           padding: 25px 0 20px 0;
           margin: auto;
           text-align: center;
          }
          #course-inner .enroll .enroll-btn a{
           text-decoration: none;
           font-size: .8rem;
           padding: 13px 45px;
           border-radius: 5px;
           font-weight: 600;
           color: #fff;
           background: rgb(50, 50, 136);
          }
          /*contact*/
          #contact{
           padding: 8vw;
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
          }
          #contact .getin{
           width: 350px;
          }
          #contact .getin h2{
           color: #2c234d;
           font-size: 30px;
           font-weight: 800;
           line-height: .8;
           margin-bottom: 16px;
          }
          #contact .getin p{
           color: #686875;
           line-height: 24px;
           margin-bottom: 33px;
           padding-bottom: 25px;
           border-bottom: 1px solid #e5e4ed;
          }
          #contact .getin h3{
           color: #2c234d;
           font-size: 15px;
           font-weight: 600;
           line-height: 26px;
           margin-bottom: 15px;
          }
          #contact .getin .getin-details div{
           display: flex;
          }
          #contact .getin .getin-details div .get{
           font-size: 16px;
           line-height: 22px;
           color: #5838fc;
           margin-right: 20px;
           }
           #contact .getin .getin-details div p{
               font-size: 14px;
               border-bottom: none;
               line-height: 22px;
               margin-bottom: 15px;
           }
           #contact .getin .getin-details .pro-links i{
               margin-right: 8px;
           }
           .pro-links i{
            font-size: 28px;
            margin:10px;
           }
           /*#contact .form{
               width: 60%;
               background: #f7f6fa;
               padding: 40px;
               border-radius: 10px;
           }
           #contact .form h4{
               font-size: 24px;
               color: #2c234d;
               line-height: 30px;
               margin-bottom: 8px;
           }
           #contact .form p{
               color: #686875;
               line-height: 24px;
               padding-bottom: 25px;
              
              }
              #contact .form .form-row{
               display: flex;
               justify-content: space-between;
               width: 100%;
              }
              #contact .form .form-row input{
               width: 48%;
               font-size: 14px;
               font-weight: 400;
               border-radius: 3px;
               border: none;
               background: #fff;
               color: #7e7c87;
               outline: none;
               padding: 20px 30px;
               margin-bottom: 20px;
              }
              #contact .form .form-col input,
              #contact .form .form-col textarea{
               width: 100%;
               font-size: 14px;
               font-weight: 400;
               border-radius: 3px;
               border: none;
               background: #fff;
               color: #7e7c87;
               outline: none;
               padding: 20px 30px;
               margin-bottom: 20px;
              }
              #contact .form button{
               font-size: .9rem;
               padding: 13px 25px;
               background: rgb(21, 21, 100);
               border-radius: 5px;
               outline: none;
               border: none;
               font-weight: 600;
               cursor: pointer;
               color: #fff;
              }*/
              .contact-form{
                background-image: linear-gradient(rgba(90, 82, 134, 0.863),rgba(24, 24, 39, 0.7));
                padding:20px 20px;
                border-radius:20px;
                width:auto;
                height:auto;
              }
              .contact-form h4{
                color:white;
                font-size: 2.3rem;
                font-weight: 900;
              }
              .contact-form p{
                color:white;
                font-weight: bold;
                width: auto;
              }
              .contact-form .form-row  input{
                padding:10px 100px;
                margin:10px;
                width: auto;
                text-align: left;
                border-radius: 20px;
                border:none;
              }
              .contact-form .form-col input{
                padding:10px 100px;
                margin:10px;
                width: auto;
                text-align: left;
                border-radius: 20px;
                border:none;
              }
              .contact-form .form-col textarea{
                padding:10px 82px;
                margin:10px;
                text-align: left;
                border-radius: 20px;
                border:none;
              }
              .contact-form .form-col button{
                padding:20px 60px;
                border-radius: 50px;
                border:none;
                background-color:rgb(255, 196, 0);
                color:white;
                font-size: 1.1rem;
              }
              #map {
               width: 100%;
               height: 70vh;
               margin-bottom: 8vw;
              }
              #map iframe {
               width: 100%;
               height: 100%;
              }
      
              @media (max-width: 769px) {
                nav{
                   
                    padding: 15px 20px;
                   
                }
                nav img {
                    width: 130px;
                   
                }
                nav .navigation ul {
                    position: absolute;
                    top: 0;
                    right: -220px; /* hide the menu by default */
                    width: 220px;
                    height: 100vh;
                    background: rgba(17, 20, 104, 0.45);
                    backdrop-filter: blur(4.5px);
                    border: 1px solid rgba(225, 225, 225, 0.18);
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    transition: 0.3s ease;
                }
                nav .navigation ul.active {
                    right: 0; /* show the menu when active */
                }
                #menu-btn {
                    display: block;
                }
                #menu-icon {
                    display: block; /* show the menu icon by default */
                }
                #menu-close {
                    display: initial;
                    font-size: 1.6rem;
                    color: #fff;
                    padding: 30px 0 20px 20px;
                }
                nav .navigation ul li{
                    padding: 20px 0 20px 40px;
                    margin-left: 0;
                }
               
                nav .navigation ul li a{
                    color: #fff;
                }
                #about-home{
                    height:auto;
                }
                #home {
                    padding-top: 0px;
                    width:auto;
                    height:auto;
                }
                #home p{
                    width: 90%;
                }
                #features{
                    padding: 8vw 4vw 0 4vw;
                   
                }
                #course{
                    padding: 8vw 4vw 0 4vw;
                  
                }
                #registration{
                    margin-top: 8vw;
                    padding: 6vw 4vw 6vw 4vw;
                }
                #registration .reminder .time {
                    display: flex;
                    flex-wrap: wrap;
                    margin-top: 40px;
                }
                #experts{
                    padding: 8vw 8vw 4vw 8vw;
                    text-align: center;
                }
                footer .copyright .pro-links{
                    margin-top: 15px;
                }
                /* about */
                #about-container{
                   
                    padding: 8vw 4vw 2vw 4vw;
                }
                #about-container .about-img{
                    padding-right: 30px;
                }
                #trust .trust-img img{
                    width: 50px;
                    height: auto;
                }
                /*blog*/
                #blog-container{
                    padding: 8vw 4vw;
                }
                #blog-container .blogpost{
                    width:100%;
                    margin-top: 30px;
                }
                #blog-container .blogpost img{
                    width: 100%;
                    height: 50vh;
                    object-fit: cover;
                }
                /*course_inner*/
                #course-inner {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    padding: 8vw 4vw;
                }
                #course-inner .overview{
                    width: 100%;
                }
                #course-inner .overview .course-img{
                    width: 100%;
                    height: 100%;
                }
                #course-inner .enroll{
                    margin-top: 25px;
                }
                /*contact*/
                #contact {
                    padding: 8vw 4vw;
                   
                }
                #contact .getin{
                    width: 250px;
                }
                
            }
               
           
            @media (max-width:475px){
                .contact-form{
                    width:auto;
                }
                .contact-form p{
                    width:200px;
                }
                .form-row{
                    width: auto;
                }
               #registration{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                }
                #registration .reminder .time{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    align-items: center;
                    margin-top: 20px;
                    margin-bottom: 20px;
                }
                /*about*/
                #about-container{
                    flex-direction: column-reverse;
                }
                #about-container .about.img{
                    width: 100%;
                    padding-right: 0px;
                }
                #about-container .about-text{
                    width: 100%;
                    padding-bottom: 20px;
                }
                #trust .trust-img{
                    margin-top: 40px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                }
                #trust .trust-img img{
                    width: 60px;
                    margin: 10px 15px;
                    height: auto;
                }
                /*blog*/
                #blog-container{
                    flex-direction: column;
                }
                #blog-container .blogs{
                    width: 100%;
                }
                #blog-container .cate{
                    width: 100%;
                }
                #blog-container .blogpost{
                    width:100%;
                    margin-top: 50px;
                }
                #blog-container .blogpost img{
                    width: 100%;
                    height: 50vh;
                    object-fit: cover;
                   
                   
                }
                #course-inner .overview .course-head .c-name{
                    width: 50%;
                }
                #course-inner .overview .course-head .c-name h2{
                    font-size: 22px;
                }
                #course-inner .overview .course-head span{
                    font-size: 22px;
                }
                #course-inner .enroll{
                    width: 100%;
                }
                /*contact*/
                #contact{
                    padding: 8vw 4vw;
                    flex-direction: column;
                    align-content: flex start;
                    justify-content: flex-start;
                }
                #contact .getin{
                    width: 100%;
                    margin-bottom: 30px;
                }
                #contact .form{
                    width: 100%;
                    padding: 40px 30px;
                    border-radius: 10px;
                }
                #contact .form .form-row{
                    display: flex;
                    justify-content: flex-start;
                    flex-direction: column;
                    width: 100%;
                }
                #contact .form .form-row input{
                    width: 100%;
                }
            }
            @media (max-width: 376px){
                footer input{
                    width: 100%;
                    margin-bottom: 20px;
                }
            }