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

    .about .sec-1,
    .sec-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .sec-1 h3 {
        font-size: 17px;
        text-align: center
    }

    .sec-1 p {
        font-size: 12px;
        text-align: center
    }

    .about .sec-1 p {
        padding-right: 5px
    }

    .about .sec-1 .custom-btn {
        --width: 200px;
        --height: 40px;
        --transform: translateX(164px);
        --icon-size: 12px;
        --font-size: 12px
    }

    .about .sec-2 img {
        width: 300px;
        height: 10rem;
        margin-top: 30px
    }

    .serve .sec-2 img {
        width: 180px;
        height: 10rem;
        margin-top: 30px
    }

    .serve .sec-1 {
        margin-left: 0
    }

    .services-section h1 {
        font-size: 13px;
        padding-inline: 5px;
        margin-top: 20px
    }

    .contact-section h1,
    .portfolio-section h1 {
        font-size: 16px;
        margin-bottom: 0
    }

    .services-section .para {
        font-size: 12px;
        padding-inline: 10px
    }

    .services-section .serr ul.services-main {
        flex-direction: column
    }

    .services-main li {
        display: flex;
        justify-content: center
    }

    .serv-card .card-overlay {
        top: 35px
    }

    .key-feature .row {
        overflow: scroll
    }

    .key-feature .services-section ul.services-main {
        flex-wrap: wrap
    }

    .key-feature .services-main li .serv-card {
        width: 150px;
        height: 140px
    }

    .key-feature .serv-card .circle img {
        width: 40px
    }

    .key-feature .serv-card h1 {
        font-size: 11px;
        padding-inline: 0
    }

    .portfolio-section .text-heading {
        padding: 1rem 8px 3rem
    }

    .portfolio-section .text-heading p {
        font-size: 9px
    }

    .portfolio-section .container {
        width: 60px;
        height: 120px;
        padding-right: 30px;
        perspective: 500px
    }

    .portfolio-section .item {
        width: 50px;
        height: 100px
    }

    .slide1 {
        transform: rotateY(0) translateZ(125px)
    }

    .slide2 {
        transform: rotateY(60deg) translateZ(125px) rotateY(-60deg)
    }

    .slide3 {
        transform: rotateY(120deg) translateZ(125px) rotateY(-120deg)
    }

    .slide4 {
        transform: rotateY(180deg) translateZ(125px) rotateY(-180deg)
    }

    .slide5 {
        transform: rotateY(240deg) translateZ(125px) rotateY(-240deg)
    }

    .slide6 {
        transform: rotateY(300deg) translateZ(125px) rotateY(-300deg)
    }

    .slide7 {
        transform: rotateY(360deg) translateZ(125px) rotateY(-360deg)
    }

    .contact-section {
        height: 85dvh
    }

    .contact-section h1 {
        padding-block: 15px
    }

    .contact-section .contact-box {
        padding-inline: 30px;
        margin-top: 10px
    }

    .contact-section .wave-group .input,
    .footer-content .f-serv a {
        font-size: 12px
    }

    .contact-section .wave-group .label,
    .uk-container p {
        font-size: 10px
    }

    .contact-section .wave-group .input:focus~label .label-char,
    .contact-section .wave-group .input:valid~label .label-char {
        font-size: 11px;
        transform: translateY(-10px)
    }

    .form-control {
        padding-block: 4px;
        margin-top: 5px !important
    }

    .contact-btn {
        margin-top: 30px
    }

    .contact-section .custom-btn {
        --btn-color: var(--secondary-color);
        --btn-hover-color: #fff;
        --width: 180px;
        --height: 35px;
        --transform: translateX(142px);
        --icon-size: 16px;
        --font-size: 12px;
        background-color: transparent;
        border: 2px solid #fff
    }

    footer .content .ft-logo {
        height: 60px;
        width: 200px
    }

    .info-items {
        text-align: start
    }

    .footer-about .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center
    }

    .footer-content .servs {
        padding-left: 5px;
        margin-bottom: 20px
    }

    .contact-pg {
        padding-top: 20rem
    }

    .contact-pg h1 {
        font-size: 22px
    }

    .contact-pg p {
        font-size: 13px
    }

    .about-text {
        padding: 20rem 2rem 50px
    }

    .about-text h1 {
        font-size: 20px;
        padding-block: 10px;
        margin-top: 10px
    }

    .about-text h6 {
        font-size: 12px;
        margin-bottom: 0
    }

    .about-text .head-btns {
        margin-top: 50px
    }

    .about-text .head-btns .btn {
        font-size: 13px;
        padding: 10px 60px
    }

    section.about-section-2 {
        overflow: hidden
    }

    .left-img {
        display: none
    }
}

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

    .about-text .head-btns .ab-btn2,
    .bk-btn2,
    .serv-sec-1 img {
        margin-left: 0
    }

    *,
    body {
        overflow-inline: hidden
    }

    .navbar-brand img {
        width: 140px;
        height: 60px
    }

    .share-menu .btn_toggle,
    .whatsapp .whatsapp-btn {
        height: 45px;
        width: 40px;
        font-size: 1.5rem
    }

    .custom-btn .button__text {
        transform: translateX(5px)
    }

    .custom-btn .button__icon {
        width: 35px
    }

    .header-sec1 .main-text {
        margin: 0 0 2rem 1rem;
        text-align: justify
    }

    .main-text h1 {
        font-size: 2rem !important;
        font-style: normal
    }

    .main-text h1 .hh-span {
        font-size: 1.6rem
    }

    .main-text p {
        font-size: 12px;
        font-weight: 500;
        margin-top: 20px
    }

    .platforms {
        padding: 20px 0
    }

    .ads_sponsors div img {
        width: 43px;
        aspect-ratio: 3/1
    }

    button.get-in-touch-wrap {
        top: 15px
    }

    .popup-trigger,
    button.get-in-touch-wrap-r {
        padding: 5px 10px
    }

    .services-main li {
        margin-bottom: 0
    }

    .services-main li:last-child {
        margin-bottom: 25px
    }

    .social-links h5 {
        text-align: center;
        margin-left: 0
    }

    .social-icons {
        display: flex;
        flex-direction: row;
        gap: 25px;
        justify-content: center;
        padding-left: 0
    }

    .social-icons li {
        width: 50px;
        height: 45px
    }

    .social-icons li::after {
        width: 50px;
        height: 35px;
        transform: translate(0, 45px)
    }

    .about-section-1 {
        padding: 50px 10px
    }

    .about-section-1 h2 {
        font-size: 19px;
        margin-bottom: 20px
    }

    .about-section-1 p {
        font-size: 13px
    }

    .about-text .head-btns .ab-btn1 {
        margin-right: 0;
        margin-bottom: 20px
    }

    .amz-textbox h2,
    .service-sec h2 {
        font-size: 18px
    }

    .amz-textbox p,
    .booking-text .para1,
    .gst-btns .btn,
    .para2 {
        font-size: 12px
    }

    .col-6:first-child .counter-item:nth-child(2) p,
    .slick-arrow {
        font-size: 10px
    }

    .about-section-2 .d-flex {
        margin-top: 10px;
        gap: 0;
        margin-left: 35%
    }

    .counter-item {
        height: 170px
    }

    .counter-item img {
        height: 40px
    }

    .counter-item h3 {
        margin-top: 25px;
        font-size: 22px
    }

    img.cta-img {
        bottom: 0;
        left: 10px;
        width: 120px
    }

    .about-section-2 .custom-btn,
    .about-section-2 .custom-btn:hover .button__icon {
        width: 150px
    }

    .about-section-2 .custom-btn .button__text {
        font-size: 11px
    }

    .about-section-2 .custom-btn .button__icon {
        transform: translateX(113px)
    }

    .about-section-2 .custom-btn:first-child {
        margin-bottom: 10px
    }

    .amaz-imgg {
        display: none
    }

    .about-portfolio h1 {
        font-size: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px
    }

    .about-ads_sponsors div img {
        height: 130px;
        width: 65px
    }

    .slick-arrow {
        width: 60px
    }

    .bk-btn1 {
        margin-right: 0;
        font-size: 15px
    }

    .bk-btn2 {
        margin-top: 20px;
        font-size: 18px
    }

    .booking-text,
    .serv-sec-1 {
        padding-inline: 10px
    }

    .booking-text h1 {
        font-size: 20px
    }

    .ghost-hero .header-sec1 .main-text {
        width: 18rem;
        margin: 10rem 0 0
    }

    .gst-btns,
    .service-sec .row .col-md-5 {
        display: flex;
        justify-content: center
    }

    .gst-btns .btn {
        padding: 5px 20px
    }

    .service-sec {
        padding: 3rem 10px;
        text-align: justify
    }

    .text-sec {
        margin-bottom: 20px
    }

    .service-sec h3 {
        font-size: 27px;
        margin-bottom: 10px;
        text-align: center
    }

    .service-sec p {
        font-size: 14px
    }

    .service-sec img {
        width: 250px;
        height: 250px;
        margin-top: 0
    }

    .serv-sec-2 {
        padding-top: 10px;
        margin-top: 0;
        margin-bottom: 10px
    }

    .serv-sec-2 .text-sec {
        margin-top: 20px;
        padding-top: 20px
    }

    .serv-sec-2 img {
        width: 280px;
        height: 270px;
        margin-top: -20px
    }

    .whatsapp .whatsapp-btn {
        bottom: 9rem
    }

    .share-menu {
        right: -4.4rem;
        height: 100px;
        width: 180px
    }

    .share-menu li {
        transform: rotate(calc(88deg / 3* var(--i)))
    }

    .share-menu li a {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
        transform: rotate(calc(88deg / -3* var(--i)))
    }

    .btn_toggle:hover,
    .share-menu.active .btn_toggle {
        box-shadow: 0 6px 8px rgba(0, 0, 0, .15), 0 0 0 2px #333, 0 0 0 6px #fff
    }

    .share-menu li:hover a {
        font-size: 1.8rem;
        box-shadow: 0 0 0 2px var(--clr), 0 0 0 6px #fff
    }
}

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

    .amz-img,
    .header-sec2,
    .nav-hr,
    .video-wrap {
        display: none
    }

    .header-sec1 .main-text {
        text-align: center;
        margin-inline: 2rem
    }

    .main-text h1 {
        font-size: 3rem
    }

    .popup-trigger {
        display: block
    }

    .navbar-collapse {
        background-color: rgba(0, 0, 0, .5)
    }

    .navbar.sticky .navbar-collapse {
        background-color: transparent
    }

    .navbar-nav .nav-link {
        font-size: 11px;
        font-weight: 400;
        font-family: var(--primary-font-family)
    }
    .navbar-collapse {
      background-color: #000;
    }

    .call-us {
        float: left
    }

    .call-now {
        flex-direction: row-reverse
    }

    .nav-link.call-now img {
        height: 20px;
        margin-left: 10px
    }

    .call span {
        font-size: 18px
    }

    .call span:first-child {
        margin: 0
    }

    .slick-arrow.slick-next {
        margin-left: 80%
    }

    .about-hero .header {
        background-image: linear-gradient(to bottom, rgba(4, 31, 54, .651), rgba(5, 27, 63, .795)), url(../images/aboutus-bg.jpg)
    }

    .ghost-hero {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .ghost-hero .header-sec1 .main-text {
        margin-left: 0
    }
}

@media only screen and (max-width:767px) and (min-width:481px) {
    .custom-btn .button__text {
        transform: translateX(8px)
    }

    .custom-btn .button__icon {
        width: 35px
    }

    .platforms {
        padding: 20px 0
    }

    .ads_sponsors div img {
        width: 70px;
        aspect-ratio: 3/1
    }

    .f-serv {
        max-width: 200px;
        padding-right: 0
    }

    .info-items {
        justify-content: center;
        align-items: center
    }

    .info-items li {
        flex-direction: column;
        justify-content: center
    }

    .about-section-1 {
        padding: 50px 10px
    }

    .about-section-1 h2 {
        font-size: 25px;
        margin-bottom: 20px
    }

    .about-section-1 p,
    .amz-textbox p {
        font-size: 12px
    }

    .amz-textbox h2 {
        font-size: 23px
    }

    .about-section-2 .d-flex {
        margin-left: 45%;
        margin-top: 20px
    }

    img.cta-img {
        left: 20px
    }

    .about-portfolio h1 {
        font-size: 18px;
        padding-inline: 20px
    }

    .about-ads_sponsors div img {
        width: 100px;
        height: 150px
    }

    .ghost-hero .header-sec1 .main-text {
        width: 30rem
    }

    .service-sec h3 {
        text-align: center;
        font-size: 35px
    }

    .serv-sec-2 img {
        margin-left: 0
    }
}

@media only screen and (max-width:540px) and (min-width:481px) {
    .f-serv.company {
        max-width: 150px;
        padding-inline: 0
    }

    .social-links.col-12 {
        max-width: 120px !important
    }

    .main-text h1 .hh-span {
        font-size: 1.8rem
    }

    .main-text h1 {
        font-size: 2.25rem
    }
}

@media only screen and (max-width:590px) and (min-width:541px) {
    .f-serv.company {
        max-width: 160px;
        min-width: 150px;
        padding-inline: 0
    }

    .social-links.col-12 {
        max-width: 160px !important;
        min-width: 120px
    }

    .main-text h1 .hh-span {
        font-size: 2.25rem
    }
}

@media only screen and (max-width:700px) and (min-width:591px) {
    .f-serv {
        max-width: 250px;
        padding-right: 30px
    }

    .f-serv.company {
        max-width: 180px;
        padding-inline: 0
    }

    .social-links.col-12 {
        max-width: 160px !important
    }

    .main-text h1 .hh-span {
        font-size: 2.3rem
    }
}

@media only screen and (max-width:767px) and (min-width:701px) {
    .f-serv {
        max-width: 300px;
        padding-right: 30px
    }

    .f-serv.company {
        max-width: 180px;
        padding-inline: 0
    }

    .social-links.col-12 {
        max-width: 160px !important
    }
}

@media only screen and (max-width:992px) and (min-width:768px) {
    button.get-in-touch-wrap {
        right: 5rem
    }

    .custom-btn .button__text {
        transform: translateX(8px)
    }

    .custom-btn .button__icon {
        width: 35px
    }

    .header-sec1 .main-text {
        margin-inline: 2rem
    }

    .platforms {
        padding: 20px 0
    }

    .ads_sponsors div img {
        width: 80px;
        aspect-ratio: 3/1
    }

    .about .sec-1 {
        padding-right: 0;
        z-index: 2
    }

    .sec-1 h3 {
        font-size: 28px
    }

    .amz-textbox p,
    .booking-text .para1,
    .contact-section .wave-group .input,
    .para2,
    .sec-1 p {
        font-size: 12px
    }

    .about .sec-1 p {
        padding-right: 10px
    }

    .sec-2 {
        margin-top: 6rem
    }

    .about .sec-2 img {
        width: 400px;
        height: 16rem;
        margin-left: -30px
    }

    .serve .sec-2 img {
        width: 350px;
        height: 20rem
    }

    .services-section ul.services-main {
        display: flex;
        flex-wrap: wrap;
        padding: 0;
        margin-bottom: 25px
    }

    .about-text .head-btns,
    .services-main .col-12.col-md-5.col-lg-3 {
        display: flex;
        justify-content: center
    }

    .services-main li {
        margin-bottom: 0
    }

    .serv-card .card-overlay {
        top: 40px
    }

    .contact-section h1 {
        margin-bottom: 0;
        font-size: 28px
    }

    .contact-box form .row {
        padding: 10px 20px
    }

    .contact-section .wave-group {
        margin-top: .3rem
    }

    .contact-section .wave-group .input:focus~label .label-char,
    .contact-section .wave-group .input:valid~label .label-char {
        transform: translateY(-15px)
    }

    .contact-btn {
        margin-top: 20px
    }

    .footer-content {
        padding: 20px 0 20px 20px
    }

    .f-serv,
    .footer-about {
        padding-right: 0
    }

    footer .footer-about .ft-logo {
        width: 220px;
        height: 70px
    }

    .footer-about {
        margin-right: 0
    }

    .social-links {
        padding-left: 20px
    }

    footer hr {
        max-width: 600px
    }

    .info-items img {
        width: 20px;
        height: 20px
    }

    .info-items :where(p, a) {
        font-size: 11px
    }

    .contact-pg {
        padding-top: 20rem;
        padding-inline: 40px
    }

    .about-text .head-btns .btn {
        font-size: 12px;
        padding: 10px 50px
    }

    .amazone-img img {
        height: 430px
    }

    .amz-textbox h2,
    .bk-btn2 {
        font-size: 18px
    }

    .about-section-2 .d-flex {
        margin-top: 20px;
        margin-left: 35%
    }

    img.cta-img {
        bottom: -10px;
        width: 130px
    }

    .about-portfolio h1 {
        padding-inline: 20px
    }

    .about-ads_sponsors div img {
        height: 200px
    }

    .booking-text {
        padding-right: 30px
    }

    .booking-text h1 {
        font-size: 21px
    }

    .book-slider {
        width: 150px;
        height: 150px;
        -webkit-perspective: 100000px;
        perspective: 100000px;
        left: 60px
    }

    .service-sec h3 {
        font-size: 36px
    }

    .service-sec img {
        width: 300px;
        height: 300px
    }

    .serv-sec-2 img {
        width: 350px;
        height: 350px;
        margin-left: -50px
    }

    .serv-sec-1 img {
        margin-left: -20px
    }
}

@media only screen and (min-width:992px) and (max-width:1070px) {
    .info-items img {
        width: 30px;
        height: 30px
    }

    .info-items :where(p, a) {
        font-size: 11px
    }
}

@media only screen and (min-width:992px) and (max-width:1150px) {
    .about .sec-2 img {
        width: 500px;
        height: 20rem
    }

    .services-section ul.services-main {
        gap: 10px
    }
}

@media only screen and (min-width:992px) and (max-width:1279px) {
    .header-sec1 .main-text {
        width: 30rem
    }

    .main-text h1 {
        font-size: 2.5rem
    }

    .main-text h1 .hh-span {
        font-size: 2.095rem
    }

    .video-wrap img {
        width: 18rem;
        top: 7rem;
        left: 48%
    }

    .amz-img img {
        width: 450px
    }

    .contact-btn {
        margin-top: 10px
    }

    p.test-card-text {
        font-size: 15px
    }
}