/*
Theme Name: Orbito
Theme URI: http://orbito.omanthemes.com/html/
Author: Orientate
Author URI: http://orbito.omanthemes.com
Description: Orbito - Creative Agency Responsive HTML5 Template
Version: 1.0
License:
License URI:
*/

/*==================================
    [Table of contents]
===================================
    01. (min-width: 1366px And max-width: 1760px)
    02. (min-width: 1200px And max-width: 1600px)
    03. (max-width: 1699px)
    04. (min-width: 992px And max-width: 1199px)
    05. (max-width: 1199px)
    06. (max-width: 991px)
    07. (max-width: 767px)
    08. (max-width: 576px)
*/

/*------------------------------------------------------
/  01. (min-width: 1366px And max-width: 1499px)
/------------------------------------------------------*/
@media (min-width: 1345px) and (max-width: 1499px){
    .header01 {
        padding: 0 18px;
    }
    .iconBox01 {
        padding: 46px 25px 24px 24px;
    }
}

/*------------------------------------------------------
/  02. (min-width: 1200px And max-width: 1600px)
/------------------------------------------------------*/
@media (min-width: 1200px) and (max-width: 1600px){
    .iconBox01{
        padding-left: 35px;
        padding-right: 30px;
    }
    .mainMenu2 ul li{
        margin-right: 45px;
    }
    .slider01 .textLayer{
        position: relative;
        left: 250px;
    }
    .slider02 .textLayer{
        position: relative;
        left: 200px;
    }
    .aboutContent{
        padding-left: 45px;
    }
    .aiImgRow img{
        max-width: 48%;
    }
    .aiImgRow .aiImg03,
    .aiImgRow .aiImg01{
        margin-right: 15px;
    }
    .aiImgRow .aiImg04{
        max-width: 63%;
    }
    .ti02Inner,
    .testimonialItem{
        padding-left: 40px;
        padding-right: 40px;
    }
    .testimonialItem::after{
        right: 40px;
    }
    .singleCounter02{
        padding-left: 60px;
    }
    .bi01Details{
        width: calc(100% - 50px);
        left: 25px;
    }
    .aboutWidgetContent{
        padding-right: 0;
    }
    .aboutImage2{
        margin-left: -20px;
    }
    .aboutImage2 img{
        max-width: 48%;
    }
    .aboutImage2 img:first-child {
        margin: 25px 0 0px;
    }
    .aboutContent2{
        padding-left: 25px;
    }
    .iconBox05{
        padding: 0 50px;
    }
    .siDetails {
        width: calc(100% - 50px);
        left: 25px;
    }
    .contactLeft{
        margin-right: 40px;
    }
    .abps02Con{
        padding-right: 80px;
    }
    .iconBox07{
        padding: 0;
    }
    .pricingTable{
        padding-left: 40px;
        padding-right: 40px;
    }
    .sidebar .widget{
        padding-left: 35px;
        padding-right: 35px;
    }
    .tm01Info {
        padding: 35px 15px 0 30px;
    }
    .tm01Desc {
        top: 88px;
        padding: 40px 30px 0 30px;
    }
    .tm01Social{
        padding-bottom: 30px;
    }
    .tm01Desc:before {
        left: 35px;
        width: calc(100% - 70px);
    }
    .tm01Desc p{
        font-size: 17px;
        line-height: 28px;
    }
    .gallery img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
    .postCommetnListBox ol ul{
        margin-left: 35px;
    }
    .header01{
        padding: 0 30px;
    }
    .mainMenu ul li{
        margin-right: 35px;
    }
    .headerCall{
        margin-left: 20px;
    }
    .headerIcons a.searchToggler {
        margin-right: 18px;
        margin-left: 35px;
    }
    .headerIcons a.shareToggler{
        display: inline-block;
        margin-left: 10px;
    }
    .headerSocial{
        position: absolute;
        top: -31px;
        right: 30px;
        width: 100%;
        min-width: 240px;
        background: #fff;
        text-align: right;
        height: 100px;
        line-height: 80px;
        padding-right: 10px;
        visibility: hidden;
        opacity: 0;
        transition: all ease 300ms;
        -moz-transition: all ease 300ms;
        -webkit-transition: all ease 300ms;
    }
    .headerSocial.active{
        visibility: visible;
        opacity: 1;
    }
    .header01 .logo img{
        height: 60px;
    }
}
/*------------------------------------------------------
/  03. (max-width: 1699px)
/------------------------------------------------------*/
@media (max-width: 1699px){
    .accessArea{
        flex: inherit;
    }
}
/*------------------------------------------------------
/  04. (min-width: 992px And max-width: 1199px)
/------------------------------------------------------*/
@media (min-width: 992px) and (max-width: 1199px){
    .avConent {
        left: 30px;
        padding-left: 120px;
    }
    .postCommetnListBox ol ul{
        margin-left: 15px;
    }
    .postNavigationRow,
    .postCommetnFormBox{
        padding-left: 25px;
        padding-right: 25px;
    }
    .blogDetailsArea,
    .postCommetnListBox{
        padding-left: 30px;
        padding-right: 30px;
    }
    .blogDetailsArea h2.blogHeading {
        font-size: 36px;
        line-height: 46px;
    }
    .blogDetailsArea blockquote:before{
        left: 0;
    }
    .blogDetailsArea blockquote{
        padding-left: 85px;
    }
    .postMetaRow .col-md-5,
    .postMetaRow .col-md-7 {
        flex: 0 0 auto;
        width: 100%;
    }
    .postShare {
        justify-content: flex-start;
        margin: 20px 0 0;
    }
    .postAuthorBox img{
        left: 24px;
    }
    .postAuthorBox{
        padding-left: 172px;
        padding-right: 30px;
    }
    .pabSocial a {
        margin-left: 0;
        margin-right: 22px;
    }
    .pabSocial {
        position: relative;
        right: auto;
        top: 0;
        justify-content: flex-start;
        margin: -5px 0 20px;
    }
}


/*------------------------------------------------------
/  05. (max-width: 1199px)
/------------------------------------------------------*/
@media (max-width: 1199px){
    .slider01 .tp-bullet{
        left: -30px !important;
    }
    .aboutWidgetContent{
        padding-right: 0;
    }
    .footer .pdl124{
        padding-left: 15px;
    }
    .bi01Details{
        width: calc(100% - 50px);
        left: 25px;
    }
    .blogItem01{
        margin-bottom: 35px;
    }
    .singleCounter02{
        padding-left: 45px;
        margin-bottom: 40px;
    }
    .counterArea{
        padding-bottom: 43px;
    }
    .wcuContent{
        padding: 0 0 45px;
    }
    .whyChooseUsSection{
        padding-bottom: 250px;
    }
    .secSubTitle{
        letter-spacing: 4px;
    }
    .aboutSkills{
        padding: 70px 30px 30px 30px;
    }
    .aboutSkills .secTitle{
        font-size: 32px;
        line-height: 42px;
    }
    .aboutContent{
        padding: 45px 0 0;
    }
    .aboutImage .aiImgRow .float-end {
        float: left !important;
    }
    .iconBox01{
        margin: 0 0 35px;
    }
    .evenTeam{
        margin-top: 0;
    }
    .teamMember01{
        margin-bottom: 30px;
    }
    .aboutImage2{
        margin-left: 0;
    }
    .contactLeft{
        margin: 0;
    }
    .aboutContent2{
        padding: 40px 0 0;
    }
    .ti02Inner{
        padding-left: 40px;
        padding-right: 40px; 
    }
    .iconBox05{
        padding: 0 40px;
        margin: 0 0 35px;
    }
    .aboutImage2 .float-end {
        float: left !important;
        margin-left: 30px;
    }
    .slider02 .tparrows.tp-rightarrow{
        left: calc(100% + 30px) !important;
    }
    .slider02 .tparrows.tp-leftarrow{
        left: -30px !important;
    }
    .abps02Con{
        padding-right: 0;
    }
    .counterBox,
    .pricingTable,
    .iconBox07{
        margin: 0 0 35px;
    }
    .sidebar .widget{
        padding-left: 25px;
        padding-right: 25px;
    }
    .folioMeta{
        padding-left: 40px;
        padding-right: 40px;
    }
    .tm01Info {
        padding: 35px 15px 0 30px;
    }
    .tm01Desc {
        top: 88px;
        padding: 40px 30px 0 30px;
    }
    .tm01Social{
        padding-bottom: 35px;
    }
    .tm01Desc:before {
        left: 35px;
        width: calc(100% - 70px);
    }
    .postNavigationItem h3{
        font-size: 20px;
        line-height: 25px;
    }
    /*-- Mobile Menu --*/
    .menu_btn02{
        height: 45px;
        border-radius: 3px;
        background: #f9758f;
        color: #FFF;
        line-height: 45px;
        font-size: 16px;
        display: flex;
        padding: 0 15px;
        align-items: center;
        text-align: center;
        margin-right: 30px;
        margin-top: 0;
        margin-left: auto;
        font-family: 'Jost', sans-serif;
        text-transform: uppercase;
    }
    .menu_btn02 span{
        font-weight: 700;
        font-size: 14px;
    }
    .menu_btn02 i{
        line-height: inherit;
        margin-right: 8px;
        width: 14px;
    }
    .menu_btn02:hover, .menu_btn02:focus, .menu_btn02.active{
        color: #FFF;
    }
    .menu_btn02.active .twi-bars2:before{
        content: "\fa88";
    }
    .mainMenu2{
        z-index: 99;
        position: absolute;
        margin: 0;
        padding: 0;
        left: 0;
        top: 100%;
        width: 100%;
        background: #fff;
        box-shadow: -2px 4px 7px 0px rgba(226, 225, 225, .79);
        display: none;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }
    .mainMenu2 ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: block;
    }
    .mainMenu2 ul li{
        transform: none;
        transition: none;
        padding: 0;
        margin: 0;
        position: inherit;
        display: block;
        width: 100%;
    }
    .mainMenu2 > ul > li > a{
        padding: 16px 25px;
        border-top: 1px solid rgba(0, 0, 0, .05);
        color: #343c55;
    }
    .mainMenu2 ul li.menu-item-has-children > a:after{
        margin: 0;
        float: right;
        font-size: 12px;
        top: 3px;
    }
    .mainMenu2 > ul ul li.menu-item-has-children > a:after{
        top: 3px;
    }
    .mainMenu2 ul li .sub-menu li .sub-menu,
    .mainMenu2 ul li .sub-menu{
        border: none;
        padding: 0;
        z-index: 5;
        position: relative;
        width: 100%;
        opacity: 1;
        margin: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        visibility: visible;
        pointer-events: inherit;
        top: 0;
        left: 0;
        display: none;
        transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transition: none;
        -ms-transition: none;

        transition: none;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
        -ms-transition: none;
    }
    .mainMenu2 ul li .sub-menu li .sub-menu{
        border-top: 1px solid #f5f5f5;
    }
    .mainMenu2 ul li .sub-menu li:hover .sub-menu,
    .mainMenu2 ul li:hover .sub-menu{
        visibility: visible;
        opacity: 1;
        left: auto;
        pointer-events: inherit;
        transition: none;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transition: none;
        -ms-transition: none;
        border: none;
    }
    .mainMenu2 ul li .sub-menu li {
        display: block;
        padding: 0;
        margin: 0;
        -webkit-transition: none;
        transition: none;
        opacity: 1;
        visibility: visible;
        transition: none;
        transform: none;
    }
    .mainMenu2 > ul ul li{
        border-top: 1px solid rgba(0, 0, 0, .05);
    }
    .mainMenu2 ul li .sub-menu li a{
        border: none;
        padding: 16px 25px;
        padding-left: 40px;
        background: transparent;
        display: block;
    }
    .mainMenu2 ul li .sub-menu ul li a{
        padding-left: 55px;
    }
    .mainMenu2 > ul > li > ul li:hover > a, .mainMenu2 > ul > li > ul li:active > a{
        background: transparent;
    }
    /*-- Mobile Menu --*/

    /*-- Mobile Menu --*/
    .menu_btn{
        height: 45px;
        border-radius: 3px;
        background: #f9758f;
        color: #FFF;
        line-height: 45px;
        font-size: 16px;
        display: flex;
        padding: 0 15px;
        align-items: center;
        text-align: center;
        margin-right: 30px;
        margin-top: 0;
        font-family: 'Jost', sans-serif;
        text-transform: uppercase;
    }
    .menu_btn span{
        font-weight: 700;
        font-size: 14px;
    }
    .menu_btn i{
        line-height: inherit;
        margin-right: 8px;
        width: 14px;
    }
    .menu_btn:hover, .menu_btn:focus, .menu_btn.active{
        color: #FFF;
    }
    .menu_btn.active .twi-bars2:before{
        content: "\fa88";
    }
    .mainMenu{
        z-index: 99;
        position: absolute;
        margin: 0;
        padding: 0;
        left: 0;
        top: 100%;
        width: 100%;
        background: #fff;
        box-shadow: -2px 4px 7px 0px rgba(226, 225, 225, .79);
        display: none;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }
    .mainMenu ul {
        margin: 0;
        padding: 0;
        list-style: none;
        display: block;
    }
    .mainMenu ul li{
        transform: none;
        transition: none;
        padding: 0;
        margin: 0;
        position: inherit;
        display: block;
        width: 100%;
    }
    .mainMenu > ul > li > a{
        padding: 15px 25px;
        border-top: 1px solid rgba(0, 0, 0, .05);
    }
    .mainMenu ul li.menu-item-has-children > a:after{
        margin: 0;
        float: right;
        font-size: 12px;
        top: 3px;
    }
    .mainMenu ul li .sub-menu li .sub-menu,
    .mainMenu ul li .sub-menu{
        border: none;
        padding: 0;
        z-index: 5;
        position: relative;
        width: 100%;
        opacity: 1;
        margin: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        visibility: visible;
        pointer-events: inherit;
        top: 0;
        left: 0;
        display: none;
        transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transition: none;
        -ms-transition: none;

        transition: none;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
        -ms-transition: none;
    }
    .mainMenu ul li .sub-menu li .sub-menu{
        border-top: 1px solid #f5f5f5;
    }
    .mainMenu ul li .sub-menu li:hover .sub-menu,
    .mainMenu ul li:hover .sub-menu{
        visibility: visible;
        opacity: 1;
        left: auto;
        pointer-events: inherit;
        transition: none;
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: none;
        -ms-transition: none;
        transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        -o-transition: none;
        -ms-transition: none;
        border: none;
    }
    .mainMenu ul li .sub-menu li {
        display: block;
        padding: 0;
        margin: 0;
        -webkit-transition: none;
        transition: none;
        opacity: 1;
        visibility: visible;
        transition: none;
        transform: none;
    }
    .mainMenu > ul ul li{
        border-top: 1px solid rgba(0, 0, 0, .05);
    }
    .mainMenu ul li .sub-menu li a{
        border: none;
        padding: 15px 25px;
        padding-left: 40px;
        background: transparent;
        display: block;
    }
    .mainMenu ul li .sub-menu ul li a{
        padding-left: 55px;
    }
    .mainMenu > ul > li > ul li:hover > a, .mainMenu > ul > li > ul li:active > a{
        background: transparent;
    }
    /*-- Mobile Menu --*/
}

/*------------------------------------------------------
/  06. (max-width: 991px)
/------------------------------------------------------*/
@media (max-width: 991px) {
    .menu_btn{
        margin-right: 20px;
    }
    .headerIcons a.searchToggler {
        margin-right: 18px;
        margin-left: 0;
    }
    .headerIcons a{
        margin-right: 15px;
    }
    .headerCall{
        margin-left: 20px;
    }
    .header01{
        padding: 0;
    }
    .postCommetnListBox ol ul{
        margin-left: 25px;
    }
    .gallery img:nth-child(3), .gallery img:nth-child(6), .gallery img:nth-child(9) {
        margin-right: 12px;
    }
    .sidebar.lsb{
        position: relative;
        margin-top: 0;
        margin-bottom: 60px;
    }
    .sidebar{
        position: relative;
        margin-top: 60px;
    }
    .orbFAQTab{
        margin: 0 0 40px;
    }
    .pricingTable{
        padding-left: 30px;
        padding-right: 30px;
    }
    .secTitle {
        font-size: 36px;
        line-height: 46px;
    }
    .siDetails {
        width: calc(100% - 40px);
        left: 20px;
    }
    .footerMenu ul li{
        margin-right: 11px;
    }
    .footer .widget{
        margin: 40px 0 0;
    }
    .testimonialItem{
        padding-left: 35px;
        padding-right: 35px;
    }
    .testimonialItem::after{
        right: 25px;
    }
    .avConent a{
        position: relative;
        margin-bottom: 10px;
    }
    .avConent{
        padding: 0 30px;
        left: 0;
    }
    .aboutImage2 img:first-child {
        margin: 85px 0 0px;
    }
    .aboutImage2 img{
        max-width: 50%;
    }
}

/*------------------------------------------------------
/  07. (max-width: 767px)
/------------------------------------------------------*/
@media (max-width: 767px){
    .singleCounter02 h2{
        min-width: 120px;
    }
    .aboutImage2 img, .aiImgRow img{
        width: 100%;
    }
    .headerInner02 .orbBtn01.orbBtnBorder{
        display: none;
    }
    .menu_btn02, .menu_btn{
        margin: 0;
    }
    .header01 {
        padding: 17px 0;
        min-height: 80px;
    }
    header .logo2 img,
    header .logo img{
        height: 40px
    }
    .accessArea{
        display: none;
    }
    .postNavigationItem{
        margin: 0 0 25px;
    }
    .postNavigationItem h3 {
        font-size: 18px;
        line-height: 24px;
    }
    .pabSocial a {
        margin-left: 0;
        margin-right: 22px;
    }
    .pabSocial {
        position: relative;
        right: auto;
        top: 0;
        justify-content: flex-start;
        margin: -5px 0 20px;
    }
    .postAuthorBox img {
        position: relative;
        left: 0;
        top: 0;
        margin: 0 0 25px;
    }
    .postAuthorBox {
        padding: 48px 20px 35px 20px;
    }
    .postShare{
        justify-content: flex-start;
        margin: 22px 0 0;
    }
    .blogDetailsArea blockquote:before{
        left: 0;
    }
    .blogDetailsArea blockquote{
        padding-left: 60px;
    }
    .blogDetailsArea h2.blogHeading {
        font-size: 35px;
        line-height: 45px;
    }
    .postCommetnFormBox h3.commentHeading{
        font-size: 32px;
    }
    .postCommetnListBox ol ul{
        margin-left: 15px;
    }
    .comment-reply{
        position: relative;
        top: 0;
        margin: 20px 0 15px;
    }
    .singleComment > img{
        position: relative;
        left: 0;
        top: 0;
        margin: 0 0 15px;
    }
    .singleComment{
        padding-left: 0;
    }
    .postNavigationRow,
    .postCommetnFormBox{
        padding-left: 15px;
        padding-right: 15px;
    }
    .blogDetailsArea,
    .postCommetnListBox{
        padding-left: 20px;
        padding-right: 20px;
    }
    .sidebar .widget.helpWidget .headerCall h3{
        font-size: 22px;
    }
    .pageBannerContent h2{
        font-size: 40px;
        line-height: 50px;
    }
    .footerSocial{
        justify-content: center;
        margin: 20px 0 0;
    }
    .contactForm form .col-lg-6, .contactForm form .col-lg-12 {
        padding-left: calc(var(--bs-gutter-x) * 0.5);
        padding-right: calc(var(--bs-gutter-x) * 0.5);
    }
    .contactForm{
        padding: 45px 0 0;
    }
    .ti02Inner {
        padding-left: 30px;
        padding-right: 30px;
    }
    .secDesc br{
        display: none;
    }
    .folioContent2{
        padding-left: 30px;
    }
    .iconBox06 i{
        left: 28px;
    }
    .iconBox06{
        margin: 30px 0 0;
        padding: 42px 30px 42px 105px;
    }
    .iconBox05 {
        padding: 0 25px;
    }
    .abcFooter .headerCall{
        margin: 30px 0 0;
    }
    .abcFooter{
        display: block;
    }
    .iconBox04{
        margin: 0 0 30px;
    }
    .aiCounter2{
        position: relative;
        left: 0;
        margin-top: 15px;
    }
    .filterUL{
        display: block;
        text-align: center;
    }
    .filterUL li{
        display: inline-block;
        margin: 0 7px 15px;
    }
    .featureSection .animBottom{
        width: 100%;
        height: auto;
    }
    .aboutImage2 img:first-child {
        margin: 0 0 0px;
    }
    .aboutImage2 .float-end,
    .aboutImage2 img{
        max-width: 100%;
        float: none !important;
        margin: 10px 0 0;
    }
    .slider02 .tparrows, .slider01 .tparrows{
        display: none;
    }
    .secSubTitle {
        letter-spacing: 3px;
    }
    .aiImgRow img{
        float: none !important;
        max-width: 100%;
        margin: 0 0 15px !important;
    }
    .aboutImage .aiImgRow:first-of-type {
        margin: 0;
    }
    .aiCounter{
        position: relative;
        top: 0;
        left: 0;
    }
    .abcCounters{
        display: block;
    }
    .iconBox03,
    .iconBox02{
        margin-bottom: 30px;
    }
    .siteInfoSection{
        text-align: center;
    }
    .footerMenu ul{
        margin: 20px 0 0;
        display: block;
    }
    .footerMenu ul li{
        display: inline-block;
    }
    .ctaRight{
        text-align: left;
    }
    .siDetails > i{
        width: 75px;
    }
    .siDetails{
        width: calc(100% - 30px);
        left: 15px;
        padding: 24px 75px 28px 25px;
    }
    .bi01Details {
        width: calc(100% - 30px);
        left: 15px;
    }
    .blogItem01{
        padding-bottom: 150px;
    }
    .bi01Date{
        width: 65px;
        height: 65px
    }
    .bi01Date span:first-child{
        font-size: 24px;
    }
    .bi01Date span:last-child{
        font-size: 14px;
    }
    .singleCounter02{
        padding-left: 25px;
    }
    .testimonialItem {
        padding-left: 28px;
        padding-right: 30px;
        margin-top: 30px;
    }
    .testimonialItem::after {
        right: 15px;
        bottom: 125px;
    }
    .secTitle br{
        display: none;
    }
    .singleCounter {
        float: none;
        margin: 0 0 15px;
    }
    .mb57 {
        margin-bottom: 0;
    }
    .portfolioSlider.owl-carousel .owl-dot{
        margin: 0 5px;
    }
    .noPaddingRight {
        padding-right: 15px;
    }
    .noPaddingLeft {
        padding-left: 15px;
    }
    .aboutVideo{
        border-radius: 10px;
        margin-bottom: 30px;
        height: auto;
        overflow: visible;
    }
    .avConent{
        bottom: 20px;
    }
    .avConent a {
        font-size: 22px;
        line-height: 70px;
        height: 70px;
        width: 70px;
    }
    .avConent h3 {
        font-size: 24px;
        line-height: 32px;
    }
    .aboutSkills{
        border-radius: 10px;
    }
}

/*------------------------------------------------------
/  08. (max-width: 576px)
/------------------------------------------------------*/
@media (max-width: 576px){
    .bi03Details h2 {
        font-size: 32px;
        line-height: 42px;
    }
    .bi03Details{
        padding-left: 22px;
        padding-right: 22px;
    }
    .relatedFolioTitle{
        font-size: 33px;
    }
    .folioMeta{
        padding-left: 40px;
        padding-right: 40px;
    }
    .orbitoPagination a, .orbitoPagination span {
        height: 45px;
        width: 45px;
        line-height: 43px;
        font-size: 16px;
    }
    .testimonialSlider2.owl-carousel .owl-dot{
        margin: 0 4px;
    }
    .iconBox01{
        padding-left: 30px;
        padding-right: 30px;
    }
    .folioContent h3{
        font-size: 23px;
        line-height: 32px;
    }
}