
/* Medium Desktop */
@media only screen and (max-width: 1440px) {
    .footer-area .logo-bg{position: absolute; top: 50%; left: 0; margin-left: 0px; margin-top: -118px;}
    .footer-area .logo-bg svg{width: 100%;}
}

/* Small Laptop */
@media only screen and (max-width: 1280px) {
  
}

/* Tablet (Landscape) */
@media only screen and (max-width: 1024px) {
    .main-header{padding: 25px 0;}
    .main-header .container{padding: 0 20px;}
    .main-header .rightside ul.main-menu li{margin-right: 30px;}
    .main-header .rightside ul.main-menu li a{font-size: 14px;}
    header.fixed .main-header{padding: 15px 0;}

    .top-main-slider-area .inner-photo-block .content-area h1{font-size: 42px; line-height: 62px;}

    .about-portfolio-area{padding: 50px 0 0 0;}
    .about-portfolio-area::before {height: 460px;}
    .about-portfolio-area .content-block{display: block; margin-bottom: 40px;}
    .about-portfolio-area .content-block h2{width: 100%; padding-right: 0; margin: 0px 0px 15px 0px; font-size: 24px; line-height: 32px;}
    .about-portfolio-area .content-block .rightside{width: 100%;}
    .about-portfolio-area .content-block .rightside p{font-size: 15px; line-height: 25px; margin: 0 0 20px 0;}
    .about-portfolio-area ul.portfolio-list{margin: 0 -8px;}
    .about-portfolio-area ul.portfolio-list li{padding: 0 8px;}
    .about-portfolio-area ul.portfolio-list li .portfolio-block .photo{height: 260px;}
    .about-portfolio-area ul.portfolio-list li .portfolio-block h3{font-size: 24px; line-height: 30px; margin: 0 0 5px 0;}
    .about-portfolio-area ul.portfolio-list li .portfolio-block p{font-size: 15px; line-height: 25px;}

    .service-area{padding: 50px 0;}
    .service-area h2{font-size: 24px; line-height: 32px; margin: 0 0 10px 0;}
    .service-area ul.service-list li{width: 50%; padding: 0 6px; margin-top: 12px;}
    .service-area ul.service-list li .content-block{padding: 35px;}
    .service-area ul.service-list li .content-block h3{font-size: 24px; line-height: 30px;}
    .service-area ul.service-list li .content-block p{font-size: 15px; line-height: 25px;}
    .service-area ul.service-list li .photo-block{min-height: 320px;}

    .footer-area{padding: 30px 0 0 0;}
    .footer-area .logo-bg{width: 668px; height: 100px; margin: 0 auto 30px auto; position: relative; top: 0; left: 0;}
    .footer-area .logo-bg svg{width: 100%; height: 100%;}
    .footer-area .first-row{display: block; padding-bottom: 25px;}
    .footer-area .first-row .leftside{width: 100%; padding-top: 0;}
    .footer-area .first-row .leftside .logo{margin: 0 0 25px 0; width: 200px;}
    .footer-area .first-row .leftside .logo img{width: 100%;}
    .footer-area .first-row .leftside ul.main-menu li{margin-right: 30px;}
    .footer-area .first-row .leftside ul.main-menu li a{font-size: 14px;}
    .footer-area .first-row .rightside{width: 100%; text-align: left;}
    .footer-area .first-row .rightside h2{text-align: left; font-size: 24px; line-height: 32px; margin: 15px 0 10px 0;}
    .footer-area .copyright{padding: 15px 0;}
    
    .inner-top-area{height: 400px;}
    .inner-top-area::before {height: 160px;}
    .inner-top-area .content-area h1{font-size: 26px; line-height: 36px; padding: 8px 18px;} 
    .inner-top-area .content-area h1 img{width: 18px; height: 24px; margin: 0 12px 0 0;}

    .about-content-area{padding: 50px 0;}
    .about-content-area h2{font-size: 24px; line-height: 32px; margin: 0 auto 16px auto;}
    .about-content-area p{font-size: 15px; line-height: 25px; margin: 0 auto 16px auto;}

    .mission-vision-area{padding: 50px 0 40px 0;}
    .mission-vision-area .main-block .photo-block{width: 40%; min-height: 300px;}
    .mission-vision-area .main-block .rightside{padding: 30px; width: 60%;}
    .mission-vision-area .main-block .rightside h2{font-size: 24px; line-height: 32px;}
    .mission-vision-area .main-block .rightside p{font-size: 15px; line-height: 25px;}

    .service-page{padding: 50px 0;}
    .service-page ul.service-list li{display: block;}
    .service-page ul.service-list li .service-photo{width: 100%; min-height: 400px;}
    .service-page ul.service-list li .service-content{width: 100%; padding: 30px 30px 30px 70px;}
    .service-page ul.service-list li .service-content h2{max-width: 100%; font-size: 24px; line-height: 30px;}
    .service-page ul.service-list li .service-content .icon{top: 2px;}
    .service-page ul.service-list li .service-content h3{font-size: 18px; line-height: 26px; margin: 0 0 10px 0;}
    .service-page ul.service-list li .service-content p{font-size: 15px; line-height: 25px;}

    .portfolio-page{padding: 50px 0;}
    .portfolio-page ul.portfolio-list li{padding: 20px 0;}
    .portfolio-page ul.portfolio-list li .portfolio-content h2{font-size: 24px; line-height: 30px;}
    .portfolio-page ul.portfolio-list li .portfolio-content p{font-size: 15px; line-height: 25px;}
    .portfolio-page ul.portfolio-list li .portfolio-photo{height: 280px;}
    .portfolio-page ul.portfolio-list li .portfolio-content{padding-right: 30px;}
    .portfolio-page ul.portfolio-list li:nth-child(2n) .portfolio-content{padding-left: 30px; padding-right: 0;}

    .inner-top-area.content-banner .content-area{bottom: 50px;}
    .contact-page{padding: 0 0 50px 0; margin-top: -50px;}
    .contact-page .flex-contact .info-area{padding: 35px; width: 50%;}
    .contact-page .flex-contact .info-area h2{font-size: 24px; line-height: 30px;}
    .contact-page .flex-contact .info-area p{font-size: 15px; line-height: 25px;}
    .contact-page .flex-contact .form-area{padding: 35px; width: 50%;}
    .contact-page .flex-contact .info-area .info{margin: 20px 0 0 0; font-size: 15px; line-height: 24px; padding: 0 0 0 40px;}
    .contact-page .flex-contact .info-area .info .icon{width: 24px; height: 24px; top: 0px;}
    .contact-page .flex-contact .info-area .info .icon svg{width: 100%; height: 100%;}
    .contact-page .flex-contact .form-area .input-block{margin-bottom: 15px;}
    .contact-page .flex-contact .form-area .form-select{width: 40%; margin-right: 14px;}
}

/* Tablet (Portrait) */
@media only screen and (max-width: 767px) {

    .container{padding: 0 25px;}
    .main-header .logo{width: 150px;}
    .main-header .logo img {width: 100%;}
    .main-header .logo,
    .main-header .rightside .in-icon{position: relative; z-index: 1;}
    .main-header .rightside ul.main-menu{position: fixed; top: -300px; left: 0px; display: block; background: #fff; width: 100%; padding: 80px 20px 25px 20px; transition: all .5s ease; opacity: 0;}
    .main-header .rightside ul.main-menu.open{top: 0px; transition: all .5s ease; opacity: 1;}
    .main-header .btn-menu{display: block;}

    .top-main-slider-area .inner-photo-block{height: 500px;}
    .top-main-slider-area .inner-photo-block::before {height: 120px;}
    .top-main-slider-area .inner-photo-block .content-area{padding: 70px 0 0 0;}
    .top-main-slider-area .inner-photo-block .content-area h1{font-size: 24px; line-height: 32px; padding: 0 15px;}

    .about-portfolio-area{padding: 30px 0 0 0;}
    .about-portfolio-area::before{height: 660px;}
    .about-portfolio-area ul.portfolio-list{margin: 0px; }
    .about-portfolio-area ul.portfolio-list li{width: 100%; padding: 0px; margin-bottom: 15px;}
    
    .service-area{padding: 15px 0 30px 0;}
    .service-area ul.service-list li{width: 100%; }
    .service-area ul.service-list li .photo-block{min-height: 280px;}
    .service-area ul.service-list li .content-block{padding: 25px;}

    .footer-area .logo-bg{display: none;}
    .footer-area .first-row .leftside .d-flex{display: block !important;}
    .footer-area .first-row .leftside .logo{margin: 0 auto 15px auto;}
    .footer-area .first-row .leftside ul.main-menu{flex-wrap: wrap; justify-content: center;}
    .footer-area .first-row .leftside ul.main-menu li{margin: 5px 15px;}
    .footer-area .first-row .leftside .in-icon{display: none;}
    .footer-area .first-row .rightside h2{text-align: center;}
    .footer-area .first-row .rightside .newsletter-area .btn-send{padding: 0px 15px;}
    .footer-area .copyright{flex-direction: column;}

    .inner-top-area{height: 400px;}
    .inner-top-area::before {height: 120px;}
    .inner-top-area .content-area h1{font-size: 26px; line-height: 36px; padding: 8px 18px;} 
    .inner-top-area .content-area h1 img{width: 18px; height: 24px; margin: 0 12px 0 0;}

    .about-content-area{padding: 30px 0;}
    
    .mission-vision-area{padding: 30px 0 20px 0;}
    .mission-vision-area .main-block {display: block; margin-bottom: 10px;}
    .mission-vision-area .main-block .photo-block{width: 100%; height: 260px; min-height: auto; padding: 0 0 10px 0;}
    .mission-vision-area .main-block .rightside{padding: 20px; width: 100%;}
    .mission-vision-area .main-block:nth-child(2n) .photo-block{padding: 0 0 10px 0;}

    .service-page{padding: 30px 0;}
    .service-page ul.service-list li .service-photo{min-height: 260px;}
    .service-page ul.service-list li .service-content{padding: 25px;}
    .service-page ul.service-list li .service-content .icon{position: relative; top: 0px; left: 0px; margin: 0 0 8px 0; width: 16px; height: 16px;}
    .service-page ul.service-list li .service-content .icon span{width: 16px; height: 2px;}

    .portfolio-page{padding: 30px 0;}
    .portfolio-page ul.portfolio-list li{padding: 15px 0; display: block;}
    .portfolio-page ul.portfolio-list li .portfolio-content{width: 100%; padding: 0 0 15px 0;}
    .portfolio-page ul.portfolio-list li .portfolio-content h2{margin: 0 0 8px 0;}
    .portfolio-page ul.portfolio-list li .portfolio-photo{width: 100%;}
    .portfolio-page ul.portfolio-list li:nth-child(2n) .portfolio-content{padding: 0 0 15px 0;}

    .inner-top-area.content-banner .content-area{bottom: 30px;}
    .contact-page{padding: 0 0 30px 0; margin-top: -30px;}
    .contact-page .flex-contact{display: block;}
    .contact-page .flex-contact .info-area{width: 100%; padding: 25px;}
    .contact-page .flex-contact .form-area{width: 100%; padding: 25px;}
    

}
/* Large Mobile (Portrait) */
@media only screen and (max-width: 480px) {

}

/* Small Mobile (Portrait) */
@media only screen and (max-width: 320px) {

}











