/**
 *  All necessary media requires for media view style.
 *  Do not forget to initial that in _theme-files.php (theme directory/core/components/...).
 *  Do not repeat media require !
 */

/*------------- _ Desktop media styles _ -------------*/

/*Code begins to 991px*/

@media only screen and (max-width: 1950px) {
    :root {
        --h1-title: 3.9rem;
        --h2-title: 2.8rem;
        --h3-title: 2.2rem;


        /*--body-tx: 1.25rem;*/
    }
    footer .contact-form .title h4 {
        zoom: .8;
    }
}

@media only screen and (max-width: 1800px) {
    header .logo {
        display: flex;
        max-width: 280px;
    }
    header .tel {
        font-size: 1.5rem;
        gap: 10px;
        padding: 11px 15px;
    }
    header .tel svg {
        width: 25px;
        height: auto;
    }
    header nav ul.menu li a {
        font-size: 1.1rem;
    }

    #banner .container {
        justify-content: space-between;
        max-width: calc(1442px + 60px);
        padding: 0 30px;
    }
    #banner .thumbnail {
        max-width: 500px;
    }
    #banner .content {
        max-width: 830px;
    }
}

@media only screen and (max-width: 1650px) {
    footer,
    #testimonials {
        padding-top: 100px;
    }
    .page-template-tpl-homepage #service,
    .page-template-tpl-homepage #video,
    #information {
        margin-top: 100px;
    }
    #services,
    #video #videos {
        margin-top: 70px;
    }
    #service {
        padding-bottom: 100px;
    }


    #information .title {
        text-wrap: unset;
    }
    #information .title h2 {
        max-width: 522px;
    }
    #video .title-video .info,
    #information .content {
        width: calc(50% - 28px);
    }
    #information .thumbnail {
        max-width: 597px;
        width: 45%;
    }

    #testimonials .owl-nav button.owl-prev {
        right: 40px;
    }
    #testimonials .owl-nav button.owl-next {
        left: 40px;
    }
}

@media only screen and (max-width: 1500px) {
    :root {
        --h1-title: 3.4rem;
        --h2-title: 2.4rem;
        --h3-title: 1.9rem;
        --h4-title: 1.5rem;
        --h5-title: 1.3rem;
        /*--body-tx: 1.25rem;*/
    }

    #testimonials-page .title {
        margin-bottom: 20px;
    }
    #testimonials-page .inner {
        gap: 25px;
    }
    #testimonials-page .inner .item {
        padding-top: 25px;
    }
    #testimonials-page .inner .item .thumbnail {
        width: 110px;
        height: 110px;
    }
    #testimonials-page .inner .item .wrapper {
        padding: 46px 66px 17px 35px;
    }

    header .tel {
        font-size: 1.2rem;
        gap: 7px;
        padding: 7px 15px;
    }
    header nav ul.menu {
        gap: 35px;
    }
    header nav ul.menu li.current-menu-item a:before {
        bottom: -7px;
    }
    header nav ul.menu li a {
        font-size: 1rem;
    }

    #banner .content {
        max-width: unset;
        width: 56%;
    }
    #banner .thumbnail {
        max-width: unset;
        width: 36%;
    }
    #banner .content .button {
        margin-top: 25px;
    }

    #testimonials .container {
        padding-right: 0;
    }
    #testimonials-page .inner .item .thumbnail {
        right: -15px;
    }
    #testimonials-page .inner .item.thumbnail-items {
        padding: 70px 0 0 0;
    }
}

@media only screen and (max-width: 1400px) {
    #banner .content {
        padding-top: 70px;
        width: 65%;
    }
    #banner .thumbnail {
        width: 30%;
    }
}

@media only screen and (max-width: 1350px) {
    #testimonials .item .content {
        padding: 70px 96px 46px;
    }
}

@media only screen and (max-width: 1250px) {
    :root {
        --h1-title: 3rem;
        --h2-title: 2.2rem;
        --h3-title: 1.65rem;

        /*--body-tx: 1.25rem;*/
    }
    .page-template-tpl-testimonials {
        /*padding-top: 107px;*/
    }

    header .logo {
        max-width: 200px;
    }
    header .tel {
        font-size: 1rem;
    }
    header .tel svg {
        width: 18px;
    }
    header nav ul.menu {
        gap: 28px;
    }
    header nav ul.menu li a {
        font-size: .9rem;
    }

    #information .container {
        align-items: stretch;
    }
    #information .thumbnail {
        width: calc(50% - 28px);
    }

    #blog #blogs {
        margin-top: 50px;
    }

    footer .contact-form {
        padding: 48px 30px 60px;
        max-width: 900px;
    }

    #blog {
        background: linear-gradient(180deg, #031534 90.38%, rgba(3, 21, 52, 0.00) 100%);
    }

    #video .tabs .one-tab {
        padding: 8px 30px;
    }

    #page-banner .title .container {
        max-width: calc(100% - 250px);
    }
    #page-banner .title .container h1:before {
        right: calc(100% + 30px);
    }
    #page-banner .title .container h1:after {
        left: calc(100% + 30px);
    }
}

@media only screen and (max-width: 1100px) {
    :root {
        --h1-title: 2.8rem;
        /*--h2-title: 2.2rem;*/
        --h3-title: 1.4rem;

        /*--body-tx: 1.25rem;*/
    }

    #banner .content {
        padding-top: 0;
    }

    #services {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
}

@media only screen and (max-width: 991px) {
    header {
        top: 0;
        background: linear-gradient(180deg, rgba(18, 22, 36, 0.80) 0%, rgba(19, 26, 51, 0.64) 15.64%);
        padding: 25px 0;
    }
    .fixed-whatsapp {
        display: none;
    }
    .to-contact {
        font-size: 1rem;
        width: 80px;
        height: 80px;
    }
    header .tel,
    header nav {
        display: none;
    }
    header .container {
        justify-content: center;
    }

    #banner video {
        display: none;
    }
    #banner:before {
        content:'';

        background: linear-gradient(180deg, rgba(69, 84, 138, 0.10) 0%, #253058e6 100%);
    }
    #banner .container:before {
        background: transparent;
    }
    #banner .container {
        position: relative;
        right: unset;
        transform: none;
        bottom: unset;
        justify-content: center;
        padding-top: 100px;
    }
    #banner .container:before {
        content: '';
        position: absolute;
        inset: 0;
        /*background: linear-gradient(180deg, #121624 0%, rgba(69, 84, 138, 0.10) 100%);*/
        display: flex;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    #banner .content.desk {
        display: none;
    }
    #banner .content.mob {
        display: flex!important;
        position: absolute;
        bottom: 150px;
        width: 100%;
        right: 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        z-index: 10;
    }
    #banner .content h1 {
        font-size: 3rem;
        font-weight: 700;
        text-align: center;
        max-width: 700px;
        margin-bottom: 50px;
    }
    #banner .thumbnail {
        width: 100%;
        max-width: 700px;
    }

    #information .title {
        display: none!important;
    }
    #information .title-mob {
        display: flex;
        width: 100%;
        margin-bottom: 25px;
    }
    #information .container {
        flex-direction: column;
        align-items: center;
    }
    #information .content {
        width: 100%;
        max-width: unset;
    }
    #information .thumbnail {
        width: 100%;
        align-items: flex-start;
        max-width: unset;
        max-height: 550px;
        margin-bottom: 25px;
    }

    #blog #blogs {
        grid-template-columns: repeat(2, 1fr);
    }

    footer {
        overflow: hidden;
        background: linear-gradient(180deg, #031534 40%, rgba(3, 21, 52, 0.00) 100%);
    }

    footer .contact-form {
        max-width: calc(100vw - 120px);
    }
    footer nav ul li a {
        font-size: 1rem;
    }
    footer .credits p {
        font-size: 1rem;
    }
    footer .background {
        min-width: 1100px;
    }
    #blog {
        background: linear-gradient(180deg, #031534 100%, rgba(3, 21, 52, 0.00) 100%);
    }

    .fixed-menu {
        display: flex;
    }


    .page-template-tpl-services #service,
    .page-template-tpl-blog #blog {
        padding-top: 0!important;
    }
}

@media only screen and (max-width: 950px) {
    #video .title-video {
        flex-direction: column;
        align-items: flex-start;
    }
    #video .title-video .info {
        max-width: unset;
        width: 100%;
        margin-top: 20px;
    }
    #video .title-video .info .button {
        display: none!important;
    }
    #videos {
        column-gap: 20px;
        row-gap: 30px;
    }

    #video .read-more-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1.5625rem 0rem;
        background: linear-gradient(90deg, #EDD484 2.33%, #C9A83F 50.84%, #B09130 93%);
        box-shadow: 0px 4px 10px 0px rgba(1, 13, 33, 0.20);
        padding: 16.5px 56.5px;
        color: var(--Blue, #031534);
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin: 60px auto 0;
        width: fit-content;
    }


    #videos .one-video .thumbnail .player {
        zoom: .7;
    }
    #video #videos {
        margin-top: 40px;
    }

    #testimonials .item .content {
        padding: 70px 70px 30px 50px;
    }



    #blog .title-blog {
        flex-direction: column;
        align-items: flex-start;
    }
    #blog .title-blog h3 {
        margin-bottom: 20px;
    }
    #blog .title-blog .info {
        width: 100%;
        max-width: unset;
    }
    #blog .title-blog .right-side h2 {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 900px) {
    #testimonials-page .inner .item.thumbnail-items {
        margin-top: 0;
    }
    #testimonials-page .title {
        margin-bottom: 0;
    }
    footer form {
        grid-column-gap: 29px;
        grid-row-gap: 18px;
    }
    footer form .one-input input {
        height: 40px;
    }
    footer form .one-input textarea {
        max-height: 98px;
    }
    footer form #submit input {
        padding: 0;
        height: 40px;
    }


    #testimonials-page {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #testimonials-page .inner {
        grid-template-columns: repeat(1, 1fr);
    }

    body {
        padding-top: 140px;
    }
    .page-template-tpl-testimonials {
        padding-top: 140px;
    }
    .page-template-tpl-testimonials #testimonials-page .inner {
        margin-top: 0;
    }

    #testimonials-page .inner {
        row-gap: 25px!important;
    }
    #testimonials-page .inner .item {
        padding-top: 0;
    }
}

@media only screen and (max-width: 850px) {
    #testimonials .wrapper {
        padding: 0 30px;
    }
    #testimonials .item .icon {
        width: 100px;
        height: 100px;
    }
    #testimonials .item {
        padding: 42px 32px 0 0;
    }
    #testimonials .item .content {
        padding: 60px 40px 30px 40px;
    }

    footer nav ul li {
        padding: 1.5px 15px;
    }



    #page-banner {
        padding: 150px 0 80px;
    }
    #page-banner .background {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }
    #page-banner .title {
        position: relative;
        right: unset;
        top: unset;
        transform: none;
    }

    #post-page .author .text p {
        font-size: 14px;
    }
    #post-page .author .thumbnail {
        width: 65px;
        height: 65px;
    }
}

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

    #video .tabs .one-tab {
        font-size: 1rem;
    }

    .page-template-tpl-homepage #service,
    .page-template-tpl-homepage #video {
        margin-top: 60px;
    }
    footer,
    #testimonials {
        padding-top: 45px;
    }
    #full-video {
        margin-top: 45px;
    }
    #information {
        padding: 50px 0 70px;
        margin-top: 45px;
    }
    #services,
    #video #videos {
        margin-top: 70px;
    }

    #banner .content h1 {
        font-size: 2.3rem;
        max-width: 600px;
    }

    #services .item {
        padding: 9px 9px 20px;
    }
    #services .item .button {
        font-size: 1rem;
        padding: 8px 25px;
    }

    #service {
        padding-top: 30px;
    }
    #services {
        margin-top: 40px;
    }

    #testimonials .title:after {
        content: '';
        position: absolute;
        width: 10000px;
        left: 30px;
        height: 4px;
        bottom: -19px;
        background: #EDD484;
    }

    #page-banner .title .container {
        max-width: calc(100% - 80px);
    }
    #page-banner .title .container h1:before {
        right: calc(100% + 10px);
    }
    #page-banner .title .container h1:after {
        left: calc(100% + 10px);
    }
}

@media only screen and (max-width: 700px) {
    #testimonials .title h2 {
        line-height: 1.5;
        max-width: 330px;
    }
    #testimonials .container:first-child {
        align-items: flex-start;
    }
}

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

    #testimonials-page .title {
        margin-bottom: 25px;
    }
    #videos {
        grid-template-columns: repeat(1, 1fr);
    }
    #video #videos {
        margin-top: 25px;
    }
    footer form {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    footer .contact-form .title {
        text-align: center;
    }

    footer nav ul {
        flex-direction: column;
        align-items: center;
    }
    footer nav ul li {
        display: flex;
        flex-direction: column;
        align-items: center;
        border-right: 0;
    }
    footer nav ul li:after {
        content: '';
        width: 27px;
        height: 1px;
        background: #FFFFFF;
        margin: 13px 0 6px;
    }
    footer nav ul li:last-child::after {
        content: none;
    }

    footer .credits {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    footer .credits p {
        margin: 0;
    }
}

@media only screen and (max-width: 600px) {
    #banner .content h1 {
        font-size: 1.75rem;
        max-width: 500px;
    }
    #testimonials-page .button,
    #blogs .item .button,
    #video .read-more-btn,
    #banner .content .button {
        font-size: 1rem;
        padding: 8px 28px;
    }

    #services {
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        max-width: 450px;
    }
    #services .item {
        padding: 8px 16px 22px;
        flex-direction: column-reverse;
        position: relative;
    }
    #services .item .title {
        margin-bottom: 20px;
        color: #D23143;
    }
    #services .item .button {
        position: absolute;
        bottom: 65px;
        right: 50%;
        transform: translateX(50%);
        padding: 5px 28px;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1;
        text-wrap: nowrap;
        width: auto;
    }
    #services .item .thumbnail {
        margin-bottom: 0;
    }
    #service {
        padding-bottom: 60px;
    }

    #testimonials .item {
        padding: 40px 16px 0 0;
    }
    #testimonials .item .content {
        padding: 65px 24px 30px;
    }
    #testimonials .wrapper .right-arrow,
    #testimonials .wrapper .left-arrow {
        display: none;
    }
    #testimonials .wrapper {
        padding-left: 14px;
    }
    #testimonials {
        padding-bottom: 40px;
    }


    #blog {
        padding-top: 40px;
        /*margin-top: 40px;*/
    }
    #blog #blogs {
        grid-template-columns: repeat(1, 1fr);
    }
    #blogs .item .content {
        gap: 10px;
        margin-bottom: 20px;
    }

    footer .social {
        margin-top: 60px;
    }

    #banner .container {
        padding: 50px 0 0;
    }
    #banner .thumbnail {
        height: calc(100vh - 50px);
    }
    #banner .content.mob h1 br {
        display: block;
    }
}

@media only screen and (max-width: 550px) {
    :root {
        --h1-title: 2.4rem;
        --h2-title: 2rem;
        --h3-title: 1.3rem;
        --h4-title: 1.25rem;
        --h5-title: 1rem;
        --body-tx: 1rem;
    }
    #banner .content h1 {
        max-width: 300px;
        margin-bottom: 25px;
    }
    #post-page {
        margin-top: 40px;
        margin-bottom: 40px;
    }
    #page-banner {
        padding: 150px 0 40px;
    }
    .fixed-inner {
        display: none;
    }

    #testimonials-page .inner .item .wrapper {
        padding: 46px 20px 17px 35px;
    }
}

@media only screen and (max-width: 475px){
    footer .contact-form {
        max-width: calc(100vw - 40px);
    }
}

@media only screen and (max-width: 450px) {
    :root {
        --h1-title: 2.1rem;
    }
    footer .credits p {
        font-size: .75rem;
    }

    footer form .checkbox {
        zoom: .8;
    }
}

@media only screen and (max-width: 375px) {
    footer .contact-form {
        padding: 48px 17px 42px;
    }
}


/*----------- _ End desktop media styles _ -----------*/
/*----------------------------------------------------*/
/*------------- _ Mobile media styles _ --------------*/

/*Code begins form 991px to 0px*/

/*----------- _ End mobile media styles _ ------------*/
/*----------------------------------------------------*/