/*  =========================== ==================== responsive 1400px================================================ */
@media (max-width:1400px){
    .hero .right-hero img{
        max-width: 100%;
    }
    .hero .right-hero .circel{
        height: 360px;
        width: 360px;
    }
}
/*  =========================== ==================== responsive 1200px================================================ */
@media (max-width:1200px){
    .hero .right-hero .circel{
        height: 330px;
        width: 330px;
        left: 20px;
    }
    .cards .card_item{
        width: calc(33% - 60px);
    }
    .about{
        display: flex;
        gap: 20px;
     }
     .card-menu{
        gap: 20px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width:992px){
    .secound_side{
        flex-wrap: wrap;
    } 
    .team-single{
        width: calc(33% - 18px);
    }
    .tetimonal-person
    {
        max-width: 80%;
    }
}
/*  =========================== ==================== responsive 950px================================================ */
@media (max-width:950px){
    .hero{
        flex-wrap: wrap;
    }
    .hero-section .hero .left-hero,
    .hero-section .hero .right-hero{
        max-width: 100%;
    }
    .hero-section .hero .left-hero h1{
        margin-top: 20px;
    }
    .hero .right-hero .circel{
        height: 250px;
        width: 250px
    }
    .top_bar .top_menu .menu{
        display: none;
    }
    .top_menu .bar{
        display: inline-block;
      }
      .top_menu{
        gap: 16px;
    }
    .hero .left-hero h1{
        font-size: 62px;
    }
    .card-box{
        width: calc(33% - 62px);
    }
    .about .about_text{
        width:100%;
    }
    .about .about_img{
        width: 100%;
    }
    .wc-section{
        flex-wrap: wrap;
    }
    .left-wc{
        width: 100%;
    }
    .right-wc {
        width: 100%;
    }
    .cards{
        gap: 20px;
    }
    .cards .card_item{
        width: calc(50% - 60px);
    }
    .offer{
        flex-wrap: wrap;
    }
    .left-offer{
        width: 100%;
    }
    .right-offer{
        width: 100%;
    }
    .fotter-section .fotter-po-1,
    .fotter-section .fotter-po-2{
        display: none;
    }
}
/*  =========================== ==================== responsive 850px================================================ */
@media (max-width:850px){
    .hero{
        overflow: hidden;
    }
    .top_bar .top_menu .menu{
        display: none;
    }
    .top_menu .bar{
        display: inline-block;
      }
      .top_menu{
        gap: 16px;
    }
    .hero .left-hero{
        max-width: 100%;
    }
    .hero .left-hero h1{
        font-size: 48px;
    }
    .left-blog{
        flex-wrap: wrap;
    }
    .top-blog-title .blog-btn {
        display: none;
    }
    .top-blog-title{
        justify-content: center;
    }
    .top-blog-title .blog-text-title{
        text-align: center;
    }
    .mobile_ex-btn{
        display: block;
    }
}
/*  =========================== ==================== responsive 768px================================================ */
@media (max-width:768px){ 
    .secound_side{
        gap: 20px;
    }
    .team-single{
        width: calc(50% - 15px);
    }
    .testimonal{
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    .fotter-menu{
        gap: 16px;
    }
}
/*  =========================== ==================== responsive 630px================================================ */
@media (max-width:630px){
   .card-box{
    width: calc(50% - 60px);
   }
   .cards .card_item{
    max-width: 300px;
    width: 100%;
    }
}
/*  =========================== ==================== responsive 475px================================================ */
@media (max-width:475px){
    .top_bar .top_menu .menu{
        display: none;
    }
    .top_menu .gardian-btn{
       display: none;
     }
     .top_menu .bar{
        display: inline-block;
     }
     .hero .left-hero h1{
        font-size: 32px;
    }
    .hero .right-hero .circel{
        height: 280px;
        width: 280px;
    }
    .card-box{
        width: 100%;
       }
    .right-offer{
        width: 80%;
    }
    .tetimonal-person
    {
        max-width: 100%;
    }
}
/*  =========================== ==================== responsive 375px================================================ */
@media (max-width:375px){
     .hero .left-hero h1{
        font-size: 32px;
    }
    .hero .right-hero .circel{
        height: 260px;
        width: 260px;
        left: 42px;
    }
}
/*  =========================== ==================== responsive End ================================================ */