p {
    text-align: left !important;
}
/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 300px) and (max-width: 375px) {
    button.btn.modal-btn.book-btn-light.mob-book-btn {
        position: relative;
        left: -35px !important;
    }
    .about-card{
        width: 300px !important;
    }
    .box-about {
        height: 670px !important;
    }
    .box-about.about2 {
        height: 500px !important;
    }
    article.card.teamp-card.card--1 {
        width: 280px !important;
    }
    a.whatsapp-button.wtp-card {
        position: relative;
        left: -15px !important;
    }
    .mob-cont-card {
        width: 300px !important;
    }
}


/* Small devices (landscape phones, 576px and up) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
    
    .mob-nav-link.desk-nav-link {
        display: block !important;
    }

    .top-nav {
        display: none;
    }

    .mob-nav-bg ul {
        background-color: rgb(75, 75, 75) !important;
        width: 500px !important;
        position: absolute !important;
        left: 0px !important;
    }

    .navbar .navbar-nav .nav-item {
        position: relative;
        left: 0px;
        width: 250px;
        background-color: #1465b6;
    }

    .mobile-on .desktop-nav ul li a {
        border-bottom: 6px solid rgba(255, 255, 255, .065);
    }

    .main-nav.dark .inner-nav ul>li>a {
        color: white;
    }

    .main-nav.dark .inner-nav ul>li>a.active {
        color: white;
    }

    .mob-ceo-card {
        position: relative;
        right: 32px !important;
        margin-top: 40px;
        margin-bottom: 40px;
        display: block !important;
    }

    .desk-ceo-mob {
        display: none !important;
    }

    .about-card {
        margin-top: 40px;
        margin-left: 20px;
        width: 340px;
    }

    .container.commit-con {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    iframe.card.map-card {
        margin-bottom: 20px;
    }

    .whatsapp-button {
        width: 240px;
    }

    .contact_list.card.cont-card.p-5 {
        margin-top: 0px;
    }

    .parallax {
        min-height: 100px;
    }

    h3.section-title.mb-0\>.\<span.class\=.words.chars.splitting {
        margin-bottom: 0px;
    }

    .our_client .owl-carousel .owl-wrapper-outer {
        margin-left: 24px;
    }

    .grid {
        display: grid;
        gap: 20px;
    }

    .flip-card {
        width: 350px;
        margin-left: 30px;
    }

    .serv-card {
        height: 240px;
    }

    .box-about {
        height: 590px;
    }

    .about2 {
        height: 450px;
    }

    .work-img {
        height: 300px !important;
    }

    .col-md-6.p-5.mt-5.port-text {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .port-bg {
        height: 650px !important;
    }

    .container.position-relative.ceo-con {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .container.about-con {
        padding-top: 40px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .mr-top50 {
        margin-top: 10px;
    }

    .common_div {
        margin-bottom: 40px !important;
    }

    .serv-con {
        padding-top: 40px !important;
        padding-bottom: 4px !important;
    }

    .container.position-relative.serv-con.p-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    p.text-center.mt-5.fs-5 {
        margin-top: 30px !important;
    }

    section#portfolio {
        margin-top: 0px !important;
    }

    a.work-btn.btn.btn-mod.btn-w.btn-large.btn-round.ms-1.me-1.mt-2.align-middle {
        padding: 8px;
        font-size: 12px;
    }

    section#clients {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    .owl-controls {
        margin: 30px !important;
    }

    .parallax span {
        font-size: 35px !important;
    }

    .mn-soc-link.mn-soc-link-color {
        color: #ffffff;
        background-color: #1465b6;
    }

    .mob-nav-link a {
        text-decoration: none !important;
    }

    .mob-cont-card {
        margin-left: 20px;
        width: 344px;
    }

    .flip-card-inner {
        margin-left: 20px;
    }

    .book-btn-light {
        background-color: #1465b6 !important;
        color: white !important;
        font-size: 12px !important;
        width: 100px !important;
        border-radius: 4px !important;
        display: inline !important;
        padding: 7px;
        box-shadow: 2px 2px 8px 2px rgba(222, 222, 222, 0.808) !important;
    }

    h2.hs-title-11.mb-30.mb-xs-10.wow.fadeInUp.no-animate {
        font-size: 17px;
    }

    .mobile-on .desktop-nav {
        width: 500px !important;
    }

    p.d-block.text-center {
        font-size: 14px;
    }

    .mob-logo-item {
        width: 166px;
        margin-left: 10px;
    }

    .mob-quote-line {
        font-size: 37px !important;
    }


    article.card.teamp-card.card--1 {
        width: 330px;
        margin-left: 20px;
        height: 470px;
    }

    .card__img {
        height: 370px;
    }

    .idress-title {
        margin-bottom: 20px;
    }

    .card__description {
        font-size: 18px;
    }

    article.card.teamp-card.anas-card.card--1:hover {
        height: 520px;
    }

    h3.card__title {
        /* font-size: 20px;
        position: relative;
        top: 10px; */
        display: none;
    }

    .card__category {
        /* position: relative;
        top: 8px; */
        display: none;
    }

    /* .teamp-card:hover .card__category {
        position: absolute;
        top: 40px;
        left: 20px;
        transform: translateY(-30px);
        display: block;
      }
    
      .teamp-card:hover .card__title {
        position: absolute;
        top: 60px;
        left: 20px;
        display: block;
        transform: translateY(-30px);
      } */



    .card {
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    .card__hover-content {
        display: none;
        /* Hidden by default */
        padding: 10px;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        text-align: justify;
        overflow-y: auto;
    }

    .card--hover .card__hover-content {
        display: block;
        /* Show on hover */
    }

    .card--hover .card__info {
        display: block;
    }

    .teamp-card:hover .card__info {
        background: rgba(255, 255, 255, 0) !important;
    }

    .mob-team-name {
        display: block;
        font-size: 23px;
        font-weight: 700;
        color: rgb(38, 38, 38);
        position: relative;
        top: 380px;
        left: 0px;
        transition: all 0.4s ease;
    }
    .mob-pos {
        display: block;
        font-size: 17px;
        color: #7A7A7A !important;
        font-weight: bold;
        position: relative;
        top: 380px;
        left: 0px;
        transition: all 0.4s ease;
    }
    .card__hover-content{
        position: absolute;
        top: 0px !important;
    }
    .card__description{
        margin-top: 20px;
    }
    .anas-card:hover .mob-anas-name{
        position: relative;
        top: 410px;
    }
    .anas-card:hover .mob-anas-pos{
        position: relative;
        top: 420px;
    }
    .anas-card:hover .mob-anas-img{
        height: 400px;
    }
    .modal-btn img{
        margin-right: 0px !important;
    }
    .desk-modal-btn{
        display: none !important;
    }
    .mob-book-btn{
        font-size: 10px !important;
        animation: none !important;
    }
    .social-icons{
        left: 5px !important;
    }

}


/* Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {
    
    .mob-nav-link.desk-nav-link {
        display: block !important;
    }

    .top-nav {
        display: none;
    }

    .mob-nav-bg ul {
        background-color: rgb(75, 75, 75) !important;
        width: 500px !important;
        position: absolute !important;
        left: 0px !important;
    }

    .navbar .navbar-nav .nav-item {
        position: relative;
        left: 0px;
        width: 250px;
        background-color: #1465b6;
    }

    .mobile-on .desktop-nav ul li a {
        border-bottom: 6px solid rgba(255, 255, 255, .065);
    }

    .main-nav.dark .inner-nav ul>li>a {
        color: white;
    }

    .main-nav.dark .inner-nav ul>li>a.active {
        color: white;
    }

    .mob-ceo-card {
        position: relative;
        right: 32px !important;
        margin-top: 40px;
        margin-bottom: 40px;
        display: block !important;
    }

    .desk-ceo-mob {
        display: none !important;
    }

    .about-card {
        margin-top: 40px;
        margin-left: 20px;
        width: 340px;
    }

    .container.commit-con {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    iframe.card.map-card {
        margin-bottom: 20px;
    }

    .whatsapp-button {
        width: 240px;
    }

    .contact_list.card.cont-card.p-5 {
        margin-top: 0px;
    }

    .parallax {
        min-height: 100px;
    }

    h3.section-title.mb-0\>.\<span.class\=.words.chars.splitting {
        margin-bottom: 0px;
    }

    .our_client .owl-carousel .owl-wrapper-outer {
        margin-left: 24px;
    }

    .grid {
        display: grid;
        gap: 20px;
    }

    .flip-card {
        width: 350px;
        margin-left: 30px;
    }

    .serv-card {
        height: 240px;
    }

    .box-about {
        height: 590px;
    }

    .about2 {
        height: 450px;
    }

    .work-img {
        height: 300px !important;
    }

    .col-md-6.p-5.mt-5.port-text {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }

    .port-bg {
        height: 650px !important;
    }

    .container.position-relative.ceo-con {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .container.about-con {
        padding-top: 40px;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .mr-top50 {
        margin-top: 10px;
    }

    .common_div {
        margin-bottom: 40px !important;
    }

    .serv-con {
        padding-top: 40px !important;
        padding-bottom: 4px !important;
    }

    .container.position-relative.serv-con.p-5 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    p.text-center.mt-5.fs-5 {
        margin-top: 30px !important;
    }

    section#portfolio {
        margin-top: 0px !important;
    }

    a.work-btn.btn.btn-mod.btn-w.btn-large.btn-round.ms-1.me-1.mt-2.align-middle {
        padding: 8px;
        font-size: 12px;
    }

    section#clients {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    .owl-controls {
        margin: 30px !important;
    }

    .parallax span {
        font-size: 35px !important;
    }

    .mn-soc-link.mn-soc-link-color {
        color: #ffffff;
        background-color: #1465b6;
    }

    .mob-nav-link a {
        text-decoration: none !important;
    }

    .mob-cont-card {
        margin-left: 20px;
        width: 344px;
    }

    .flip-card-inner {
        margin-left: 20px;
    }

    .book-btn-light {
        background-color: #1465b6 !important;
        color: white !important;
        font-size: 12px !important;
        width: 100px !important;
        border-radius: 4px !important;
        display: inline !important;
        padding: 7px;
        box-shadow: 2px 2px 8px 2px rgba(222, 222, 222, 0.808) !important;
    }

    h2.hs-title-11.mb-30.mb-xs-10.wow.fadeInUp.no-animate {
        font-size: 17px;
    }

    .mobile-on .desktop-nav {
        width: 500px !important;
    }

    p.d-block.text-center {
        font-size: 14px;
    }

    .mob-logo-item {
        width: 166px;
        margin-left: 10px;
    }

    .mob-quote-line {
        font-size: 37px !important;
    }


    article.card.teamp-card.card--1 {
        width: 330px;
        margin-left: 20px;
        height: 470px;
    }

    .card__img {
        height: 370px;
    }

    .idress-title {
        margin-bottom: 20px;
    }

    .card__description {
        font-size: 18px;
    }

    article.card.teamp-card.anas-card.card--1:hover {
        height: 520px;
    }

    h3.card__title {
        /* font-size: 20px;
        position: relative;
        top: 10px; */
        display: none;
    }

    .card__category {
        /* position: relative;
        top: 8px; */
        display: none;
    }
    .row.mb-5.row-cols-1.row-cols-lg-5.g-5.g-lg-1.mt-4 {
        --bs-gutter-y: 0px;
    }
    /* .teamp-card:hover .card__category {
        position: absolute;
        top: 40px;
        left: 20px;
        transform: translateY(-30px);
        display: block;
      }
    
      .teamp-card:hover .card__title {
        position: absolute;
        top: 60px;
        left: 20px;
        display: block;
        transform: translateY(-30px);
      } */




    .card {
        position: relative;
        overflow: hidden;
        transition: transform 0.3s ease;
        cursor: pointer;
    }

    .card__hover-content {
        display: none;
        /* Hidden by default */
        padding: 10px;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        text-align: justify;
        overflow-y: auto;
    }

    .card--hover .card__hover-content {
        display: block;
        /* Show on hover */
    }

    .card--hover .card__info {
        display: block;
    }

    .teamp-card:hover .card__info {
        background: rgba(255, 255, 255, 0) !important;
    }

    .mob-team-name {
        display: block;
        font-size: 23px;
        font-weight: 700;
        color: rgb(38, 38, 38);
        position: relative;
        top: 380px;
        left: 0px;
        transition: all 0.4s ease;
    }

    .mob-pos {
        display: block;
        font-size: 17px;
        color: #7A7A7A !important;
        font-weight: bold;
        position: relative;
        top: 380px;
        left: 0px;
        transition: all 0.4s ease;
    }
    .card__hover-content{
        position: absolute;
        top: 0px !important;
    }
    .card__description{
        margin-top: 20px;
    }
    .anas-card:hover .mob-anas-name{
        position: relative;
        top: 410px;
    }

    .anas-card:hover .mob-anas-pos{
        position: relative;
        top: 420px;
    }
    .anas-card:hover .mob-anas-img{
        height: 400px;
    }
    .row.mb-5.row-cols-1.row-cols-lg-5.g-5.g-lg-1.mt-4 {
        --bs-gutter-y: 0px;
    }
    .modal-btn img{
        margin-right: 0px !important;
    }
    .desk-modal-btn{
        display: none !important;
    }
    .mob-book-btn{
        font-size: 10px !important;
        animation: none !important;
    }
    .social-icons{
        left: 5px !important;
    }
}