/* ===================================================

   MatX Media Queries

   TOC:
        01. screen width less than 1401px and more then 1040  ( Extra large Screen / Desktop )
        02. screen width more than 1200px and less then 1300  ( Mid large Screen / Desktop )
        03. screen width less than 1200px  ( large Screen / Notebook )
        04. screen width more than 767px  ( Tablets & Desktop Screen )
        05. screen width less than 992px  ( Medium Screen / Tablets )
        06. screen width less than 801px  ( Medium wide Screen / Small Tablets )
        07. screen width less than 768px  ( Medium Screen / Smaller Tablets )
        08. screen width less than 603px  ( Medium Screen / Mobile )
        09. screen width less than 600px  ( Medium Screen / Mobile )
        10. screen width less than 500px  ( Small Screen / Mobile )
        11. screen width less than 370px  ( Smaller Screen / Mobile )
        
====================================================== */
/* screen width less than 1401px and more then 1040
------------------------------- */
@media (min-width: 1440px) {
    html{
        font-size: 18px;
    }
}
/* screen width less than 1401px and more then 1040
------------------------------- */
@media (max-width: 1440px) and (min-width: 1040px) {
    html{
        font-size: 15px!important;
    }
    .subtitle-card {
        font-size: 1rem;
    }
    /*padding 60px*/
    .p-all { padding: 3.75rem; }
    .pl-p { padding-left: 3.75rem; }
    .pr-p { padding-right: 3.75rem; }
    .plr-p { padding-right: 3.75rem; padding-left: 3.75rem; }
    .pt-p { padding-top: 3.75rem; }
    .pb-p { padding-bottom: 3.75rem; }
    .ptb-p { padding-bottom: 3.75rem; padding-top: 3.75rem; }
    /* margin general*/
    .m-all { margin: 3.75rem; }
    .ml-p { margin-left: 3.75rem; }
    .mr-p { margin-right: 3.75rem; }
    .mlr-p { margin-right: 3.75rem; margin-left: 3.75rem; }
    .mt-p { margin-top: 3.75rem; }
    .mb-p { margin-bottom: 3.75rem; }
    .mtb-p { margin-bottom: 3.75rem !important; margin-top: 3.75rem!important; }
    #video,
    .image-section {
        max-height: 468px;
        min-height: 468px;
    }
    .item-work-img img{
        max-height: 450px;
    }
    .tab-content{
        max-height: 308px;
    }
    .tab-content .tab-pane img{
        max-height: 308px;
    }
    .nav-tabs .nav-link{
        padding: 2rem;
    }
    .nav-tabs .nav-item{
        margin-top: -98px;
    }
    .grid-item{
        padding: 0 0.6rem;
    }
    .grid-item-detail h4{
        font-size: 1rem;
    }

}
/* screen width more than 1200px and less then 1300
---------------------------------------------------- */
@media (min-width: 1201px) and (max-width: 1367px) {

    html{
        font-size: 15px!important;
    }

    .card {
        padding: 3.333rem 1.778rem;
    }
    .title-card h5{
        font-size: 16px;
        letter-spacing: 1px;
    }
    .title-card {
        margin-bottom:  2.778rem;
    }
    .section-title p{
        font-size: 1.1rem;
    }
    .section-title p:first-letter { font-size: 1.4rem;  }
    #video,
    .image-section {
        max-height: 468px;
        min-height: 468px;
    }
    #clientsSection .section-content .logo.p-all {
        padding: 3.333rem
    }
    .section-title-v2 p{
        width: 50%;
    }
    #teamSection .section-content.p-all{
        padding-bottom: 0;
    }
    #teamSection .section-content.mb-p{
        margin-bottom: 0!important;
    }
    #owl-carousel-team .owl-nav {
        position: absolute;
        top: 42.5%;
    }
    #owl-carousel-team .owl-nav .owl-prev {
        position: absolute;
        right: auto;
        left: -2.25%;
    }
    #owl-carousel-team .owl-nav .owl-next {
        position: absolute;
        left: auto;
        right: -2.25%;
    }
    input.form-control, 
    select.form-control, 
    textarea.form-control{
        margin-bottom: 2.333rem;
    }
    .infoOffice {
        margin-bottom: 4.444rem;
    }
}
/* screen width less than 1200px
------------------------------- */
@media (max-width: 1200px) {
    html{ font-size: 14px; }

    .item-work-img img{
        max-height: 450px;
		
    }
    #teamSection .section-content.p-all{
        padding-bottom: 0;
    }
    #owl-carousel-team .owl-nav {
        position: absolute;
        top: 42.5%;
    }
    #owl-carousel-work .owl-nav .owl-prev, 
    #owl-carousel-team .owl-nav .owl-prev {
        position: absolute;
        right: auto;
        left: -2.25%;
    }
    #owl-carousel-work .owl-nav .owl-next,
    #owl-carousel-team .owl-nav .owl-next {
        position: absolute;
        left: auto;
        right: -2.25%;
    }
    #clientsSection .section-content .logo.p-all{
        padding: 3.333rem
    }
    .section-title-v2 p{
        width: 60%;
    }
    input.form-control, 
    select.form-control, 
    textarea.form-control{
        margin-bottom: 2.0rem;
    }
    .infoOffice {
        margin-bottom: 4.0rem;
    }
    #video,
    .image-section {
        max-height: 468px;
        min-height: 468px;
    }
    .item-service-details.p-all{
        padding: 2rem;
    }
}
/* screen width less than 1024px
--------------------------------- */
@media (max-width: 1024px) {

    /*padding 60px*/
    .p-all { padding: 3.75rem; }
    .pl-p { padding-left: 3.75rem; }
    .pr-p { padding-right: 3.75rem; }
    .plr-p { padding-right: 3.75rem; padding-left: 3.75rem; }
    .pt-p { padding-top: 3.75rem; }
    .pb-p { padding-bottom: 3.75rem; }
    .ptb-p { padding-bottom: 3.75rem; padding-top: 3.75rem; }
    /* margin general*/
    .m-all { margin: 3.75rem; }
    .ml-p { margin-left: 3.75rem; }
    .mr-p { margin-right: 3.75rem; }
    .mlr-p { margin-right: 3.75rem; margin-left: 3.75rem; }
    .mt-p { margin-top: 3.75rem; }
    .mb-p { margin-bottom: 3.75rem; }
    .mtb-p { margin-bottom: 3.75rem !important; margin-top: 3.75rem!important; }

    .card {
        padding: 1.5rem 1.5rem;
    }
    #clientsSection .section-content.p-3{
        padding-top: 0!important;
    }

    #owl-carousel-work .owl-nav {
        position: absolute;
        top: 42.5%;
    }
    #owl-carousel-work .owl-nav .owl-prev, 
    #owl-carousel-team .owl-nav .owl-prev {
        position: absolute;
        right: auto;
        left: -2.25%;
    }
    #owl-carousel-work .owl-nav .owl-next,
    #owl-carousel-team .owl-nav .owl-next {
        position: absolute;
        left: auto;
        right: -2.25%;
    }
    .section-title-text {
        width: 400px;
    }
    .section-title-v2 p{
        width: 80%;
    }
    .experience .section-content .row div:first-child{
        padding: 70px!important;
    }
    .experience .section-content .row div h4{
        padding-bottom: 0!important;
    }
    .mockup-pc{
        width: 80%;
    }
    .mockup-tablet{
        width: 34%;
        left: 6%;
    }
    .mockup-iphon{
        width: 20%;
        left: 30%;
    }
    .purchase h3{
        margin-top: 24px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .purchase .btn-primary{
        margin-top: 24px;
    }
    .item-work .content{
        height: 468px;
        position: relative;
    }
    .timeline.p-all{
        padding-top: 0;
    }
    #teamSection .section-content.p-all{
        padding-top: 0;
    }
    #contactSection .section-content.mtb-p{
        margin-top: 0!important;
    }
    .infoOffice {
        margin-bottom: 2.0rem;
    }
    .nav-tabs .nav-item{
        margin-top: 5px;
    }
    #portfolio_filter ul li{
        display: inline-block;
        margin-left: 1.1rem;
    }
    #worksSection .section-content.pr-p{
        padding-right: 0 !important;
    }
    .timeline .timeline-item .marker .dot {
        background-color: #969696;
    }

    .timeline .timeline-item .activity{
        border-left: 1px solid #969696;
    }
    #teamSection .p-all{
        padding-top: 0;
        padding-bottom: 0;
    }
}
/* screen width less than 992px
--------------------------------- */
@media (min-width: 991px) {

}
/* screen width less than 801px
------------------------------ */
@media (max-width: 800px) {
    /*padding 60px*/
    .p-all { padding: 3.75rem; }
    .pl-p { padding-left: 3.75rem; }
    .pr-p { padding-right: 3.75rem; }
    .plr-p { padding-right: 3.75rem; padding-left: 3.75rem; }
    .pt-p { padding-top: 3.75rem; }
    .pb-p { padding-bottom: 3.75rem; }
    .ptb-p { padding-bottom: 3.75rem; padding-top: 3.75rem; }
    /* margin general*/
    .m-all { margin: 3.75rem; }
    .ml-p { margin-left: 3.75rem; }
    .mr-p { margin-right: 3.75rem; }
    .mlr-p { margin-right: 3.75rem; margin-left: 3.75rem; }
    .mt-p { margin-top: 3.75rem; }
    .mb-p { margin-bottom: 3.75rem; }
    .mtb-p { margin-bottom: 3.75rem !important; margin-top: 3.75rem!important; }    

    .timeline .timeline-item .marker .dot {
        background-color: #969696;
    }
    .timeline .timeline-item .marker{
        margin-top: -44px;
    }
    .timeline .timeline-item .activity{
        border-left: 1px solid #969696;
    }
    .item-service-details.p-all{
        padding: 2rem;
    }
}

/* screen width more than 767px
------------------------------ */
@media (max-width: 768px) {

}
/* screen width less than 603px
------------------------------ */
@media (max-width: 603px) {

}
/* screen width less than 600px
------------------------------ */
@media (max-width: 600px) {
    .section-title-v2 .section-title-text{
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }
}
/* screen width less than 500px
------------------------------ */
@media (max-width: 500px) {
    /*padding 60px*/
    .p-all { padding: 2.75rem; }
    .pl-p { padding-left: 1.778rem; }
    .pr-p { padding-right: 1.778rem; }
    .plr-p { padding-right: 1.778rem; padding-left: 1.778rem; }
    .pt-p { padding-top: 2.75rem; }
    .pb-p { padding-bottom: 2.75rem; }
    .ptb-p { padding-bottom: 2.75rem; padding-top: 2.75rem; }
    /* margin general*/
    .m-all { margin: 2.75rem; }
    .ml-p { margin-left: 1.778rem; }
    .mr-p { margin-right: 1.778rem; }
    .mlr-p { margin-right: 1.778rem; margin-left: 1.778rem; }
    .mt-p { margin-top: 2.75rem; }
    .mb-p { margin-bottom: 2.75rem; }
    .mtb-p { margin-bottom: 2.75rem !important; margin-top: 2.75rem!important; }

    #mockup .col-md-12:last-child {
        margin-bottom: 0!important;
    }
    .timeline .timeline-item .activity{
        padding-left: 60px;
    }
    .timeline .timeline-item .month{
        margin-left: 60px;
    }
    .timeline .timeline-item .marker{
        margin-right: 44px;
    }
    .thanks h1 {
        top: 25%;
        left: 36px;
    }
    #contactSection .section-content .row div:first-child{
        margin-bottom: 40px;
    }
}
/* screen width less than 400px
------------------------------ */
@media (max-width: 440px) {
	.header__logo img {
  widht: 20%;
  }

}
/* screen width less than 370px
------------------------------ */
@media (max-width: 370px) {
	
	.header__logo img {
  widht: 20%;
  }
  
    .owl-carousel .owl-nav .owl-prev {
        position: absolute;
        left: 32%;
    }
    .owl-carousel .owl-nav .owl-next {
        position: absolute;
        right: 32%;
    }
    .services .col-xs-12{
        padding: 0;
    }
    .section-title-text {
        width: 280px;
    }
    .item-work {
        width: 280px;
        margin: 0 auto;
    }
    .item-work-content{
        width: 280px;
    }
}