@media (max-width: 1500px) {
   :root{
    --section_paddingX:10%;
   }
   .hero_area .right img {
    width: 75%;
}


    .se4 .main .box p{
        width: 100%;

    }
}
@media (max-width: 1300px) {


    :root{
        --normal_text:16px;
        --section_text:30px;
        --subsection_text:22px;
        --footer_hading_text:18px;
    }
    .hero_area .left h1 {
        font-size: 55px;
    }
    .se2 .main .box .top i{
        font-size: 60px;
        margin-right: 10px;
    }
    .se3 .left img{
        width: 60%;
    }
    .se2{
    
        margin-top: 0px;
    }

}

@media (max-width: 1100px){
    :root{
        --normal_text:14px;
        --section_text:30px;
        --subsection_text:22px;
        --footer_hading_text:18px;
        --footer_text:14px;
        --section_paddingX:7%;
    }
    header .nav_list .menu{
        margin-right: 20px;
    }
    header .nav_list .menu ul {

        gap: 20px;
    }
    .hero_area .left{
        flex-basis: 50%;
    }
    .hero_area .left h1 {
        font-size: 50px;
        line-height: 60px;

    }
    .hero_area .right{
        flex-basis: 50%;
    }
    .hero_area .right img {
        width: 90%;
    }

    .hero_area .left h3 {
        font-size: var(--subsection_text);
    }
    .se2 .main{
        margin: 70px 0;
    }
    .se5 .right{
        flex-basis: 50%;
    }
}

@media (max-width: 992px){

    :root{
        --normal_text:14px;
        --section_text:30px;
        --subsection_text:20px;
        --footer_hading_text:18px;
        --footer_text:14px;
        --section_paddingX:7%;
    }


    header .menu_btn{
        font-size: 30px;
        display: block;
    }
    header .nav_list {
        position: absolute;
        background-color: var(--primary_color);
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
        top: 100%;
        right: -70%;
        z-index: 100;
        height: calc(90vh - 170px);
        width: 40%;
        padding: 50px 0px;
        transition: .2s;
    }
    header .nev_and_btns_come{
        right: 0;
    }
    header .nav_list .menu ul {
        flex-direction: column;
    }
    header .nav_list .menu ul li{
        height: 30px;
        
    }
    header .nav_list .menu ul li a {
        display: inline-block;
        width: 100%;
        color: #fff;
        text-align: center;
    }
    header .nav_list .menu{
        margin-right: 0px;
       
    }
    .se2 .main .box .top i{
        font-size: 60px;
    }


    .se4 .main{
        gap: 40px;
    }

    .se5 .right .img_box{
        height: 400px;
    }

    .se6 .main{
        width: 100%;
    }
    .se6 .main .text_div{
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    footer  .main{
        grid-template-columns: 1fr 1fr;
    }


}

@media (max-width: 720px){
    :root{
        --normal_text:14px;
        --section_text:25px;
        --subsection_text:18px;
        --footer_hading_text:18px;
        --footer_text:14px;
        --section_paddingX:7%;
    }
    .header_top{
        height: 50px;
    }
    header .nav_area {
        height: 80px;
    }
    header .nav_area .logo img {
        width: 100px;
    }
    header .nav_list {
        width: 40%;
    }
    .hero_area{
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }
    .hero_area .left{
        flex-basis: 50%;
    }
    .hero_area .right{
        flex-basis: 50%;
    }
    .hero_area .left h1 {
        font-size: 35px;
        line-height: 35px;
        text-align: center;
    }
    .hero_area .left h3 {
        text-align: center;
    }
    .hero_area .right{
        margin-bottom: 20px;
    }
    .hero_area .right img{
        width: 55%;
    }
    .hero_area .slide_btn{
        margin-left: 0;
    }
    .se2 .main{
        flex-wrap: wrap;
        margin: 50px 0;
        padding: 20px 0;
    }
    .se2 .main .box{
        padding:10px  40px ;
    }
    .se2 .main .box .top{
        margin-bottom: 10px;
    }
    .se2 .main .box .top i{
        font-size: 40px;
    }
    .se2 .main .box .top h1{
        font-size: var(--subsection_text);
        line-height: var(--subsection_text)
    }

    .se3 .left img{
        width: 70%;
    }

    .se3 .right p{
        width: 95%;
    }
    .se4 .main{
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .se4 .main .box i{
        font-size: 30px;
        margin-bottom: 15px;
    }
    .se4 .main .box p{
        text-align: justify;
    }
    .se5 {
        padding: 30px var(--section_paddingX);
        flex-direction: column;
        
    }
    .se5 .left{
        width: 100%;
    }
    .se5 .left .info .box{
        flex-basis: 30%;
    }

    .se5 .right{
        width: 100%;
    }
    .se5 .right .img_box{
        height: 350px;
    }


    .se6{
        padding: 50px var(--section_paddingX);
    }
    .se6 .main{
        height: 350px;
    }
    .se6 .main .text_div{
        padding: 30px;
    }





}

@media (max-width: 500px){
    :root{
        --normal_text:14px;
        --section_text:22px;
        --subsection_text:16px;
        --footer_hading_text:16px;
        --footer_text:12px;
        --section_paddingX:7%;
    }
    .header_top{
        height: 30px;
    }

    .header_top p i{
        margin: 0 2px;
    }
    .header_top p span{
        margin: 0 2px;
        font-size: 9px;
    }

    .hero_area .left{
        width: 100%;
    }
    .hero_area .left h1 {
        font-size: 30px;
    }
    .hero_area .right{
        width: 100%;
    }
    .hero_area .right img {
        width: 70%;
    }

    .se2 .main{
        margin: 20px 0 50px;
        padding: 10px 0;
    }
    .se2 .main .box .bottom {
        text-align: left;
    }

    .se3{
        flex-direction: column;
    }
    .se3 .left img{
        width: 50%;
        margin-bottom: 20px;
    }
    .se3 .right{
        text-align: center;
    }
    .se3 .right h1{
        display: inline-block;
    }
    .se3 .right h1::after{
        content: "";
        height: 2px;
        width: 100px;
        bottom: -10px;
        position: absolute;
        background-color: var(--blue_color);
        left: 50%;
        transform: translateX(-50%);
    }
    .se4 .main .box h1::after{

        width: 50px;
    }
    .se5 .left h1::after{

        width: 100px;

    }
    .se5 .left .info .box p{
        font-size: var(--normal_text);
        width: 100%;
    }
    .se5 .right .img_box{
        position: relative;
        height: 250px;
    }
    footer  .main .box:nth-child(1) i{
        padding: 3px;
        border-radius: 2px;
        margin: 2px;
        font-size: 14px;

    }

}

@media (max-width: 400px){
    :root{
        --normal_text:12px;
        --section_text:20px;
        --subsection_text:16px;
        --footer_hading_text:14px;
        --footer_text:10px;
        --section_paddingX:3%;
    }
    .header_top{
        height: 30px;
    }

    .header_top p i{
        margin: 0 2px;
    }
    .header_top p span{
        margin: 0 2px;
        font-size: 9px;
    }
    header .nav_area {

        height: 50px;

    }
    header .nav_area .logo img {
        width: 70px;
    }


    header .nav_list {
        width: 70%;
    }
    .se5 .left .info{
        align-items: center;
        justify-content: center;
    }
    .se5 .left .info .box {
        flex-basis: 90%;
        margin-bottom: 10px;
    }
    .se5 .left .info .box h3{
        margin-bottom: 5px;
    }
    .se5 .left .info .box p{
        margin-bottom: 10px;
        width: 95%;
    }

    .se5 .right .img_box{
        position: relative;
        height: 200px;
    }



    footer .logo img{
        width: 100px;
    }
    footer  .main{
        grid-template-columns: 1fr;
        gap: 0px;
    }
    footer  .main .box{
        padding: 20px;
    }
    footer  .main .box h3{
        font-size: 14px;
        margin-bottom: 10px;

    }
}