

/* Medium Desktop */

@media only screen and (max-width: 1440px) {

    .container {max-width: 1307px;}

}



/* Small Laptop */

@media only screen and (max-width: 1280px) {

  

}



/* Tablet (Landscape) */

@media only screen and (max-width: 1024px) {

    .container{padding: 0 30px;}

    .main-header{padding: 0px;}

    .main-header .inner-header .logo{width: 120px; position: relative; z-index: 1;}

    .main-header .inner-header .logo img{width: 100%;}

    .main-header .rightside ul.main-menu li{margin-left: 24px;}

    .main-header .rightside ul.main-menu li a{padding: 30px 0;}



    .top-main-slider-area .inner-photo-block{height: 70vh;}

    .top-main-slider-area .inner-photo-block .content-area h1{font-size: 32px; line-height: 42px;}

    .top-main-slider-area .inner-photo-block::before {width: 100%;}



    .service-slider-section{margin: -50px 0 0 0; padding: 0 0 40px 0;}

    .service-slider-section .service-block{padding: 20px 26px; min-height: 450px;}

    .service-slider-section .service-block h2{font-size: 28px; line-height: 34px;}





    .who-we-are-section{padding: 0 0 40px 0;}

    .who-we-are-section .titlebar{padding-right: 30px;}

    .who-we-are-section h2{font-size: 36px; line-height: 46px; margin: 0 0 5px 0;}

    .who-we-are-section .subtitle{font-size: 18px; line-height: 140%;}

    .who-we-are-section .content-area{ padding-top: 5px;}

    .who-we-are-section p {font-size: 15px; line-height: 156%; margin: 0 0 15px 0;}

    .who-we-are-section .btn-read{text-align: center; padding: 10px 32px; font-size: 13px;}



    .news-section{padding: 0 0 40px 0;}

    .news-section h2{font-size: 30px; line-height: 46px; margin: 0 0 10px 0;}

    .news-section .owl-prev,

    .news-section .owl-next{top: -56px;}

    .news-section .news-block{padding: 0px 0px 20px 0px;}

    .news-section .news-block .news-photo{height: 214px;}

    .news-section .news-block .date{font-size: 14px; line-height: 18px; margin: 20px 0 10px 0;}

    .news-section .news-block .title{font-size: 22px; line-height: 150%; margin: 0px 0 10px 0;}

    .news-section .news-block p{font-size: 15px; line-height: 156%; margin: 0 0 15px 0;}

    .news-section .news-block .btn-read{text-align: center; padding: 10px 32px; font-size: 13px;}



    .footer-area .flex-row{padding: 30px 0; flex-wrap: wrap;}

    .footer-area .flex-row::before {width: 250px;}

    .footer-area .logo-part{width: 100%; margin-bottom: 30px;}

    .footer-area .logo-part .logo{width: 80px;}

    .footer-area .logo-part .logo img{width: 100%}

    .footer-area .quick-link-area{width: 25%;}

    .footer-area .service-area{width: 40%; padding-right: 20px;}

    .footer-area .contact-area{width: 35%;}

    .footer-area ul.link li a{font-size: 13px; line-height: 150%;}

    .footer-area .flex-row p{font-size: 13px; line-height: 150%; margin: 0 0 10px 0;}

    .footer-area .flex-row .in-link{margin-top: 15px;}

    .footer-area .copyright{padding: 15px 0;}



    .inner-top-area{height: 400px;}

    .inner-top-area .content-area{padding: 80px 0 0 0;}

    .inner-top-area .content-area h1{font-size: 32px; line-height: 40px;}



    .contact-page{padding: 0 0 40px 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;}

    .contact-page .flex-contact .map-area{height: 340px;}



    .career-content-area{padding: 40px 0;}

    .career-content-area h2{font-size: 32px; line-height: 40px; margin: 0 0 10px 0;}

    .career-content-area p{font-size: 15px; line-height: 25px;}



    .apply-now-area{padding: 40px 0;}

    .apply-now-area h2{font-size: 32px; line-height: 40px; margin: 0 0 10px 0;}

    .apply-now-area .input-block .form-control{padding: 14px 0;}

    .apply-now-area .form-input--file{padding: 11px 0px;}

    .apply-now-area .form-input--file .border{padding: 10px 52px;}

    .apply-now-area .btn-submit{margin-top: 15px;}



    .news-section.news-page{padding: 40px 0;}

    .news-section ul.news-list li{width: 50%;min-height: 464px;}



    .our-plants-section{padding: 0 0 30px 0; margin-top: -50px;}

    .our-plants-section .inner-block{margin: 0 0 10px 0;}

    .our-plants-section .inner-block .photo-block{width: 50%;}

    .our-plants-section .inner-block .content-block{width: 50%; padding: 25px;}

    .our-plants-section .inner-block .content-block p{font-size: 15px; margin: 0 0 10px 0;}

    .our-plants-section .inner-block .content-block ul{width: 100%;}

    .our-plants-section .inner-block .content-block ul li{font-size: 15px; font-family: var(--tt500); margin: 0 0 10px 0;}

    .our-plants-section .inner-block .content-block h2{font-size: 46px; line-height: 46px; margin: 0 0 8px 0;}

    .our-plants-section .inner-block .content-block h2 span{font-size: 30px; line-height: 40px;}



    .our-legacy-section{padding: 40px 0;}

    .our-legacy-section .titlebar{padding-right: 30px;}

    .our-legacy-section h2{font-size: 36px; line-height: 46px; margin: 0 0 5px 0;}

    .our-legacy-section .subtitle{font-size: 18px; line-height: 140%;}

    .our-legacy-section .content-area{ padding-top: 5px;}

    .our-legacy-section p {font-size: 15px; line-height: 156%; margin: 0 0 15px 0;}



    .vision-section{padding: 360px 0 5px 0;}

    .vision-section .flex-content{margin: 0 0 30px 0;}

    .vision-section .flex-content h2{font-size: 36px; line-height: 46px; margin: 0 0 5px 0;}

    .vision-section .flex-content .content-block{padding-top: 5px;}

    .vision-section .flex-content .content-block p{font-size: 15px; line-height: 156%; margin: 0 0 15px 0;}

    .vision-section .vision-photo{height: 460px;}

    .vision-section .bg{padding-top: 460px;}



    .service-page{padding: 0 0 30px 0; margin-top: -50px;}

    .service-page .service-block{padding: 20px 26px; min-height: 550px;}

    .service-page .service-block h2{font-size: 22px; line-height: 28px;}

    .service-page .service-block p { font-size: 13px; line-height: 20px;}

    .service-page .service-block.lpg-bottling-block .bottom-content{position: relative; bottom: 0; right: 0; width: 100%; margin-top: 16px;}

    .service-page .service-block.lpg-bottling-block .bottom-content h3{font-size: 16px; line-height: 22px;}

    .service-page .service-block.lpg-bottling-block .service-photo{width: 220px;}

    .service-page .service-block.lpg-bottling-block .service-photo img{width: 100%;}

    .service-page .service-block.gas-stations-block{padding: 20px 26px; min-height: 550px;}

    .service-page .service-block.gas-stations-block .leftside{padding-right: 25px;}

    .service-page .service-block.gas-stations-block .rightside{display: block;}

    .service-page .service-block.gas-stations-block .rightside .half-part{padding: 0; width: 100%;}

    .service-page .service-block.gas-stations-block .rightside .half-part:last-child{padding:0; margin-top: 15px;}

    .service-page .service-block.gas-stations-block .rightside .half-part h3{font-size: 15px; line-height: 19px;}

    

    .cylinder-sizes-area{padding: 0 0 30px 0;}

    .cylinder-sizes-area .cylinder-banner{padding: 30px;}

    .cylinder-sizes-area .cylinder-banner .content{width: 50%;}

    .cylinder-sizes-area .cylinder-banner .content h2{font-size: 36px; line-height: 46px; margin: 0 0 10px 0;}

    .cylinder-sizes-area .cylinder-banner .content p{font-size: 15px;}

    .cylinder-sizes-area .cylinder-banner .cylinder-img-area{width: 50%;}

    .cylinder-sizes-area .cylinder-banner .logo-bg{margin-top: -117px; width: 420px;}

    .cylinder-sizes-area .cylinder-banner .cylinder-img-area .cylinder-26, .cylinder-sizes-area .cylinder-banner .cylinder-img-area .cylinder-47 {width: 50%;}

    .cylinder-sizes-area .cylinder-banner .cylinder-img-area .cylinder-26 img, .cylinder-sizes-area .cylinder-banner .cylinder-img-area .cylinder-47 img {width: 100%;}

    

    .news-slider .item {min-height: 495px !important; height: 1px !important;}



}



/* Tablet (Portrait) */

@media only screen and (max-width: 767px) {

    .container{padding: 0 20px;}

    .main-header{padding: 0px;}

    .main-header .inner-header{padding: 10px 0; border: none;}

    .main-header .inner-header .logo{width: 100px; position: relative; z-index: 1;}

    .main-header .inner-header .logo img{width: 100%;}

    .main-header .btn-menu{display: block;}

    header.fixed .main-header{background: var(--main-color);}



    .main-header .rightside ul.main-menu{position: fixed; top: -100%; left: 0px; display: block; background: var(--main-color); width: 100%; padding:75px 20px 20px 20px; transition: all .5s ease; opacity: 0;}

    .main-header .rightside ul.main-menu.open{top: 0px; transition: all .5s ease; opacity: 1;}

    .main-header .rightside ul.main-menu li{margin: 0px;}

    .main-header .rightside ul.main-menu li a::before{background: transparent;}

    .main-header .rightside ul.main-menu li a{padding: 12px 0;}

    .main-header .rightside ul.main-menu li a:hover::before, .main-header .rightside ul.main-menu li a.active::before {width: 100%; background: #FFF;}



    .top-main-slider-area .inner-photo-block{height: 60vh;}

    .top-main-slider-area .inner-photo-block .content-area h1{font-size: 32px; line-height: 42px;}

    .top-main-slider-area .inner-photo-block::before {width: 100%;}



    .service-slider-section{margin: -50px 0 0 0; padding: 0 0 40px 0;}

    .service-slider-section .service-block{padding: 20px 26px; min-height: 450px;}

    .service-slider-section .service-block h2{font-size: 28px; line-height: 34px;}

    .service-slider-section .owl-next{right: -10px;}

    .service-slider-section .owl-prev{left: -10px;}



    .who-we-are-section{padding: 0 0 40px 0;}

    .who-we-are-section .container{display: block;}

    .who-we-are-section .titlebar{width: 100%; padding-right: 0;}

    .who-we-are-section h2{font-size: 36px; line-height: 46px; margin: 0 0 5px 0;}

    .who-we-are-section .subtitle{font-size: 18px; line-height: 140%;}

    .who-we-are-section .content-area{width: 100%; padding-top: 5px;}

    .who-we-are-section p {font-size: 15px; line-height: 156%; margin: 0 0 15px 0;}

    .who-we-are-section .btn-read{width: 100%; text-align: center; padding: 10px 32px; font-size: 13px;}



    .our-legacy-section{padding: 40px 0;}

    .our-legacy-section .container{display: block;}

    .our-legacy-section .titlebar{width: 100%; padding-right: 0;}

    .our-legacy-section h2{font-size: 30px; line-height: 40px; margin: 0 0 5px 0;}

    .our-legacy-section .subtitle{font-size: 18px; line-height: 140%;}

    .our-legacy-section .content-area{width: 100%; padding-top: 5px;}

    .our-legacy-section p {font-size: 15px; line-height: 156%; margin: 0 0 15px 0;}



    .vision-section{padding: 300px 0 5px 0;}

    .vision-section .vision-photo{height: 300px;}

    .vision-section .vision-photo::before {height: 30%;}

    .vision-section .bg{padding-top: 300px;}

    .vision-section .flex-content{display: block;}

    .vision-section .flex-content h2{font-size: 30px; line-height: 40px; margin: 0 0 5px 0; width: 100%; padding: 0px;}

    .vision-section .flex-content .content-block{width: 100%; padding-top: 5px;}

    .vision-section .flex-content .content-block p{font-size: 15px; line-height: 156%; margin: 0 0 15px 0;}



    .news-section{padding: 0 0 40px 0;}

    .news-section h2{font-size: 30px; line-height: 46px; margin: 0 0 10px 0;}

    .news-section .owl-prev,

    .news-section .owl-next{top: -56px;}

    .news-section .news-block{padding: 0px 0px 20px 0px;}

    .news-section .news-block .news-photo{height: 214px;}

    .news-section .news-block .date{font-size: 14px; line-height: 18px; margin: 20px 0 10px 0;}

    .news-section .news-block .title{font-size: 22px; line-height: 150%; margin: 0px 0 10px 0;}

    .news-section .news-block p{font-size: 15px; line-height: 156%; margin: 0 0 15px 0;}

    .news-section .news-block .btn-read{text-align: center; padding: 10px 32px; font-size: 13px;}



    .footer-area .flex-row{padding: 30px 0; }

    .footer-area .logo-part{width: 100%; margin-bottom: 20px;}

    .footer-area .logo-part .logo{width: 100px;}

    .footer-area .logo-part .logo img{width: 100%}

    .footer-area .quick-link-area{width: 50%; margin-bottom: 20px;}

    .footer-area .service-area{width: 50%; margin-bottom: 20px;}

    .footer-area .contact-area{width: 100%;}

    .footer-area ul.link li a{font-size: 13px; line-height: 150%;}

    .footer-area .flex-row p{font-size: 13px; line-height: 150%; margin: 0 0 10px 0;}

    .footer-area .flex-row .in-link{margin-top: 15px;}

    .footer-area .copyright{display: block; padding: 15px 0;}

    

    .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;}



    .career-content-area{padding: 30px 0;}

    .career-content-area h2{font-size: 24px; line-height: 30px; margin: 0 0 10px 0;}



    .apply-now-area{padding: 30px 0;}

    .apply-now-area h2{font-size: 24px; line-height: 30px; margin: 0 0 10px 0;}

    .apply-now-area .form-input--file .border{padding: 10px 20px;}

    .apply-now-area .btn-submit{width: 100%;}



    .news-section.news-page{padding: 30px 0;}

    .news-section ul.news-list li{width: 100%; margin-bottom: 20px;min-height: 460px;}



    .our-plants-section{padding: 0 0 30px 0; margin-top: -30px;}

    .our-plants-section .inner-block{display: block;}

    .our-plants-section .inner-block .photo-block{width: 100%; min-height: auto; height: 200px;}

    .our-plants-section .inner-block .content-block{width: 100%;}



    .service-page ul.service-list li{width: 100%;}

    .service-page ul.service-list li.large{width: 100%;}

    .service-page .service-block{padding: 20px 26px 220px 26px; min-height: auto;}
    .service-page .service-block.gas-cylinder-block .service-photo{position: relative;}
    .service-page .service-block.gas-cylinder-block{padding: 0px !important;  min-height: auto;}
    .service-page .service-block.gas-cylinder-block h2{padding: 20px 26px 0 26px;}
    .service-page .service-block.gas-cylinder-block p{padding: 0px 26px 20px 26px;}
    .service-page .service-block.gas-cylinder-block .plant-name{margin-left: 26px;}

    .service-page .service-block.oil-product-block{padding: 0px !important;  min-height: auto;}
    .service-page .service-block.oil-product-block .service-photo{position: relative;}
    .service-page .service-block.oil-product-block h2{padding: 20px 26px 0 26px;}
    
    .service-page .service-block.oil-product-block p{padding: 0px 26px 20px 26px;}
    

    .service-page .service-block.gas-stations-block{padding: 0px !important;  min-height: auto;}
    .service-page .service-block.gas-stations-block .service-photo{position: relative;}
    .service-page .service-block.gas-stations-block .d-flex{display: block !important; padding: 0px 26px 20px 26px;}
    .service-page .service-block.gas-stations-block h2{padding: 20px 26px 0 26px;}
    .service-page .service-block.gas-stations-block .leftside{width: 100%; padding: 0;}
    .service-page .service-block.gas-stations-block .rightside{width: 100%; margin-top: -1px;}
    


    .cylinder-sizes-area .cylinder-banner{padding: 25px; background: linear-gradient(272.45deg, rgba(71, 182, 88, 0.5) 5.61%, #47B658 96.92%); display: block;}

    .cylinder-sizes-area .cylinder-banner .content{width: 100%; padding-bottom: 15px;}

    .cylinder-sizes-area .cylinder-banner .content h2{font-size: 24px; line-height: 30px;}

    .cylinder-sizes-area .cylinder-banner .cylinder-img-area{width: 100%;}

    .cylinder-sizes-area .cylinder-banner .logo-bg{display: none;}

    

    .news-slider .item {min-height: 480px !important;height: 1px !important;}

    
    .contentpost-area {padding: 30px 0;}


}

/* Large Mobile (Portrait) */

@media only screen and (max-width: 480px) {



}



/* Small Mobile (Portrait) */

@media only screen and (max-width: 320px) {



}























