@media screen and (max-width:480px) {
    body{
        width:100vw;
    }
    #header{
        padding:0;
    }
    .images{
        padding:1% 0%;
        width:100%;
        height:650px;
        display: flex;
        transition: all ease-in 0.4s;
        position: relative;
        
     }
    .actions button:first-child{
        padding:8px;
        border:none;
        border-radius: 5px;
        color:white;
        font-size: 12px;
        background: darkorange;
        transition: all ease 0.4s;
        font-weight: 800;
     }
     .actions button:last-child{
        padding:8px;
        border:none;
        border-radius: 5px;
        color:darkorange;
        font-size: 12px;
        background: white;
        transition: all ease 0.4s;
        font-weight: 800;
     }
    .images .outer{   
        position: absolute;
        width: 100%;
        height: 100%;  
        left:0%;
        background: rgba(0,0,0,0.5);  
     }
     .images .image{
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width:100%;
        height:100%;
        transition: all ease-in 0.4s;
        animation: carousel 40s ease-in-out infinite;
        display: flex;
        gap:15px;
        align-items: center;
        justify-content: center;
        flex-direction: column;    
     }
     .image h1,h2,h3{
        color:white;
        z-index:0;
        text-align: center;
        width:100%;
     }
     .image h1{
        font-size:30px;    
        font-weight: 900;
     }
     .image h3{
        letter-spacing: 5px;
        text-transform: uppercase;
     }
     .image h2{
        font-size:18px;
     }
     .image .actions{
       width: 100%;
       display: flex;
       gap:30px;
       align-items: center;
       justify-content: center;
       padding:40px;
       z-index: 1;
     }
    .courses{
        background: white;
        width:100%;
        padding:3% 3%;
        display: flex;
        gap:1rem;
        row-gap:2rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        flex-direction: column;
     }
     .courses .item{
        width:250px;
        padding:10px;
        background: white;
        border-radius: 8px;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);    
        transition: all ease-in 0.4s;
        display: flex;
        flex-direction: column;
        gap:20px;
        align-items: center;
        justify-content: center;
        height:250px;   
     }
     .content{   
        background: whitesmoke;
        padding:5% 8%;
        display: flex;
        gap:1rem;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .content .item{
        padding:2% 0;
        width:100%;
        height:270px;
        display: flex;
        gap:0.2rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .content .bg{
        flex:0 0 auto;
        width:90px;
        height:90px;
        border-radius: 100%;
        background: rgb(20, 79, 207);
    }
    .content h1{
        flex:0 0 auto;
        font-size:20px;
        height:40px;
        text-transform: capitalize;
        color:darkblue;
    }
    .content p{
        flex:0 0 auto;
        font-size: 12px;
        text-align: center;
        height:120px;
    }
  
    .content .item .bg i{
        font-size: 40px !important;
    }
    .trending .title{
        font-size:20px;
    }
    .trending .courses-data{
        flex-wrap: wrap;
        gap:1em;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .courses-data .course{
        width:90%;
        flex:0 0 auto;
    }
    .courses-data .course img{
       height:40%;
       flex:0 0 auto;
    }
    .course h1{
        font-size:16px;
    }
    .course p{
        font-size:12px;
    }
    .course button{
        padding:10px 10px;
        font-size:16px;
    }
    .about .background{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height:auto;
    }
    .about .background .item1,
    .about .background .item2{
        width: 100%;
        position: relative;
    }
    .about .background .item2{
        height:250px;
    }
    .about .item1 h1{
        font-size:35px;
        font-family: Mooli;
        font-weight: 1000;
        color:black;
        line-height: 55px;;
    }
    .item1 p{
        padding-top: 20px;
        text-align: justify;
        font-size:14px;
        color:blue;
        line-height: 30px;
    }
    .item1 button{
        margin-top:30px;
        padding:10px 20px;
        font-size:14px;
        font-weight: 700;
        border-radius: 8px;
        background: darkorange;
        border:none;
        outline:none;
    }
    .item2 .students{
        display: flex;
        align-items: center;
        justify-content:center;
        width:140px;
        height:140px;
        background: white;
        border-radius: 100%;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.5);
        
        padding:10px;
        transition:all ease 0.4s;
    
    }
    .item2 .clients{
        display: flex;
        align-items: center;
        justify-content:center;
        width:140px;
        height:140px;
        background: white;
        border-radius: 100%;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.5);
        padding:10px;
        transition:all ease 0.4s;
    }
    .item2 .courses{
        display: flex;
        align-items: center;
        justify-content:center;
        width:140px;
        height:140px;
        background: white;
        border-radius: 100%;
        box-shadow: 0px 0px 8px 2px rgba(0,0,0,0.5);
        position: absolute;
        transition:all ease 0.4s;
    }
    .item2 .students p{
        text-transform: uppercase;
        font-size:15px;
        font-weight: 800;
        text-align: center;
    }
    .item2 .students p span{
        font-size:25px;
        width:100%;
        color:rgb(41, 16, 203);
    }
    .item2 .clients p{
        text-transform: uppercase;
        font-size:15px;
        font-weight: 800;
        text-align: center;
        color:black;
    }
    .item2 .clients p span{
        font-size:25px;
        width:100%;
        color:rgb(41, 16, 203);
    }
    .item2 .courses p{
        text-transform: uppercase;
        font-size:15px;
        font-weight: 800;
        text-align: center;
    }
    .item2 .courses p span{
        font-size:25px;
        width:100%;
        color:rgb(41, 16, 203);
    }
    .about1{
        display: flex;
        width:100%;
        padding:2% 2%;
        gap:20px;
        height:850px;
        border-radius: 5px;
        flex-direction: column;
    }
    .about1 .bg{
        background: url('Assets/Images/IT-home-page.webp');
        width:100%;
        height:100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }
    .about1 .data{
        padding:2% 2%;
        width:100%;
        display: flex;
        gap:15px;
        flex-direction: column;
    }
    .about1 .data .title{
        letter-spacing: 3px;
        text-transform: uppercase;
        font-size: 18px;
        color:red;
        font-weight: 900;
    }
    .about1 .data h1{
        font-size:25px;
        font-weight: 1100;
        font-family: Mooli;    
    }
    .about1 .data p{
        width:100%;
        line-height: 30px;
        font-size:14px;
    }
     .about1 .data button{
        padding:8px;
        width:30%;
        border:none;
        outline: none;
        background: darkorange;
        font-size:15px;
        font-weight: 1000;
        border-radius: 8px;
        transition: all ease 0.4s;
    }
    .demo-session{
        width:100%;
        padding:1% 5%;    
        height:1000px;
        display: flex;
        gap:20px;
        align-items: center;
        justify-content: center;
    }
    .demo-session .data1{
        width:100%;
        color:white;
        background: url('Assets/Images/background1.jpg');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding:10px;
        height: 100%;
        box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.5);
        flex-direction: column;
        border-radius: 5px;
    }
    .demo-session .content-data{
        width:100%;
        height:100%;
        border-radius: 5px;
        background: whitesmoke;
        box-shadow: 0px 0px 1px 2px rgba(0,0,0,0.5);
    }
    .demo-session .content-data h1{
        font-size:22px;

    }
    .demo-session .content-data p{
        line-height: 25px;
        font-size:14px;
    }
    .demo-session .form{
        width:100%;
        height:100%;
        border-radius: 5px;
        padding:5% 5%;
        box-shadow: 0px 0px 2px 3px rgba(0,0,0,0.5);
    }
    .demo-session .form label{
        font-size:12px;
    }
    .data1 h1{
        z-index: 5;
        font-size:40px;
        font-weight: 1200;
        text-transform: capitalize;
    }
    .data1 .outer{   
        position: absolute;
        width: 100%;
        height: 100%;  
        left:0%;
        top: 0%;
        z-index: 1;
        background: rgba(0,0,0,0.3);  
     }
     .data1 p{
        font-size:14px;
        z-index: 3;
        font-weight: 900;
     }
     .demo-session .content-data{
        width:100%;
        height:100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap:10px;
        padding:30px;
        border-radius: 5px;
     }
     .demo-session .form .input-field button{
        font-size:14px;
     }
     .our-courses .title p{
        font-size:18px;
     }
     .our-courses h1{
        font-size:22px;
     }
    .our-courses .container{
        width:100%;
        height:100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap:1rem;
        flex-direction: column !important;
     }
     .our-courses .container .item{
        width:90%;
        height:500px;
     }
     .our-courses .container .item img{
        width:100%;
        height:250px;
        object-fit: cover;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
     }
     .our-courses .container .item .title2{
        font-size:16px;
        font-weight: 1500;
        font-family: Mooli;
        text-align: center;
        height:35px;
        padding-top:20px;
     }
     .our-courses .container .item p{
        padding:10px;
        font-size:13px;
        text-align: center;
        height:120px;
     }
     .our-courses .container .item button{
        width:100px;
        height:35px;
        font-size:14px;
        background: darkorange;
        border:none;
        font-weight: 900;
        border-radius: 5px;
        transition: all ease-out 0.4s;        
     }
     .call-to-action{
        padding:5% 0;
        flex-direction: column;
     }
     .call-to-action .call{
        width:100%;
        height:auto;
        padding:1% 5%;
        align-items: center;
        justify-content: center;
        padding:10px;
        background: whitesmoke;
     }
     .call h2{
        font-size:16px;
        padding:10px;
     }
     .call h2,h3, p{
        width:100%;
     }
     .call-to-action .call h2{
        font-size:16px;        
     }
     .call-to-action .feedbacks{
        width:100%;
        padding:1% 5%;
        
     }
     .call-to-action .feedbacks .item{  
        position: absolute;
        top:0;
        width:100%;
        height: 100%;
        background: whitesmoke;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all ease-in 0.4s;
        flex-direction: column;
        padding:10px;
    }
    .feedbacks .item img{
        width:180px;
        height:200px;
        border-radius: 80%;
        margin: 10px 0px;
        overflow: hidden;
        object-fit: cover;
        transition: all ease-in 0.2s;
    }
    .feedbacks .item h1{
        letter-spacing: 3px;
        font-size:16px;
    }
    .feedbacks .item p{
        width:100%;
        height:300px;
        font-size:12px;
        text-wrap: wrap;
        margin:15px 0px;
        line-height: 30px;
        text-align: justify;
    }
    .placements{
        width:100%;
        height:auto;
        padding:1% 5%;
        text-align: center;
        background: whitesmoke;
    }
    .placements h1{
        font-size:22px;
        letter-spacing: 2px;
        color:darkorange;
    }
    .placements .companies{
        margin-top:20px;
        width:100%;
        height:100%; 
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap:0.5em;
    }
    .placements .companies .card{
        width:200px;
        height:120px;
        object-fit: cover;
        background: white;
        border:2px solid grey;
        border-radius: 5px;
        padding:5px;
        transition: all ease 300ms;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .placements .companies .card:hover{    
        cursor: pointer;
    }
    .placements .companies .card:hover > img{
        transform: scale(1.08);
    }
    .companies .card img{    
        width:120px;
        height:120px;
        object-fit: contain;
        transition: all ease 500ms;
    }
    .footer{
        width:100%;
        padding:2% 10%;
        color:rgba(0, 0, 0, 0.9);;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:20px;
        flex-direction: column;
     }
     .footer .about-short{
        width:100%;
        text-align: center;
     }
     .footer .about-short img{
        width:180px;
        height:100px;
        object-fit: fill;
        
     }
     .footer .about-short p{
        line-height: 28px;
        text-align: justify;
        font-size:14px;
     }
     .footer .footer-data{
        width:100%;
        height: auto;
     }
     .footer-data .flex-container{
        width:100%;
        display: flex;
        flex-direction: row;
        gap:20px;
        padding:10px;
        flex-direction: column;
     }
     .flex-container h4{
        font-size:18px;
        letter-spacing: 3px;
     }
     .flex-container ul{
        list-style: none;
     }
     .flex-container ul li{
        padding:8px;    
        transition: all ease-in 0.4s;
        font-size:14px;
     }
     .flex-container ul li i{
        margin-right: 5px;
     }
     .image h1{
        padding:0% 5%;
        width:100%;
        font-size:40px;    
        font-weight: 900;
     }
     .image h3{
        letter-spacing: 5px;
        text-transform: uppercase;
     }
     .image h2{
        font-size:16px;
     }
     #mainMenu{
        display: none;
     }
     .fix-header{           
        font-size:12px;
        position: relative;
        flex-direction: column;
        gap:10px;
        align-items: start !important;
        justify-content: start !important;
    }
    .social{
        display: none;
    }
    .fix-header p{
        font-size:12px;
    }
    .footer-text{
        font-size:12px;
    }
    .fix-header .text{
        gap:100px !important;        
    }
     .header{
        padding:1% 5%;
        justify-content: space-between;
     }
     #menuBar{
        display: block;
     }
}