/* ***************************************************
 * Author:           SE-2
 * Created Date:     2024-12-21
 * Last Modified:    2025-01-14
 * Version:          1.1
 * Project:          Progmize 2.0 Website
 * Company:          Progmize Software Systems
 * Contact:          tech@progmize.com
 ***************************************************  */

 /* Mobile Styles */
 /* Small Phones */
 @media (max-width:375px) {

     .hero .container,
     .services .container,
     .technologies .container {
         min-width: 0%;
         max-width: 100%;
     }

     #navMenu .nav-link {
         font-size: 12px;
         margin-left: auto;
         overflow: visible
     }

     .line3,
     .line4 {
         padding-left: 50px;
     }

     .hero-bottom-carousel .border-line {
         width: 93%;
         padding: 82px 84px;
     }

     .hero-carousel-indicators [data-bs-target] {
         width: 15px;
         height: 15px;
     }

     .hero-carousel p {
         font-size: clamp(12px, 2vw, 12px);
     }

     .flatpickr-weekdays {
         width: auto !important;
         max-width: 100% !important;
         min-width: 0% !important;
         padding: 0 8% !important;
     }

     .flatpickr-days .dayContainer {
         padding: 0 8% !important;
     }

     .flatpickr-day {
         max-width: 30% !important;
     }

     .footer .contact-info a {
         font-size: 10px
     }

     .stay-connected {
         text-align: left;
         padding: 6px 6px 6px 0;
         margin-left: -26px;
     }

     .stay-connected h3 {
         font-size: 13px;
         /* margin-left: -5px */
     }

     .social-media {
         margin-top: 5px;
         padding: 7px 0px 7px 6px;
         /* margin-left: -5px */
     }

     .technologies .table-container {
         padding: 68px 30px 68px 10px;
         margin-left: 0
     }

     .footer::before {
         clip-path: polygon(0 0, 55.3% 0, 83% 100%, 0% 100%);
         height: 93%;
         width: 101%
     }

     .footer .container-brand {
         left: 2%;
         top: 30px;
         width: 65%;
         height: auto
     }

     .footer-social-links {
         position: absolute;
         right: 5%;
         margin-right: auto;
         top: 3.3%;
         max-width: 130px;
         gap: 9px;
         overflow: visible;
         flex-wrap: wrap
     }

     .social-icon,
     .social-icon.tiktok,
     .social-icon.twitter {
         width: 26px;
         height: 26px;
         overflow: visible
     }

     .social-icon.facebook i,
     .social-icon.instagram i,
     .social-icon.linkedin i,
     .social-icon.tiktok i,
     .social-icon.twitter i {
         font-size: 14px;
         overflow: hidden
     }

     .footer-line-container .col-5 {
         width: 41%
     }

     .footer-line-container .col-7 {
         width: 59%
     }

     .footer .bottom-navigation {
         margin-top: -11;
         margin-left: 10px
     }

     .footer a {
         font-size: clamp(11px, 4vw, 12px)
     }

     .footer .contact-info li img,
     .footer .contact-info li:nth-of-type(3) img {
         width: 9px;
         height: auto
     }

     .footer .contact-info li:nth-of-type(2) img {
         width: 12px;
         height: 12px
     }

     .footer .contact-info-container {
         position: absolute;
         overflow: visible;
         top: 109px;
         right: -4px;
         width: auto
     }

     .footer .contact-info {
         position: relative;
         margin-left: 20px
     }

     .footer .contact-info .footer-heading {
         font-size: 1rem;
         font-weight: 700
     }

     .footer .footer-heading {
         font-size: .9rem;
         font-weight: 700
     }

     .copyright {
         overflow: visible;
         padding-top: 5px;
         padding-bottom: 10px
     }

     .copyright p {
         overflow: visible;
         font-size: 12px
     }

     .hero-left {
         height: 700px;
         overflow: visible
     }

     .contact-form-container {
         max-height: 370px;
         padding: 10px 20px 15px 10px
     }

     .contact-form-header .heading img,
     .contact-form-header .paragraph img {
         width: 15px;
         height: 15px;
         overflow: visible
     }

     .contact-form-header h2 {
         font-size: 16px;
         overflow: hidden
     }

     .contact-details,
     .contact-form-container .row:last-of-type,
     .last-row,
     .services,
     .social-media,
     .stay-connected {
         overflow: visible
     }

     .contact-form-header p {
         font-size: 10px;
         overflow: visible
     }

     .contact-form-container .contact-infos a {
         font-size: 16px;
         transform: scale(.65);
         transform-origin: left center;
         line-height: 1.5
     }

     .footer .bottom-navigation .col,
     .technologies h2 {
         margin-bottom: 10px
     }

     .technologies {
         margin-bottom: 0;
         padding: 0 10px
     }

     .technologies h2 {
         font-size: 28px;
         margin-top: 20px
     }

     .technologies table .logos {
         display: inline-block
     }
 }

 @media (min-width:376px) and (max-width:425px) {

     .hero .container,
     .services .container,
     .technologies .container {
         min-width: 0%;
         max-width: 100%;
     }

     #navMenu,
     #navMenu .nav-link,
     .contact-details,
     .contact-form-container .row:last-of-type,
     .last-row {
         overflow: visible
     }

     #navMenu .nav-link {
         font-size: 13px;
         margin-left: auto
     }

     /* 
     .carousel-image-wrapper {
         margin-left: -15px;
     } */

     .hero-bottom-carousel .border-line {
         width: 92%;
         padding: 82px 0;
     }

     .hero-carousel-indicators [data-bs-target] {
         width: 16px;
         height: 16px;
     }

     .contact-form-container {
         max-height: 360px;
         padding: 10px 20px 15px
     }

     .contact-form-header .heading img,
     .contact-form-header .paragraph img {
         width: 16px;
         height: 16px;
         overflow: visible
     }

     .contact-form-header h2 {
         font-size: 17px;
         overflow: hidden
     }

     .contact-form-header p {
         font-size: 11px;
         overflow: visible
     }

     .contact-form-container .contact-infos a {
         font-size: 16px;
         transform: scale(.7);
         transform-origin: left center;
         line-height: 1.5
     }

     .stay-connected {
         text-align: left;
         padding: 6px;
         overflow: visible;
         margin-left: -26px
     }

     .stay-connected h3 {
         font-size: 14px;
         /* margin-left: -10px */
     }

     .social-media {
         margin-top: 5px;
         padding: 7px 1px 7px 10px;
         overflow: visible;
         /* margin-left: -10px */
     }

     .technologies {
         margin-bottom: 0;
         overflow: visible;
         padding: 10px
     }

     .technologies h2 {
         font-size: 28px;
         margin-top: 50px;
         margin-bottom: 30px
     }

     .technologies .table-container {
         padding: 68px 20px;
         margin-left: 0
     }

     .footer::before {
         clip-path: polygon(0 0, 56.1% 0, 81% 100%, 0% 100%);
         height: 93%;
         width: 101.5%
     }

     .footer .container-brand {
         left: 2%;
         top: 30px;
         width: 230px;
         height: auto
     }

     .footer-social-links {
         position: absolute;
         right: 5%;
         margin-right: auto;
         top: 3.3%;
         max-width: 130px;
         gap: 9px;
         overflow: visible;
         flex-wrap: wrap
     }

     .social-icon,
     .social-icon.tiktok,
     .social-icon.twitter {
         width: 26px;
         height: 26px;
         overflow: visible
     }

     .social-icon.facebook i,
     .social-icon.instagram i,
     .social-icon.linkedin i,
     .social-icon.tiktok i,
     .social-icon.twitter i {
         font-size: 14px;
         overflow: hidden
     }

     .footer-line-container .col-5 {
         width: 40.5%
     }

     .footer-line-container .col-7 {
         width: 59.5%
     }

     .footer .bottom-navigation {
         margin-top: -6px;
         margin-left: 10px
     }

     .footer .bottom-navigation .col {
         margin-bottom: 10px
     }

     .footer .contact-info li img,
     .footer .contact-info li:nth-of-type(3) img {
         width: 9px;
         height: auto
     }

     .footer .contact-info li:nth-of-type(2) img {
         width: 12px;
         height: 12px
     }

     .footer .contact-info li:nth-of-type(3) img {
         margin-left: 2px
     }

     .footer .contact-info-container {
         position: absolute;
         overflow: visible;
         top: 109px;
         right: 0;
         transform: translateX(2px);
         width: auto
     }

     .footer .contact-info {
         position: relative;
         margin-left: 20px
     }

     .footer .contact-info .footer-heading {
         font-size: 1rem;
         font-weight: 700
     }

     .footer .contact-info a {
         font-size: 11px
     }

     .footer .footer-heading {
         font-size: .9rem;
         font-weight: 700
     }

     .copyright {
         overflow: visible;
         padding-top: 10px;
         padding-bottom: 10px
     }

     .copyright p {
         overflow: visible;
         font-size: 13px
     }
 }

 @media (max-width:425px) {
     #navMenu {
         width: 99%;
         padding-left: 10px
     }

     .hero .container {
         padding-top: 40px;
     }

     /* .hero-carousel img,
     .hero-carousel .carousel-item:first-of-type img,
     .hero-carousel .carousel-item:nth-of-type(2) img,
     .hero-carousel .carousel-item:nth-of-type(3) img,
     .hero-carousel .carousel-item:nth-of-type(4) img,
     .hero-carousel .carousel-item:nth-of-type(5) img,
     .hero-carousel .carousel-item:last-of-type img {
         transform: translateY(40%);
     }

     .hero-carousel .carousel-item:nth-of-type(4) img,
     .hero-carousel .carousel-item:nth-of-type(5) img {
         transform: translateY(10%);
     }

     .hero-carousel .carousel-item:last-of-type img {
         transform: translateY(20%);
     } */

     .contact-form-container form {
         width: 100%;
         padding: 2px 0;
         overflow-x: visible;
         overflow-y: hidden
     }

     .close-button {
         top: 42.5%;
         left: -3px;
         overflow-y: hidden
     }

     .contact-form-container .form-group input,
     .contact-form-container .form-group textarea {
         font-size: 11px;
         padding: 5px;
         margin: 0 auto
     }

     .contact-form-container .send-message-btn {
         padding: 20px 35px 0
     }

     .social-media img {
         width: 15px;
         margin: 0 3px
     }

     .social-media a:last-of-type img {
         margin-right: 0 !important;
     }
 }

 @media (min-width:426px) and (max-width:667px) {

     .services .container,
     .technologies .container {
         min-width: 0%;
         max-width: 100%;
     }

     #navMenu .nav-link {
         font-size: 13px;
         margin-left: 30px;
         overflow: visible
     }

     .hero .container {
         padding-top: 50px;
         min-width: 100px;
         max-width: 100%;
         padding-left: 15px;
         padding-right: 30px;
     }

     .hero-bottom .col-md-2 {
         flex: 0 0 auto;
         width: 7em
     }

     .col-md-10 {
         flex: 0 0 auto;
         width: 95em !important;
         margin-right: 0.8em;
     }

     .hero-bottom-carousel .border-line {
         width: 98%;
         padding: 82px 0;
     }

     /* Carousel Indicators  */
     .hero-carousel-indicators {
         top: 120px;
     }

     .hero-carousel-indicators [data-bs-target] {
         width: 16px;
         height: 16px;
     }

     .contact-details,
     .contact-form-container .row:last-of-type,
     .last-row,
     .services,
     .social-media,
     .stay-connected {
         overflow: visible
     }

     .contact-form-container .contact-infos,
     .last-row {
         margin-left: 10px
     }

     .contact-form-container {
         max-height: 380px;
         padding: 10px 20px 15px
     }

     .contact-form-header .heading img,
     .contact-form-header .paragraph img {
         width: 16px;
         height: 16px;
         overflow: visible
     }

     .contact-form-header h2 {
         font-size: 17px;
         overflow-y: hidden
     }

     .contact-form-header p {
         font-size: 11px;
         overflow: visible
     }

     .contact-form-container form {
         width: 100%;
         overflow-x: visible;
         overflow-y: hidden;
         padding: 2px 0
     }

     .close-button {
         top: 43%;
         left: -3px;
         overflow-y: hidden
     }

     .contact-form-container .form-group input,
     .contact-form-container .form-group textarea {
         font-size: 12px;
         padding: 5px;
         margin: 0 auto
     }

     .contact-form-container .send-message-btn {
         padding: 20px 38px 0
     }

     .contact-form-container .contact-infos a {
         font-size: 16px;
         transform: scale(.7);
         transform-origin: left center;
         line-height: 1.5
     }

     .stay-connected {
         text-align: left;
         padding: 6px
     }

     .stay-connected h3 {
         font-size: 15px;
         white-space: nowrap;
         /* margin-left: -10px */
     }

     .social-media {
         margin-top: 5px;
         padding: 7px 1px 7px 10px;
         /* margin-left: -10px */
     }

     .social-media img {
         width: 16px;
         margin: 0 3px
     }

     .footer .contact-info-container,
     .footer-social-links {
         position: absolute;
         margin-right: auto;
         overflow: visible
     }

     .technologies {
         margin-bottom: 0;
         overflow: visible;
         padding: 15px
     }

     .line-container {
         margin-top: 10px
     }

     .technologies h2 {
         font-size: 28px;
         margin-top: 50px;
         margin-bottom: 30px
     }

     .technologies .table-container {
         margin-left: 0;
         padding: 68px 30px
     }

     .footer::before {
         clip-path: polygon(0 0, 56.3% 0, 81.6% 100%, 0% 100%);
         height: 93%;
         width: 101.9%
     }

     .footer .container-brand {
         left: 1%;
         top: 30px;
         width: 230px;
         height: auto
     }

     .footer-social-links {
         right: 12%;
         top: 3.3%;
         max-width: 130px;
         gap: 9px;
         flex-wrap: wrap
     }

     .social-icon,
     .social-icon.tiktok,
     .social-icon.twitter {
         width: 26px;
         height: 26px;
         overflow: visible
     }

     .social-icon.facebook i,
     .social-icon.instagram i,
     .social-icon.linkedin i,
     .social-icon.tiktok i,
     .social-icon.twitter i {
         font-size: 14px;
         overflow: hidden
     }

     .footer-line-container .col-5 {
         width: 40%
     }

     .footer-line-container .col-7 {
         width: 60%
     }

     .footer .bottom-navigation {
         margin-top: -6px;
         margin-left: 10px
     }

     .footer .bottom-navigation .col {
         margin-bottom: 10px
     }

     .footer .contact-info li img,
     .footer .contact-info li:nth-of-type(3) img {
         width: 10px;
         height: auto
     }

     .footer .contact-info li:nth-of-type(2) img {
         width: 12px;
         height: 12px
     }

     .footer .contact-info-container {
         top: 109px;
         right: 0;
         transform: translateX(-5%);
         width: auto
     }

     .footer .contact-info {
         position: relative;
         margin-left: 20px
     }

     .footer .contact-info .footer-heading {
         font-size: 1rem;
         font-weight: 700
     }

     .footer .contact-info a {
         font-size: 11px
     }

     .footer .footer-heading {
         font-size: .9rem;
         font-weight: 700
     }

     .copyright {
         overflow: visible;
         padding-top: 10px;
         padding-bottom: 10px
     }

     .copyright p {
         overflow: visible;
         font-size: 14px
     }
 }

 @media (max-width:575px) {
     #bookingModal .modal-dialog {
         margin: 0 auto !important;
     }

     #bookingModal .modal-content {
         padding: 0 !important;
         overflow-x: hidden;
     }

     #bookingModal .modal-title {
         margin-top: 40px;
     }

     .booking-custom-close {
         top: 6px !important;
         right: 5px !important;
     }
 }

 @media (max-width:667px) {

     .hero-image {
         width: clamp(100px, 20vw, 200px);
     }

     .hero .btn {
         font-size: clamp(12px, 2vw, 26px);
     }

     .contact-form-container .row:first-of-type {
         overflow: visible;
         margin-bottom: -10px
     }

     .contact-form-header {
         margin-bottom: 0;
         overflow: visible
     }

     .contact-form-container .text-danger {
         font-size: .6rem
     }

     .contact-form-container .form-group {
         margin-bottom: 8px
     }

     .close-button img {
         position: absolute;
         width: clamp(20px, 20vw, 30px);
         height: clamp(20px, 20vw, 30px);
         transform: scale(-1, -1)
     }

     .contact-form-container .send-message-btn img {
         width: 80px
     }

     .contact-details img {
         width: 13px;
         height: 13px
     }

     .touch-wrapper {
         padding: 12px 0
     }

     .contact-form-container .contact-infos .touch-wrapper:last-of-type {
         margin-top: -33px
     }

     .services h2 {
         font-size: 30px;
         font-weight: 800
     }

     .services .sub-heading {
         font-size: 15px;
         font-weight: 700
     }

     .technologies table td:first-child {
         font-size: 14px;
     }

     .lazy-section:first-of-type>.logos>img:first-child,
     .lazy-section:nth-of-type(2)>.logos>img:first-child,
     .lazy-section:nth-of-type(4)>.logos>img:first-child,
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(2) {
         max-width: 40px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(3)>.logos>img:first-child,
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(6),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(7) {
         max-width: 70px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(7)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(7)>.logos>img:nth-child(4) {
         max-width: 35px
     }

     .lazy-section:nth-of-type(4)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(7),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(6),
     .lazy-section:nth-of-type(6)>.logos>img:first-child,
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(7)>.logos>img:first-child {
         max-width: 30px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(4) {
         max-width: 50px;
         margin-top: -5px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(5),
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(2) {
         max-width: 60px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(3) {
         max-width: 26px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(4) {
         max-width: 40px;
         margin-top: 5px
     }

     .lazy-section:nth-of-type(3)>.logos>img:nth-child(2) {
         max-width: 30px;
         margin-top: 17px
     }

     .lazy-section:nth-of-type(3)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(5)>.logos>img:first-child {
         max-width: 100px
     }

     .lazy-section:nth-of-type(4)>.logos>img:nth-child(5) {
         max-width: 20px
     }

     .lazy-section:nth-of-type(6)>.logos>img:nth-child(5) {
         max-width: 50px
     }

     .lazy-section:nth-of-type(6)>.logos>img:nth-child(6) {
         max-width: 81px
     }

     .lazy-section:nth-of-type(7)>.logos>img:nth-child(3) {
         max-width: 25px
     }

     .map .col {
         margin-bottom: 40px
     }

 }



 @media (min-width:668px) and (max-width: 1069px) {

     .hero .btn {
         font-size: clamp(14px, 2vw, 26px);
     }

     .technologies table td:first-child {
         font-size: 20px;
     }

     .social-media::before {
         width: 90%;
         top: -7px;
     }

 }

 @media (min-width:668px) and (max-width:991px) {

     .hero .container,
     .services .container,
     .technologies .container {
         min-width: 0%;
         max-width: 100%;
     }

     #navMenu .nav-link {
         font-size: 26px;
         margin-left: 60px;
         overflow: visible
     }

     .hero .container {
         padding-top: 50px;
         min-width: 0%;
         max-width: 85%
     }

     /* .carousel-image-wrapper {
         overflow: visible;
     }

     .carousel-image-wrapper img {
         width: clamp(90px, 20vw, 150px);
         margin-left: -20px;
     } */

     .hero-carousel-indicators [data-bs-target] {
         width: 20px;
         height: 20px;
     }

     .contact-details,
     .contact-form-container .row:first-of-type,
     .contact-form-container .row:last-of-type,
     .contact-form-header,
     .last-row,
     .responsive-cards,
     .services,
     .social-media,
     .stay-connected {
         overflow: visible
     }


     .contact-form-container {
         max-height: 500px;
         padding: 15px 20px
     }

     .contact-form-header .heading img,
     .contact-form-header .paragraph img {
         width: 18px;
         height: 18px;
         overflow: visible
     }

     .contact-form-header h2 {
         font-size: 19px;
         overflow-y: hidden
     }

     .contact-form-header p {
         font-size: 13px;
         overflow: visible
     }

     .contact-form-container form {
         width: 100%;
         margin-left: 5%;
         overflow-x: visible;
         padding: 12px 0
     }

     .contact-form-container .form-group {
         margin-bottom: 12px
     }

     .close-button {
         top: 45.6%;
         left: -1px
     }

     .close-button img {
         position: absolute;
         width: clamp(20px, 20vw, 35px);
         height: clamp(20px, 20vw, 35px);
         transform: scale(-1, -1)
     }

     .contact-form-container .form-group input,
     .contact-form-container .form-group textarea {
         font-size: 14px;
         padding: 7px;
         margin: 0 auto;
         width: 90%
     }

     .contact-form-container .send-message-btn {
         padding: 40px 50px 0;
         margin-left: 40px
     }

     .contact-form-container .send-message-btn img {
         width: 90px
     }

     .last-row {
         margin-left: 10%
     }

     .contact-form-container .contact-infos a {
         font-size: 16px;
         transform: scale(.85);
         transform-origin: left center;
         line-height: 1.6
     }

     .stay-connected {
         text-align: left;
         padding: 6px;
         margin-left: 80px;
     }

     .stay-connected h3 {
         font-size: 16px;
     }

     .social-media {
         margin-top: 5px;
         padding: 6px 2px 6px 12px;
         margin-left: -5px
     }

     .social-media::before {
         width: 92%;
         top: -7px;
         left: 5px;
     }

     .social-media img {
         width: 17px;
         margin: 0 3px
     }

     .services h2 {
         font-size: 35px;
         font-weight: 800
     }

     .services .sub-heading {
         font-size: 20px;
         font-weight: 700
     }

     .footer-social-links i {
         overflow: hidden
     }

     .technologies {
         margin-bottom: 0;
         overflow: visible;
         padding: 20px
     }

     .technologies h2 {
         font-size: 35px;
         margin-top: 90px;
         margin-bottom: 30px;
     }

     .lazy-section:first-of-type>.logos>img:first-child,
     .lazy-section:nth-of-type(2)>.logos>img:first-child,
     .lazy-section:nth-of-type(4)>.logos>img:first-child,
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(2) {
         max-width: 60px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(3)>.logos>img:first-child,
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(6),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(7) {
         max-width: 90px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(7)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(7)>.logos>img:nth-child(4) {
         max-width: 55px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(4) {
         max-width: 70px;
         margin-top: -5px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(5),
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(2) {
         max-width: 80px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(3) {
         max-width: 46px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(4) {
         max-width: 60px;
         margin-top: 5px
     }

     .lazy-section:nth-of-type(3)>.logos>img:nth-child(2) {
         max-width: 50px;
         margin-top: 17px
     }

     .lazy-section:nth-of-type(3)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(5)>.logos>img:first-child,
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(6) {
         max-width: 120px
     }

     .lazy-section:nth-of-type(4)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(7),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(6),
     .lazy-section:nth-of-type(6)>.logos>img:first-child,
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(7)>.logos>img:first-child {
         max-width: 50px
     }

     .lazy-section:nth-of-type(4)>.logos>img:nth-child(5) {
         max-width: 40px
     }

     .lazy-section:nth-of-type(6)>.logos>img:nth-child(5) {
         max-width: 70px
     }

     .lazy-section:nth-of-type(7)>.logos>img:nth-child(3) {
         max-width: 45px
     }

     .map .col {
         margin-bottom: 50px
     }

     .footer::before {
         clip-path: polygon(0 0, 57% 0, 75% 100%, 0% 100%);
         height: 89%;
         width: 100.8%;
     }

     .footer .container-brand {
         top: 1%;
         left: 3px;
         width: 35%;
         height: auto
     }

     .footer .contact-social-container {
         position: absolute;
         right: 8%;
         transform: translateX(9%);
         top: 55px;
         width: auto;
         overflow: visible
     }

     .footer-social-links {
         position: relative;
         gap: 10px;
         overflow: visible
     }

     .footer-line-container .col-5 {
         width: 40%
     }

     .footer-line-container .col-7 {
         width: 60%
     }

     .footer .bottom-navigation {
         margin-top: -1px;
         margin-left: 18px
     }

     .footer .bottom-navigation .col {
         margin-bottom: 10px;
         margin-right: -90px
     }

     .footer .contact-info-container {
         position: absolute;
         overflow: visible;
         top: 109px;
         right: 18%;
         transform: translateX(-10%);
         width: auto
     }

     .footer .contact-info {
         position: relative;
         margin-left: 20px
     }

     .footer .contact-info .footer-heading {
         font-size: 1.3rem;
         font-weight: 700
     }

     .footer .contact-info li img,
     .footer .contact-info li:nth-of-type(3) img {
         width: 12px;
         height: auto
     }

     .footer .contact-info li:nth-of-type(2) img {
         width: 14px;
         height: 14px
     }

     .footer .contact-info a {
         font-size: 15px
     }

     .footer .footer-heading {
         font-size: 1.2rem;
         font-weight: 700
     }

     .footer .copyright {
         padding-top: 0;
         padding-bottom: 10px
     }
 }

 @media (max-width:991px) {

     .line3,
     .line4 {
         padding-left: 50px;
     }

     .contact-form-container .form-group:last-of-type {
         margin-bottom: 0;
         overflow-x: visible
     }

     .social-media::before {
         top: -7px;
     }

     .technologies .table-container {
         background-image: url('../img/technologies/bg.webp'), url('../img/technologies/bg.webp');
         background-size: 100% 100%, 100% 100%;
         background-position: top center, bottom center;
         background-repeat: no-repeat no-repeat;
     }

 }

 @media (min-width:668px) and (max-width:767px) {

     .hero .container {
         padding-top: 50px;
         max-width: 100%;
         padding-left: 30px;
         padding-right: 55px;
     }

     .hero-bottom .col-md-2 {
         flex: 1 0 auto !important;
         width: 8em !important;
     }

     .col-md-10 {
         flex: 1 0 auto !important;
         width: 90em !important;
         margin-right: 0.8em;
     }

     .hero-carousel h3 {
         font-size: clamp(22px, 2vw, 33px);
     }

     .hero-carousel p {
         font-size: clamp(17px, 2vw, 20px);
     }

     .hero .btn {
         font-size: clamp(19px, 2vw, 26px);
     }

     .hero-image {
         width: clamp(160px, 20vw, 200px);
     }

     .hero-bottom-carousel .border-line {
         width: 100%;
         padding: 82px 0;
     }

     .footer::before {
         clip-path: polygon(0 0, 57% 0, 75% 100%, 0% 100%);
         height: 92%;
         width: 102.1%
     }

     .stay-connected {
         margin-left: 30px;
     }
 }

 @media (max-width: 767px) {

     .hero-bottom .col-md-2 {
         flex: 0 0 auto;
         width: 20%
     }

     .col-md-10 {
         flex: 0 0 auto;
         width: 80%
     }

     #bookingModal .col-md-6 {
         flex: 1 1 auto !important;
         width: 100% !important;
         max-width: 100%;
         min-width: 0;
         margin: 0 auto;
     }

     /* Custom Flatpickr Style */

     .calendar-wrapper {
         margin: 0 auto !important;
         padding-right: 0 !important;
     }

     .flatpickr-calendar,
     .flatpickr-calendar.inline,
     .flatpickr-calendar.open,
     .flatpickr-calendar.inline {
         margin: 0 auto !important;
     }

     .flatpickr-days .dayContainer {
         max-width: 100% !important;
         min-width: 0% !important;
         margin: 0 auto;
     }

     .flatpickr-day {
         max-width: 100% !important;
         width: auto !important;
         min-width: 0 !important;
         font-size: clamp(9px, 2vw, 10px);
     }

     .booking-socials,
     .booking-socials img {
         margin: 0 auto;
         justify-content: center;
     }

     .selected-date-display,
     #bookingModal .modal-title,
     #bookingModal .modal-header p,
     #bookingModal .modal-body p {
         text-align: center;
     }

 }


 @media (min-width:520px) and (max-width: 667px) {

     .hero .container {
         padding-left: 35px;
         padding-right: 50px;
     }

     .hero-bottom .col-md-2 {
         flex: 0 0 auto !important;
         width: 20%;
     }

     .col-md-10 {
         flex: 0 0 auto;
         width: 90% !important;
     }

     .hero-carousel h3 {
         font-size: clamp(20px, 2vw, 33px);
     }

     .hero-carousel p {
         font-size: clamp(15px, 2vw, 20px);
     }

     .hero .btn {
         font-size: clamp(18px, 2vw, 26px);
     }

     .hero-image {
         width: clamp(150px, 20vw, 200px);
     }


     .stay-connected {
         margin-left: 75px;
     }
 }

 @media (max-width: 375px) {

     .flatpickr-days .dayContainer {
         padding: 0 2% !important;
     }

     .flatpickr-day {
         max-width: 15% !important;
         min-width: 0 !important;
     }
 }

 @media (max-width: 335px) {

     .hero-carousel h3 {
         font-size: 14px;
     }
 }

 @media (min-width:992px) and (max-width:1069px) {

     .hero .container,
     .services .container,
     .technologies .container {
         min-width: 0%;
         max-width: 85%;
     }

     #navMenu .nav-link {
         font-size: 28px;
         margin-left: 82px;
         overflow: visible
     }

     header button:has(.btn-responsive) {
         display: block;
         position: absolute;
         top: 18px;
         right: 16px;
         height: auto;
         overflow: visible;
         clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
         padding: 0 10px 4px 16px;
         border-radius: 10px 5px 5px 10px;
         border: none;
         align-items: center;
         transform: rotate(-3deg)
     }

     .hero .container {
         padding-top: 50px;
     }

     /* .carousel-image-wrapper {
         width: 100%;
         min-width: 200px;
         max-width: 180px;
     }

     .carousel-image-wrapper img {
         width: clamp(120px, 18vw, 150px) !important;
     } */

     .hero-bottom-carousel .border-line {
         width: 80%;
         padding: 82px 0;
     }

     .contact-form-container .row:first-of-type,
     .contact-form-container .row:last-of-type,
     .contact-form-header {
         overflow: visible
     }

     .contact-form-container {
         max-height: 530px;
         padding: 15px 20px;
         padding-right: 10px;
     }

     .contact-form-container {
         width: 40%;
     }

     .contact-form-header .heading img,
     .contact-form-header .paragraph img {
         width: 19px;
         height: 19px;
         overflow: visible
     }

     .contact-form-header h2 {
         font-size: 20px;
         overflow-y: hidden
     }

     .contact-form-header p {
         font-size: 14px;
         overflow: visible
     }

     .contact-form-container form {
         width: 100%;
         margin-left: 5%;
         overflow-x: visible;
         padding: 22px 0;
         margin-top: -20px
     }

     .contact-form-container .form-group {
         margin-bottom: 12px
     }

     .close-button {
         top: 45.6%;
         left: 0
     }

     .close-button img {
         position: absolute;
         width: clamp(20px, 20vw, 35px);
         height: clamp(20px, 20vw, 35px);
         transform: scale(-1, -1)
     }

     .contact-form-container .form-group:last-of-type {
         overflow-x: visible;
         margin-bottom: 0;
         margin-left: 40px
     }

     .contact-form-container .form-group input,
     .contact-form-container .form-group textarea {
         font-size: 14px;
         padding: 7px;
         margin: 0 auto;
         overflow: visible;
         width: 90%
     }

     .send-message-btn {
         padding: 40px 50px 0
     }

     .send-message-btn img {
         width: 90px
     }

     .contact-form-container .last-row {
         overflow: visible;
         margin-left: 10%
     }

     .contact-details {
         overflow: visible;
         margin-top: -50px
     }

     .contact-form-container .contact-infos a {
         font-size: 16px
     }

     .stay-connected {
         text-align: left;
         padding: 6px;
         overflow: visible;
         margin-left: 80px;
     }

     .last-row {
         margin-top: 10px !important;
     }

     .stay-connected h3 {
         font-size: 18px;
         /* margin-left: -10px */
     }

     .social-media {
         padding-left: 20px;
         margin-left: -10px
     }

     .social-media::before {
         top: -10px;
         left: 10px;
         width: 87%;
     }

     .social-media img {
         width: 21px;
         margin: 0 3px
     }

     .services h2 {
         font-size: 35px;
         font-weight: 800
     }

     .services .sub-heading {
         font-size: 20px;
         font-weight: 700
     }

     .technologies {
         margin-bottom: 0;
         overflow: visible;
         padding: 20px
     }

     .technologies h2 {
         font-size: 35px;
         margin-top: 90px;
         margin-bottom: 30px
     }

     .lazy-section:first-of-type>.logos>img:first-child,
     .lazy-section:nth-of-type(2)>.logos>img:first-child,
     .lazy-section:nth-of-type(4)>.logos>img:first-child,
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(2) {
         max-width: 60px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(3)>.logos>img:first-child,
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(6),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(7) {
         max-width: 90px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(7)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(7)>.logos>img:nth-child(4) {
         max-width: 55px
     }

     .lazy-section:first-of-type>.logos>img:nth-child(4) {
         max-width: 70px;
         margin-top: -5px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(5),
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(2) {
         max-width: 80px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(3) {
         max-width: 46px
     }

     .lazy-section:nth-of-type(2)>.logos>img:nth-child(4) {
         max-width: 60px;
         margin-top: 5px
     }

     .lazy-section:nth-of-type(3)>.logos>img:nth-child(2) {
         max-width: 50px;
         margin-top: 17px
     }

     .lazy-section:nth-of-type(3)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(5)>.logos>img:first-child,
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(6) {
         max-width: 120px
     }

     .lazy-section:nth-of-type(4)>.logos>img:nth-child(2),
     .lazy-section:nth-of-type(4)>.logos>img:nth-child(7),
     .lazy-section:nth-of-type(5)>.logos>img:nth-child(6),
     .lazy-section:nth-of-type(6)>.logos>img:first-child,
     .lazy-section:nth-of-type(6)>.logos>img:nth-child(3),
     .lazy-section:nth-of-type(7)>.logos>img:first-child {
         max-width: 50px
     }

     .lazy-section:nth-of-type(4)>.logos>img:nth-child(5) {
         max-width: 40px
     }

     .lazy-section:nth-of-type(6)>.logos>img:nth-child(5) {
         max-width: 70px
     }

     .lazy-section:nth-of-type(7)>.logos>img:nth-child(3) {
         max-width: 45px
     }

     .footer::before {
         clip-path: polygon(0 0, 56% 0, 72.5% 100%, 0% 100%);
         height: 88%;
         width: 110%
     }

     .footer .container-brand {
         top: -2%;
         left: 1px;
         width: 40%;
         height: auto
     }

     .footer .contact-social-container {
         position: absolute;
         right: 4%;
         top: 47px;
         width: auto;
         overflow: visible
     }

     .footer-social-links {
         position: relative;
         gap: 12px;
         overflow: visible
     }

     .social-icon {
         transition: transform .3s;
         max-width: 100%;
         max-height: 80%
     }

     .social-icon.tiktok,
     .social-icon.twitter {
         border-radius: 20%;
         width: 33px;
         height: 33px
     }

     .social-icon i {
         font-size: 26px;
         overflow: hidden
     }

     .social-icon.facebook i,
     .social-icon.linkedin i {
         font-size: 21px;
         overflow: hidden
     }

     .footer-line-container .col-5 {
         width: 34.6%
     }

     .footer-line-container .col-7 {
         width: 64.3%
     }

     .footer .bottom-navigation {
         margin-top: 0
     }

     .footer .bottom-navigation .col {
         margin-bottom: 10px;
         width: 25%
     }

     .footer .contact-info li img,
     .footer .contact-info li:nth-of-type(3) img {
         width: 12px;
         height: auto
     }

     .footer .contact-info li:nth-of-type(2) img {
         width: 14px;
         height: 14px
     }

     .footer .contact-info-container {
         position: absolute;
         overflow: visible;
         top: 125px;
         right: 65px;
         width: auto
     }

     .footer .contact-info {
         position: relative;
         margin-left: 20px
     }

     .footer .contact-info .footer-heading {
         font-size: 1.3rem;
         font-weight: 700
     }

     .footer li,
     .footer a {
         font-size: 13px;
     }

     .footer .contact-info a {
         font-size: 14px
     }

     .footer .footer-heading {
         font-size: 1.2rem;
         font-weight: 700
     }
 }

 @media (max-width:1069px) {

     html,
     body {
         font-display: swap;
         overflow-x: hidden;
     }

     .header {
         padding: 0;
         height: 65px;
     }

     .header .container {
         min-width: 0%;
     }

     #navMenu .navbar-nav {
         display: none !important;
     }

     #responsiveNav {
         display: block !important;
     }

     #navMenu .navbar-brand img {
         max-width: 200px;
         min-width: 0 !important;
         margin-top: -5px;
     }

     .hamburger-toggle {
         display: flex;
         width: 41px;
         height: 41px;
         bottom: 8px;
         right: 100px
     }

     .hamburger-toggle .bar {
         width: 15px;
         height: 3px
     }

     .header .btn-responsive {
         display: block;
         position: absolute;
         top: -4px;
         right: 8px;
         width: 30px;
         height: 65px;
         padding: 42px
     }

     /* Dropdown */
     #industriesMenu,
     #servicesMenu {
         display: none;
     }

     /* Show on hover */
     .industries-link:hover #industriesMenu,
     .services-link:hover #servicesMenu {
         display: none;
     }

     .desktop-cards,
     .desktop-cards .cards,
     nav .btn {
         display: none
     }

     .responsive-cards {
         display: block;
         margin: 0 auto;
     }

     .responsive-cards .card {
         width: 100%;
         min-width: 0px;
         max-width: 300px;
         margin: 0 auto;
     }

     .chat-buttons {
         transform: translateY(-20%);
         gap: 1px;
         padding: 5px 2px;
         padding-bottom: 3px;
         border-radius: 30px;
         background: rgba(255, 255, 255, 0.082);
         backdrop-filter: blur(30px);
     }

     .chat-btn {
         width: 48px;
         height: 44px;
         overflow: hidden;
     }

     .chat-btn img {
         width: 60px;
         height: 50px;
     }

     .telegram-btn img {
         width: 40px;
         height: 40px;
     }

     .hero-top {
         height: max-content;
     }

     .hero-top .col-md-7 {
         display: flex;
         flex-direction: column;
     }

     .hero-bottom {
         display: flex;
         flex-direction: row;
         margin-top: -10px;
     }

     .hero-bottom .col-md-2 {
         flex: 0 0 auto;
         max-width: 30%;
         min-width: 0%;
     }

     .hero-bottom .col-md-10 {
         flex: 0 0 auto;
         max-width: 70%;
         min-width: 0%;
     }

     /* .hero-carousel img,
     .hero-carousel .carousel-item:first-of-type img,
     .hero-carousel .carousel-item:nth-of-type(2) img,
     .hero-carousel .carousel-item:nth-of-type(3) img,
     .hero-carousel .carousel-item:nth-of-type(4) img,
     .hero-carousel .carousel-item:nth-of-type(5) img,
     .hero-carousel .carousel-item:last-of-type img {
         width: clamp(90px, 20vw, 150px);
         object-fit: cover;
         margin-top: 0;
         margin-left: -20px;
     } */

     .hero-bottom-carousel .border-line {
         clip-path: polygon(calc(100% - 7px) 65px,
                 100% 30%,
                 100% 100%,
                 0% 100%,
                 4% 96%,
                 calc(100% - 7px) 95%);
     }


     #bookingModal .modal-dialog {
         max-width: 100%;
         width: 100%;
         margin: 1.75rem auto;
         margin-top: 0.5rem !important;
     }

     #bookingModal .modal-content {
         overflow-y: auto;
         margin: 0 auto !important;
     }

     .open-button {
         top: 70px;
         right: 0;
         width: 60px;
         height: 50px;
         overflow-y: hidden;
         z-index: 1000
     }

     .border-container {
         background-image: url('../img/hero/phone-border-button.svg');
         padding: 2px;
         margin-left: 7px;
         margin-top: 10px;
         padding-top: 4px;
         padding-bottom: 0%;
     }

     .open-button img {
         width: 42px;
         height: 42px;
     }

     .contact-form-container {
         width: 100%;
         top: 20px;
         overflow-y: hidden;
         overflow-x: hidden;
     }

     .contact-form-header .border-lines-container {
         margin-top: -23px;
         margin-right: -8px
     }

     .contact-form-header .border-line-container-x {
         padding: 1px 0;
         clip-path: polygon(0% 0%, 94% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .contact-form-header .border-line-container-y {
         padding: 12px 1px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .contact-form-container .row:has(.text-danger) {
         overflow-x: visible
     }

     .social-media a {
         padding-right: 5px
     }

     .services {
         top: 0;
         position: relative;
         justify-content: center;
         z-index: 20;
     }

     .services .container {
         min-width: 100%;
     }

     .line-container {
         display: flex;
         text-align: center;
         margin-top: 5px;
         margin: 0 auto;
     }

     .line-container-img {
         display: flex;
         max-width: 400px;
         min-width: 0;
         margin: 0 auto;
     }

     .technologies .container {
         padding: 0 20px;
         max-width: 100%;
         min-width: 100%;
     }

     .technologies table {
         width: 100%
     }

     .technologies table td {
         padding: 5px
     }

     .technologies table td:last-child {
         justify-content: left
     }

     .technologies table .logos img {
         max-width: 100px;
         margin: 10px;
         transition: transform .3s
     }

     .technologies table .logos img:hover {
         transform: scale(1.1)
     }

     .map h2 {
         font-size: 30px
     }

     .map .col {
         border: 4px solid #023189
     }

     .map .col,
     .map video {
         height: auto
     }

     .footer {
         position: relative;
         z-index: 1
     }

     .footer::before {
         content: '';
         position: absolute;
         background: #fff;
         top: 20px;
         left: 0;
         z-index: 1
     }

     .footer .container-fluid {
         padding: 0;
         height: auto;
         position: relative;
         z-index: 1
     }
 }

 @media (min-width: 768px) and (max-width:1069px) {


     .hero-bottom-carousel .border-line {
         width: 88%;
         padding: 82px 0;
     }

     .hero-carousel p {
         font-size: clamp(12px, 2vw, 18px);
     }

 }

 @media (min-width:768px) and (max-width:800px) {

     .hero .container {
         padding-top: 50px;
         max-width: 100%;
         padding-left: 30px;
         padding-right: 55px;
     }

     .hero-bottom .col-md-2 {
         flex: 1 0 auto !important;
         width: 10% !important;
     }

     .col-md-10 {
         flex: 1 0 auto !important;
         width: 100% !important;
         margin-right: 0.8em;
     }

     .hero-carousel h3 {
         font-size: clamp(22px, 2vw, 33px);
     }

     .hero-carousel p {
         font-size: clamp(17px, 2vw, 20px);
     }

     .hero .btn {
         font-size: clamp(19px, 2vw, 26px);
     }

     .hero-image {
         width: clamp(160px, 20vw, 200px);
     }

     .hero-bottom-carousel .border-line {
         width: 100%;
         padding: 82px 0;
     }

 }

 @media (min-width: 801px) and (max-width: 1069px) {

     .hero .container {
         padding-top: 50px;
         max-width: 100%;
         padding-left: 45px;
         padding-right: 75px;
     }

     .hero-bottom .col-md-2 {
         flex: 1 0 auto !important;
         width: 10% !important;
     }

     .col-md-10 {
         flex: 1 0 auto !important;
         width: 100% !important;
         margin-right: 0.8em;
     }

     .hero-carousel h3 {
         font-size: clamp(22px, 2vw, 33px);
     }

     .hero-carousel p {
         font-size: clamp(17px, 2vw, 20px);
     }

     .hero .btn {
         font-size: clamp(19px, 2vw, 26px);
     }

     .hero-image {
         width: clamp(160px, 20vw, 200px);
     }

     .hero-bottom-carousel .border-line {
         width: 100%;
         padding: 82px 0;
     }

 }

 @media (min-width: 1070px) and (max-width:1300px) {

     .desktop-cards .col-md-4:first-of-type .card .card-body,
     .desktop-cards .col-md-4:nth-of-type(2) .card .card-body,
     .desktop-cards .col-md-4:nth-of-type(3) .card .card-body {
         margin-top: -45px;
     }

     .desktop-cards .card-body .card-title {
         font-size: 16px;
     }

     .desktop-cards .card-body .card-text {
         font-size: 14px;
     }

     .hero .container {
         min-width: 0%;
         max-width: 100%;
         padding-left: 80px;
         padding-right: 100px;
     }

     /* Contact Form Styles */
     .contact-form-container {
         width: 60%;
     }

     .services .container {
         min-width: 0%;
         max-width: 85%;
     }

     .technologies .container {
         min-width: 0%;
         max-width: 85%;
     }
 }

 @media (min-width: 1070px) and (max-width:1096px) {

     #navMenu .nav-link {
         font-size: 22px;
     }


     #navMenu .nav-item:last-of-type {
         margin-left: -20px !important;
         margin-right: 0px;
     }

     #navMenu .btn {
         margin-right: -20px !important;
     }
 }

 @media (min-width: 1070px) and (max-width:1130px) {

     .footer-social-links {
         right: 30px;
     }
 }

 @media (min-width:1920px) {
     .footer .contact-info-container {
         text-align: left;
         line-height: 2;
         margin-left: 70px
     }

     .footer .contact-info li:nth-of-type(3) img {
         margin-left: 2px
     }
 }