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

 /* ====== MOBILE STYLES  ====== */

 /* ====== STYLES FOR STANDERD PHONES  ====== */
 @media (max-width:375px) {

     .careers,
     .get-quotations {
         margin-top: 40px
     }

     .get-quotations .top-heading h1 {
         font-size: 16px;
         padding-right: 6px
     }

     .careers .top-heading h1 {
         font-size: 24px;
         padding-right: 6px
     }

     .get-quotations .top-heading .border-lines-container {
         margin-top: -35px;
         margin-bottom: 15px
     }

     .get-quotations .top-heading .border-line-container-x {
         width: 163px;
         padding: 1.8px 0;
         clip-path: polygon(0% 0%, 96% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .get-quotations .top-heading .border-line-container-y {
         padding: 12px 1.8px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .careers .top-heading .border-lines-container {
         margin-top: -44px
     }

     .careers .top-heading .border-line-container-x {
         width: 110px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .careers .top-heading .border-line-container-y {
         padding: 16px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .get-quotations .why-join-us .border-line-container-x {
         width: 238px
     }

     .careers .why-join-us .border-line-container-x {
         width: 166px
     }

     .get-quotations .form-container {
         margin-top: 0;
         transition: padding-bottom .3s;
         overflow-y: hidden
     }

     .quotation-form,
     .quotation-form .dropdown,
     .quotation-form .select-group,
     .quotation-form .select-group .col-md-9,
     .quotation-form .upload-group {
         overflow: visible
     }

     .get-quotations .form-container:has(.dropdown-menu.show) {
         padding-bottom: 38px
     }

     .quotation-form {
         padding: 15px;
         min-width: 70%;
         max-width: 70%;
         border-radius: 10px;
         margin-left: 10px
     }

     .top-heading .blue-bar {
         min-width: 72%;
         max-width: 72%
     }

     .careers .form-container {
         flex-direction: column
     }

     .application-form {
         min-width: 78%;
         max-width: 78%;
         padding-left: 25px;
         padding-right: 0;
         border-radius: 18px;
         margin: 0 auto
     }

     .careers .top-heading .blue-bar {
         margin-left: auto;
         margin-right: auto;
     }

     .application-form h2,
     .quotation-form h2 {
         font-size: clamp(15px, 2vw, 20px);
         margin-bottom: 0
     }

     .quotation-form .line {
         margin: 10px 0
     }

     .application-form .line {
         width: 80%;
         margin: 10px 0
     }

     .application-form .form-group,
     .quotation-form .form-group {
         margin-bottom: 10px
     }

     .application-form .form-group input,
     .application-form .form-group textarea,
     .quotation-form .form-group input,
     .quotation-form .form-group select,
     .quotation-form .form-group textarea {
         font-size: clamp(7px, 2vw, 14px);
         padding: 4px
     }

     .application-form .form-group input,
     .application-form .form-group textarea {
         width: 80%;
         padding: 5px
     }

     .quotation-form .dropdown .btn-secondary {
         font-size: clamp(7px, 2vw, 14px);
         overflow: visible
     }

     .custom-btn .dropdown-icon {
         font-size: clamp(1px, 2vw, 4px);
         padding: clamp(1px, 2vw, 4px);
         overflow: hidden
     }

     .quotation-form .dropdown .dropdown-menu {
         width: 175px
     }

     .quotation-form .dropdown .dropdown-menu label {
         font-size: clamp(10px, 2vw, 14px)
     }

     .quotation-form .dropdown-item input[type=checkbox] {
         width: 13%
     }

     .custom-checkbox {
         width: 10px;
         height: 14px;
         padding: 5px
     }

     .custom-checkbox:checked::before {
         width: 5px;
         height: 5px;
         padding: 5px
     }

     .custom-checkbox:checked::after {
         font-size: 5px
     }

     .application-form .upload-group label,
     .quotation-form .upload-group label {
         font-size: 11px
     }

     .application-form .custom-upload-container label,
     .quotation-form .custom-upload-container label {
         font-size: 8px
     }

     .application-form .custom-upload-button,
     .quotation-form .custom-upload-button {
         padding: 2px
     }

     #file-name,
     .error-message {
         font-size: 9px
     }

     .application-form .submit-btn,
     .quotation-form .submit-btn {
         width: 70px;
         overflow: hidden;
         font-size: 16px
     }

     .get-quotations .form-image {
         flex: 0.9;
         max-width: 400px;
         margin-left: -60px
     }

     .careers .form-image {
         width: 100%;
         max-width: 100%;
         margin: auto;
         overflow: visible
     }

     .careers .form-image img {
         position: relative;
         width: 130px;
         top: 30px
     }

     .careers .form-image h2,
     .get-quotations .why-join-us h2 {
         font-size: 27px
     }

     .careers .form-image p,
     .get-quotations .why-join-us p {
         font-size: 12px
     }
 }

 /* ====== STYLES FOR LARGE SMARTPHONES  ====== */
 @media (min-width:376px) and (max-width:425px) {

     .careers,
     .get-quotations {
         margin-top: 40px
     }

     .get-quotations .top-heading h1 {
         font-size: 20px;
         padding-right: 6px
     }

     .careers .top-heading h1 {
         font-size: 26px;
         padding-right: 6px
     }

     .get-quotations .top-heading .border-lines-container {
         margin-top: -39px;
         margin-bottom: 15px
     }

     .get-quotations .top-heading .border-line-container-x {
         width: 200px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 96% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .get-quotations .top-heading .border-line-container-y {
         padding: 14px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .careers .top-heading .border-lines-container {
         margin-top: -46px
     }

     .careers .top-heading .border-line-container-x {
         width: 112px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .careers .top-heading .border-line-container-y {
         padding: 17px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .get-quotations .why-join-us .border-line-container-x {
         width: 246px
     }

     .careers .why-join-us .border-line-container-x {
         width: 172px
     }

     .get-quotations .form-container {
         margin-top: 0;
         transition: padding-bottom .3s;
         overflow-y: hidden
     }

     .quotation-form,
     .quotation-form .dropdown,
     .quotation-form .select-group,
     .quotation-form .select-group .col-md-9,
     .quotation-form .upload-group {
         overflow: visible
     }

     .get-quotations .form-container:has(.dropdown-menu.show) {
         padding-bottom: 20px
     }

     .quotation-form {
         padding: 20px;
         min-width: 70%;
         max-width: 70%;
         margin-left: 10px;
         border-radius: 10px
     }

     .top-heading .blue-bar {
         min-width: 72%;
         max-width: 72%
     }

     .careers .form-container {
         flex-direction: column
     }

     .application-form {
         min-width: 80%;
         max-width: 80%;
         padding-left: 25px;
         padding-right: 0;
         border-radius: 18px;
         margin: 0 auto
     }

     .careers .top-heading .blue-bar {
         /* min-width: 88%;
         max-width: 88% */
         margin-left: auto;
         margin-right: auto;
     }

     .application-form h2,
     .quotation-form h2 {
         font-size: clamp(16px, 2vw, 22px);
         margin-bottom: 0
     }

     .quotation-form .line {
         margin: 10px 0
     }

     .application-form .line {
         width: 80%;
         margin: 15px 0
     }

     .application-form .form-group,
     .quotation-form .form-group {
         margin-bottom: 15px
     }

     .quotation-form .form-group input,
     .quotation-form .form-group select,
     .quotation-form .form-group textarea {
         font-size: clamp(9px, 2vw, 14px);
         padding: 5px
     }

     .application-form .form-group input,
     .application-form .form-group textarea {
         width: 80%;
         padding: 6px
     }

     .quotation-form .dropdown .btn-secondary {
         font-size: clamp(10px, 2vw, 14px);
         overflow: visible
     }

     .quotation-form .dropdown .dropdown-menu {
         width: 185px
     }

     .quotation-form .dropdown .dropdown-menu label {
         font-size: clamp(10px, 2vw, 14px)
     }

     .quotation-form .dropdown-item input[type=checkbox] {
         margin-right: 10px;
         width: 12%
     }

     .custom-checkbox {
         width: 10px;
         height: 14px;
         padding: 5px
     }

     .custom-checkbox:checked::before {
         width: 5px;
         height: 5px;
         padding: 5px
     }

     .custom-checkbox:checked::after {
         font-size: 5px
     }

     .application-form .upload-group label,
     .quotation-form .upload-group label {
         font-size: 12px
     }

     .application-form .custom-upload-container label,
     .quotation-form .custom-upload-container label {
         font-size: 9px
     }

     .application-form .custom-upload-button,
     .quotation-form .custom-upload-button {
         padding: 2px
     }

     #file-name,
     .error-message {
         font-size: 10px
     }

     .application-form .submit-btn,
     .quotation-form .submit-btn {
         width: 80px;
         overflow: hidden;
         font-size: 18px
     }

     .get-quotations .form-image {
         flex: 0.9;
         max-width: 400px;
         margin-left: -60px
     }

     .careers .form-image {
         width: 100%;
         max-width: 100%;
         margin: auto;
         overflow: visible
     }

     .careers .form-image img {
         position: relative;
         top: 30px;
         width: 150px;
         height: auto
     }

     .careers .form-image h2,
     .get-quotations .why-join-us h2 {
         font-size: 28px
     }

     .careers .form-image p,
     .get-quotations .why-join-us p {
         font-size: 13px
     }
 }

 /* ====== TABLET STYLES  ====== */

 /* ====== STYLES FOR SMALL TABLETS IN PORTRAIT MODE  ====== */
 @media (min-width:426px) and (max-width:667px) {

     .careers,
     .get-quotations {
         margin-top: 40px
     }

     .get-quotations .top-heading h1 {
         font-size: 20px;
         padding-right: 5px
     }

     .careers .top-heading h1 {
         font-size: 28px;
         padding-right: 6px
     }

     .get-quotations .top-heading .border-lines-container {
         margin-top: -39px;
         margin-bottom: 15px
     }

     .get-quotations .top-heading .border-line-container-x {
         width: 200px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 96% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .get-quotations .top-heading .border-line-container-y {
         padding: 14px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .careers .top-heading .border-lines-container {
         margin-top: -48px
     }

     .careers .top-heading .border-line-container-x {
         width: 120px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .careers .top-heading .border-line-container-y {
         padding: 17px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .get-quotations .why-join-us .border-line-container-x {
         width: 255px
     }

     .careers .why-join-us .border-line-container-x {
         width: 179px
     }

     .get-quotations .form-container {
         margin-top: 20px;
         transition: padding-bottom .3s;
         overflow-y: hidden
     }

     .quotation-form,
     .quotation-form .dropdown,
     .quotation-form .select-group,
     .quotation-form .select-group .col-md-9,
     .quotation-form .upload-group {
         overflow: visible
     }

     .get-quotations .form-container:has(.dropdown-menu.show) {
         padding-bottom: 20px
     }

     .quotation-form {
         padding: 22px;
         min-width: 70%;
         max-width: 70%;
         margin-left: 10px;
         border-radius: 10px
     }

     .top-heading .blue-bar {
         min-width: 71.5%;
         max-width: 71.5%
     }

     .careers .form-container {
         flex-direction: column
     }

     .application-form {
         min-width: 78%;
         max-width: 78%;
         padding-left: 25px;
         padding-right: 5px;
         border-radius: 18px;
         margin: 0 auto
     }

     .careers .top-heading .blue-bar {
         /* min-width: 87%;
         max-width: 87% */
         margin-left: auto;
         margin-right: auto;
     }

     .application-form h2,
     .quotation-form h2 {
         font-size: clamp(18px, 2vw, 24px);
         margin-bottom: 0
     }

     .quotation-form .line {
         margin: 10px 0
     }

     .application-form .line {
         margin: 15px 0;
         width: 80%
     }

     .application-form .form-group,
     .quotation-form .form-group {
         margin-bottom: 15px
     }

     .application-form .form-group input,
     .application-form .form-group textarea,
     .quotation-form .form-group input,
     .quotation-form .form-group select,
     .quotation-form .form-group textarea {
         font-size: clamp(10px, 2vw, 14px);
         padding: 6px
     }

     .application-form .form-group input,
     .application-form .form-group textarea {
         width: 80%
     }

     .quotation-form .dropdown .btn-secondary {
         font-size: clamp(10px, 2vw, 14px);
         overflow: visible
     }

     .quotation-form .dropdown .dropdown-menu {
         width: 220px
     }

     .application-form .custom-upload-container label,
     .quotation-form .custom-upload-container label,
     .quotation-form .dropdown .dropdown-menu label {
         font-size: 12px
     }

     .quotation-form .dropdown-item input[type=checkbox] {
         width: 9%
     }

     .custom-checkbox {
         width: 10px;
         height: 14px;
         padding: 6px
     }

     .custom-checkbox:checked::before {
         width: 5px;
         height: 5px;
         padding: 5px
     }

     .custom-checkbox:checked::after {
         font-size: 5px
     }

     .application-form .upload-group label,
     .quotation-form .upload-group label {
         font-size: 15px
     }

     .application-form .custom-upload-button,
     .quotation-form .custom-upload-button {
         padding: 2px
     }

     #file-name,
     .error-message {
         font-size: 13px
     }

     .application-form .submit-btn,
     .quotation-form .submit-btn {
         width: 100px;
         overflow: hidden;
         font-size: 20px
     }

     .get-quotations .form-image {
         flex: 0.9;
         max-width: 400px;
         margin-left: -60px
     }

     .careers .form-image {
         width: 100%;
         max-width: 100%;
         margin: auto;
         overflow: visible
     }

     .careers .form-image img {
         position: relative;
         top: 30px;
         width: 170px;
         height: auto
     }

     .careers .form-image h2,
     .get-quotations .why-join-us h2 {
         font-size: 29px
     }

     .careers .form-image p,
     .get-quotations .why-join-us p {
         font-size: 14px
     }
 }

 /* ====== STYLES FOR TABLETS IN LANDSCAPE MODE  ====== */
 @media (min-width:668px) and (max-width:991px) {

     .quotation-form,
     .quotation-form .dropdown,
     .quotation-form .select-group,
     .quotation-form .select-group .col-md-9,
     .quotation-form .upload-group {
         overflow: visible
     }

     .careers,
     .get-quotations {
         margin-top: 40px
     }

     .get-quotations .top-heading h1 {
         font-size: 30px;
         padding-right: 6px
     }

     .careers .top-heading h1 {
         font-size: 32px;
         padding-right: 6px
     }

     .get-quotations .top-heading .border-lines-container {
         margin-top: -45px;
         margin-bottom: 15px
     }

     .get-quotations .top-heading .border-line-container-x {
         width: 300px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 96% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .get-quotations .top-heading .border-line-container-y {
         padding: 17px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .careers .top-heading .border-lines-container {
         margin-top: -49px
     }

     .careers .top-heading .border-line-container-x {
         width: 135px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .careers .top-heading .border-line-container-y {
         padding: 18px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .get-quotations .why-join-us .border-line-container-x {
         width: 256px
     }

     .careers .why-join-us .border-line-container-x {
         width: 179px
     }

     .careers .form-container,
     .get-quotations .form-container {
         margin-top: 20px
     }

     .quotation-form {
         padding: 24px;
         min-width: 70%;
         max-width: 70%;
         margin-left: 10px
     }

     .top-heading .blue-bar {
         min-width: 71%;
         max-width: 71%;
         width: 71%
     }

     .careers .form-container {
         flex-direction: column
     }

     .application-form {
         min-width: 78%;
         max-width: 78%;
         padding-left: 35px;
         padding-right: 0;
         border-radius: 18px;
         margin: 0 auto
     }

     .careers .top-heading .blue-bar {
         /* min-width: 88%;
         max-width: 88% */
         margin-left: auto !important;
         margin-right: auto !important;
         display: flex !important;
     }

     .application-form h2,
     .quotation-form h2 {
         font-size: 26px
     }

     .application-form .line {
         margin: 15px 0;
         width: 80%
     }

     .application-form .form-group input,
     .application-form .form-group textarea,
     .quotation-form .form-group input,
     .quotation-form .form-group select,
     .quotation-form .form-group textarea {
         font-size: 16px;
         padding: 8px
     }

     .application-form .form-group input,
     .application-form .form-group textarea {
         width: 80%
     }

     .quotation-form .dropdown .btn-secondary {
         font-size: 16px;
         overflow: visible
     }

     .custom-btn .dropdown-icon {
         font-size: clamp(5px, 20vw, 9px);
         padding: clamp(5px, 20vw, 6px);
         overflow: hidden
     }

     .quotation-form .dropdown .dropdown-menu {
         width: 220px
     }

     .quotation-form .dropdown .dropdown-menu label {
         font-size: 12px
     }

     .quotation-form .dropdown-item input[type=checkbox] {
         width: 8%
     }

     .custom-checkbox {
         width: 10px;
         height: 12px;
         padding: 4px
     }

     .custom-checkbox:checked::before {
         width: 5px;
         height: 5px;
         padding: 6px
     }

     .custom-checkbox:checked::after {
         font-size: 6px
     }

     .application-form .upload-group label,
     .quotation-form .upload-group label {
         font-size: 20px
     }

     .application-form .custom-upload-container label,
     .quotation-form .custom-upload-container label {
         font-size: 13px
     }

     .application-form .custom-upload-button,
     .quotation-form .custom-upload-button {
         padding: 3px
     }

     .application-form .submit-btn,
     .quotation-form .submit-btn {
         width: 120px;
         overflow: hidden;
         font-size: 22px
     }

     .get-quotations .form-image {
         flex: 1;
         max-width: 400px;
         margin-left: -60px
     }

     .careers .form-image {
         width: 100%;
         max-width: 100%;
         margin: auto;
         overflow: visible
     }

     .careers .form-image img {
         position: relative;
         top: 30px;
         width: 180px;
         height: auto
     }

     .careers .form-image h2,
     .get-quotations .why-join-us h2 {
         font-size: 29px
     }

     .careers .form-image p,
     .get-quotations .why-join-us p {
         font-size: 14px
     }


     .footer .footer-heading {
         overflow: hidden
     }
 }

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

     .careers .top-heading .col-md-6 {
         width: 100em;
     }
 }

 @media (max-width:1069px) {

     .careers .top-heading .blue-bar {
         margin-left: auto;
         margin-right: auto;
     }

     .why-join-us-row {
         display: flex !important;
         flex-direction: column !important;
     }

     .why-join-us-row .col-md-6 {
         margin: 0 auto !important;
     }

     .why-join-us-row .col-md-2:has(img) {
         display: flex;
         align-items: center;
         justify-content: center;
         margin: 0 auto;
     }

     .key-beneits p:first-of-type {
         width: max-content;
         padding-left: 10%;
     }

     .key-beneits p:nth-of-type(2) {
         width: 56%;
     }

     .key-beneits p:nth-of-type(3) {
         width: 59%;
     }

     .key-beneits p:nth-of-type(4) {
         width: 62%;
     }

     .key-beneits p:nth-of-type(5) {
         width: 65%;
     }

     .key-beneits p:nth-of-type(6) {
         width: 68%;
     }

     .key-beneits p:nth-of-type(7) {
         width: 71%;
     }

     .key-beneits p:nth-of-type(8) {
         width: 74%;
     }

     body,
     html {
         overflow-x: hidden;
     }

     .careers,
     .get-quotations {
         margin-top: 100px
     }

     .animated-services .container,
     .cookie-popup {
         overflow: visible
     }

     .cookie-popup {
         max-width: 100%;
         min-width: 90%;
         left: 46%
     }

     .animated-services {
         padding: 60px 0;
         margin-top: 20px;
         overflow: visible
     }

     .animated-services .row {
         overflow: visible !important
     }

     .col:has(.logo-img) {
         overflow: hidden
     }

     .col .logo-img {
         width: 40%
     }

     .col-4:has(.service-icon1, .service-icon2, .service-icon3, .service-icon4, .service-icon5, .service-icon6),
     .service-title {
         overflow: visible
     }

     .animated-services .row:first-of-type .col-4:first-of-type {
         position: absolute;
         top: -170px;
         left: 0
     }

     .animated-services .row:first-of-type .col-4:first-of-type .service-title {
         position: relative;
         top: -50px;
         left: -180px
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -40px;
         left: -40px
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .service-title {
         position: relative;
         top: -15px;
         left: -185px
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) {
         position: absolute;
         bottom: -200px;
         left: -12px
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .service-title {
         position: relative;
         top: 15px;
         left: -150px;
         white-space: wrap
     }

     .animated-services .row:last-of-type .col-4:first-of-type {
         position: absolute;
         top: -160px;
         right: 226px;
         overflow: visible
     }

     .animated-services .row:last-of-type .col-4:first-of-type .service-title {
         position: relative;
         top: -50px;
         left: -263px
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -55px;
         right: 85px
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) .service-title {
         position: relative;
         top: -21px;
         left: 0
     }

     .animated-services .row:last-of-type .col-4:last-of-type {
         position: absolute;
         top: 70px;
         right: 45px
     }

     #appointment-form .mb-3,
     .service-icon1,
     .service-icon2,
     .service-icon3,
     .service-icon4,
     .why-choose-us-indus .btn-container {
         overflow: visible
     }

     .service-icon1 {
         width: 65px;
         margin-top: -85px
     }

     .service-icon2 {
         width: 65px
     }

     .service-icon3 {
         width: 140px;
         margin-right: -30px;
         margin-top: 40px
     }

     .service-icon4 {
         width: 80px;
         margin-top: -85px
     }

     .service-icon5 {
         width: 80px;
         margin-left: 185px
     }

     .service-icon6 {
         width: 100px;
         margin-left: 50px
     }

     .animated-services .col-4 .service-title {
         font-size: 10px
     }

     .arrow1 {
         width: 250px;
         height: 150px;
         overflow: visible
     }

     .arrow2 {
         width: 220px;
         height: 30px;
         overflow: visible
     }

     .arrow3 {
         width: 180px;
         height: 120px;
         overflow: visible
     }

     .arrow4 {
         width: 200px;
         height: 150px;
         overflow: visible
     }

     .arrow5 {
         margin-right: 50px;
         width: 280px;
         height: 40px
     }

     .arrow6 {
         margin-right: 150px;
         width: 240px;
         height: 40px
     }

     .services-sections {
         margin-top: 60px
     }

     .tab-content .row {
         padding: 20px 0 50px
     }

     .nav-pills .nav-link {
         padding: 20px 5px
     }

     .nav-pills button {
         font-size: clamp(10px, 4vw, 16px)
     }

     .tab-pane .tab-pane-text {
         padding: 0 20px;
         font-size: clamp(8px, 4vw, 14px)
     }

     .tab-pane .card h5 {
         font-size: clamp(20px, 4vw, 26px)
     }

     .tab-pane .card p,
     .tab-pane li {
         font-size: clamp(8px, 4vw, 14px);
         overflow: visible
     }

     .tab-content .btn {
         width: 150px;
         height: 40px
     }

     .cta-section {
         padding: 5rem 0 6rem;
         overflow: hidden
     }

     .cta-section::before {
         margin-top: 250px
     }

     .cta-section h3 {
         font-size: clamp(22px, 4vw, 30px);
         line-height: 1.6
     }

     .cta-section .btn {
         width: 150px;
         height: 45px
     }

     .industries {
         margin-top: 100px
     }

     .industries .carousel-item-custom .carousel-caption {
         clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 100%);
     }

     .industries .carousel-item-custom:last-of-type .carousel-caption {
         clip-path: polygon(0 0, 100% 15%, 100% 100%, 0 100%);
     }

     .industries .carousel-item-custom .carousel-caption h5 {
         font-size: clamp(13px, 2vw, 16px);
     }

     .carousel-item-custom.active {
         width: clamp(100px, 20vw, 330px);
         height: clamp(100px, 20vw, 300px);
         min-width: 200px;
         max-width: 330px;
         min-height: 300px;
         max-height: 300px
     }

     .carousel-item-custom.active img,
     .industries .carousel-item-custom:nth-of-type(3) img,
     .industries .carousel-item-custom:nth-of-type(5) img {
         height: 300px;
         max-height: 297px;
         min-height: 297px
     }

     .industries .carousel-item-custom:first-of-type,
     .industries .carousel-item-custom:last-of-type {
         margin-left: -100px;
         margin-right: -100px
     }

     .industries .carousel-item-custom:nth-of-type(2),
     .industries .carousel-item-custom:nth-of-type(6) {
         margin-left: -40px;
         margin-right: -40px
     }

     .industries .carousel-item-custom:nth-of-type(3),
     .industries .carousel-item-custom:nth-of-type(5) {
         margin-left: -80px;
         margin-right: -80px;
         width: clamp(200px, 20vw, 200px);
         height: clamp(100px, 20vw, 300px);
         min-width: 200px;
         max-width: 200px;
         min-height: 300px;
         max-height: 300px
     }

     .industries .carousel .carousel-indicators .indicator-btn {
         width: clamp(15px, 20vw, 20px);
         height: clamp(15px, 20vw, 20px);
         min-width: 15px;
         max-width: 23px;
         min-height: 15px;
         max-height: 23px
     }

     #aiandblockchain .modal-dialog,
     #ecommerce .modal-dialog,
     #plants .modal-dialog,
     #realestate .modal-dialog,
     #shippingandlogistics .modal-dialog,
     #showroom .modal-dialog,
     #showrooms .modal-dialog,
     #socialnetwork .modal-dialog,
     #travelhospitality .modal-dialog {
         max-width: 100%;
     }

     .industries .col-md-10 .industry-card .image-container img,
     .industries .col-md-10:last-of-type .industry-card .col-lg-6:first-of-type .image-container img,
     .industries .col-md-10:last-of-type .industry-card .col-lg-6:last-of-type .image-container img,
     .industries .col-md-10:nth-of-type(2) .industry-card .image-container img {
         object-fit: contain;
         width: 90%
     }

     .industries .image-container {
         height: 350px;
         border-radius: 4px
     }

     .about-section .border-lines-container {
         margin-top: -46px;
         margin-right: -11px
     }

     .about-section .border-line-container-x {
         width: 147px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 94% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .about-section .border-line-container-y {
         padding: 20px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .what-we-do .border-lines-container {
         margin-top: -38px;
         margin-right: 0;
         overflow: visible
     }

     .what-we-do .border-line-container-x {
         width: 156px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 94% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .our-story .col-lg-12 .border-line-container-y,
     .our-story .col-lg-6 .border-line-container-y,
     .what-we-do .border-line-container-y {
         padding: 17px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .why-choose-us .border-lines-container {
         margin-top: -38px;
         margin-right: 0
     }

     .why-choose-us .border-line-container-x {
         width: 200px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 94% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px
     }

     .values-section .col-12 .border-line-container-y,
     .why-choose-us .border-line-container-y {
         padding: 19px 2px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%)
     }

     .about-section {
         margin-top: 50px
     }

     .about-section .open-button {
         padding-top: 3px;
         height: 50px;
         overflow-y: hidden
     }

     .about-section .container .col-lg-6 {
         width: 100%
     }

     .about-section .container h2 {
         font-size: clamp(30px, 2vw, 30px);
         overflow: visible
     }

     .about-section p,
     .get-in-touch p,
     .our-story p,
     .values-section ul li,
     .what-we-do .info-box .paragraph {
         font-size: 15px
     }

     .our-story h3,
     .what-we-do h3,
     .why-choose-us h3 {
         font-size: 25px;
         overflow: visible
     }

     .why-choose-us {
         padding: 0
     }

     .what-we-do .info-box ul,
     .why-choose-us .info-box ul {
         flex-direction: column
     }

     .what-we-do .info-box ul li p,
     .why-choose-us .info-box ul li {
         flex-direction: row;
         align-items: center;
         font-size: 14px;
         text-align: start
     }

     .our-story .col-lg-12 .border-lines-container,
     .our-story .col-lg-6 .border-lines-container {
         margin-top: -44px;
         margin-right: 0;
         margin-bottom: 15px
     }

     .our-story .col-lg-12 .border-line-container-x,
     .our-story .col-lg-6:first-of-type .border-line-container-x,
     .our-story .second-border .border-line-container-x {
         margin-right: -6px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 94% 0%, 100% 100%, 90% 100%, 0% 100%)
     }

     .our-story .col-lg-6:first-of-type .border-line-container-x {
         width: 148px
     }

     .our-story .second-border .border-line-container-x {
         width: 130px
     }

     .our-story .col-lg-12 .border-line-container-x {
         width: 197px
     }

     .values-section h2 {
         font-size: 30px;
         padding: 0;
         overflow: visible
     }

     .values-section .col-12 .border-lines-container {
         margin-top: -43px;
         margin-bottom: 15px
     }

     .values-section .col-12 .border-line-container-x {
         width: 162px;
         padding: 2px 0;
         clip-path: polygon(0% 0%, 94% 0%, 100% 100%, 90% 100%, 0% 100%)
     }

     .get-in-touch h2 {
         font-size: 25px
     }

     .get-in-touch .btn-container,
     .working-process .row {
         overflow: hidden
     }

     .get-in-touch .cta-button {
         width: 100px;
         font-size: 18px;
         border-radius: 8px;
         padding: 80px;
         overflow: hidden
     }

     .services-inner {
         margin-top: 65px;
         margin-bottom: -70px;
         padding-top: 20px;
         padding-bottom: 100px
     }

     .services-inner h2,
     .working-process h6 {
         font-size: clamp(26px, 4vw, 30px)
     }

     .services-inner ul {
         list-style: disc
     }

     .services-inner li,
     .services-inner p {
         font-size: clamp(14px, 2.5vw, 18px);
         overflow: visible
     }

     .appointment-form {
         border-radius: 20px
     }

     .appointment-form h5 {
         font-size: clamp(16px, 4vw, 19px)
     }

     #appointment-form .mb-3 #errorContainer,
     #appointment-form .mb-3:has(#errorContainer),
     #appointment-form .mb-3:has(#errorContainer) p {
         overflow: visible
     }

     #appointment-form .mb-3:has(#errorContainer) p {
         margin-top: 0;
         line-height: 1.4
     }

     .appointment-form input,
     .appointment-form textarea {
         font-size: clamp(12px, 4vw, 16px);
         overflow: visible
     }

     .language-box {
         margin-top: 0
     }

     .language-icon {
         width: 0
     }

     .css .col-4 .language-icon,
     .digital-marketing .col-4 .language-icon,
     .uiux .col-4 .language-icon,
     .wb-lang .col-4 .language-icon,
     .wb-lang .col-4:nth-of-type(5) .language-icon {
         width: 40px
     }

     .ai .col-4:nth-of-type(2) .language-icon,
     .cloud .col-4:first-of-type .language-icon,
     .css .col-4:nth-of-type(2) .language-icon {
         width: 70px
     }

     .ai .col-4:first-of-type .language-icon,
     .cloud .col-4 .language-icon,
     .css .col-4:nth-of-type(3) .language-icon,
     .digital-marketing .col-4:first-of-type .language-icon,
     .ecommerce .col-4:nth-of-type(3) .language-icon,
     .wb-lang .col-4:nth-of-type(3) .language-icon {
         width: 50px
     }

     .css .col-4:nth-of-type(5) .language-icon {
         width: 90px
     }

     .ai .col-4:nth-of-type(3) .language-icon,
     .ecommerce .col-4:first-of-type .language-icon,
     .wb-lang .col-4:nth-of-type(2) .language-icon,
     .wb-lang .col-4:nth-of-type(4) .language-icon {
         width: 60px
     }

     .ai .col-4:first-of-type,
     .cloud .col-4:first-of-type,
     .ecommerce .col-4:first-of-type {
         margin-left: 0
     }

     .ai .col-4,
     .cloud .col-4,
     .ecommerce .col-4 {
         margin-right: 0
     }

     .cloud .col-4:nth-of-type(2) .language-icon,
     .uiux .col-4:nth-of-type(4) .language-icon {
         width: 140px
     }

     .ecommerce .col-4:nth-of-type(2) .language-icon,
     .uiux .col-4:first-of-type .language-icon {
         width: 80px
     }

     .digital-marketing .col-4:nth-of-type(4) .language-icon {
         width: 35px
     }

     .working-process .iphone {
         margin-bottom: clamp(-80px, -6vw, -40px);
         overflow: visible
     }

     .working-process .iphone2 {
         margin-bottom: -60px;
         overflow: visible
     }

     .working-process .iphone img {
         min-width: 100px;
         max-width: 150px
     }

     .working-process .iphone2 img {
         min-width: 350px;
         max-width: 600px
     }

     #analyticalCookies,
     #marketingCookies,
     #necessaryCookies {
         overflow: visible
     }

     #necessaryCookies::after {
         font-size: 12px;
         left: 55%
     }

     #analyticalCookies:checked::after,
     #marketingCookies:checked::after {
         font-size: 12px;
         left: 50%;
         transform: translate(-50%, -50%)
     }

     .footer .container-fluid::before {
         display: none
     }
 }

 @media (max-width: 991px) {

     /* === SERVICES PAGE STYLES === */
     .animated-services .row:first-of-type .col-4:first-of-type {
         position: absolute;
         top: -170px;
         left: 70px;
     }

     .service-icon1,
     .service-icon4 {
         margin-top: -45px;
     }

     .service-icon6 {
         width: 100px;
         margin-left: 50px;
     }

     .arrow1 {
         width: 170px;
         height: 100px;
     }

     .arrow-wrapper::before {
         color: #023189;
         font-family: 'Inter', sans-serif;
         font-size: 8px;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
         white-space: nowrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) {
         position: absolute;
         bottom: -100px;
         left: -9px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) {
         position: absolute;
         left: -0px;
     }

     .animated-services .row:last-of-type .col-4:last-of-type {
         position: absolute;
         top: 68px;
     }


     .arrow2 {
         width: 170px;
         height: 22px;
     }

     .arrow3 {
         width: 170px;
         height: 115px;
     }

     .arrow4 {
         width: 170px;
         height: 100px;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .service-title {
         font-size: clamp(5px, 4vw, 9px);
         margin-left: 72px;
         margin-top: 30px;
         white-space: wrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 9px);
         margin-left: 100px;
         margin-top: -20px;
         white-space: wrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 9px);
         margin-left: 30px;
         margin-top: 5px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(1) .service-title {
         font-size: clamp(5px, 4vw, 9px);
         margin-left: 76px;
         margin-top: 16px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 9px);
         margin-left: -80px;
         margin-top: -7px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 9px);
         margin-left: 20px;
         margin-top: 8px;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .arrow-wrapper {
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .arrow-wrapper {
         animation: blink 1.7s ease-in-out 2.5s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .arrow-wrapper {
         animation: blink 1.7s ease-in-out 5s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:first-of-type .arrow-wrapper {
         animation: blink 1.7s ease-in-out 7.5s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(2) .arrow-wrapper {
         animation: blink 1.7s ease-in-out 10s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(3) .arrow-wrapper {
         animation: blink 1.7s ease-in-out 12.5s 1;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .arrow-wrapper::before {
         content: 'Custom Software Development';
         position: absolute;
         top: 43px;
         left: 50%;
         transform: translateX(70%);
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .arrow-wrapper::before {
         content: 'Web3 & Blockchain Solutions';
         position: absolute;
         top: 48px;
         left: 100%;
         transform: translateX(65%);
         white-space: nowrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .arrow-wrapper::before {
         content: 'Digital Marketing & SEO/AEO/GEO';
         position: absolute;
         top: 85px;
         left: 100%;
         transform: translateX(89%);
         white-space: nowrap;
     }

     .animated-services .row:nth-of-type(3) .col-4:first-of-type .arrow-wrapper::before {
         content: 'Cloud Development & Migration';
         position: absolute;
         top: 43px;
         left: 50%;
         transform: translateX(15%);
         white-space: nowrap;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(2) .arrow-wrapper::before {
         content: 'E-Commerce and CMS Tools';
         position: absolute;
         top: 94px;
         left: 50%;
         transform: translateX(-52%);
         white-space: nowrap;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(3) .arrow-wrapper::before {
         content: 'UI/UX & Graphic Designing';
         position: absolute;
         top: -11px;
         left: 50%;
         transform: translateX(-95%);
         white-space: nowrap;
     }

 }

 /* ====== STYLES FOR SPECIFIC SECTIONS  ====== */
 @media (max-width: 529px) {

     /* === SERVICES PAGE STYLES === */
     .animated-services .container {
         margin-left: -30px;
     }

     .col .logo-img {
         width: clamp(100px, 40vw, 200px);
     }

     .arrow-wrapper::before {
         color: #023189;
         font-family: 'Inter', sans-serif;
         font-size: 6px;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
         white-space: nowrap;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .arrow-wrapper::before {
         content: 'Custom Software Development';
         position: absolute;
         top: 45px;
         left: 50%;
         transform: translateX(89%);
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .arrow-wrapper::before {
         content: 'Web3 & Blockchain Solutions';
         position: absolute;
         top: 52px;
         left: 100%;
         transform: translateX(83%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .arrow-wrapper::before {
         content: 'Digital Marketing & SEO/AEO/GEO';
         position: absolute;
         top: 63px;
         left: 100%;
         transform: translateX(270%);
         white-space: wrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:first-of-type .arrow-wrapper::before {
         content: 'Cloud Development & Migration';
         position: absolute;
         top: 45px;
         left: 50%;
         transform: translateX(15%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(2) .arrow-wrapper::before {
         content: 'E-Commerce and CMS Tools';
         position: absolute;
         top: 96px;
         left: 50%;
         transform: translateX(-95%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(3) .arrow-wrapper::before {
         content: 'UI/UX & Graphic Designing';
         position: absolute;
         top: -9px;
         left: 50%;
         transform: translateX(-95%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:first-of-type {
         position: absolute;
         left: -80px;
     }


     .animated-services .row:first-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -40px;
         left: -127px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) {
         position: absolute;
         bottom: -200px;
         left: -85px;
     }

     .animated-services .row:last-of-type .col-4:first-of-type {
         position: absolute;
         top: -160px;
         overflow: visible;
         right: clamp(18px, 14vw, 72px);
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -50px;
         right: clamp(-65px, 25vw, -72px);
     }

     .animated-services .row:last-of-type .col-4:last-of-type {
         position: absolute;
         top: 65px;
         right: clamp(-65px, 25vw, -72px);
     }

     .service-icon1,
     .service-icon2,
     .service-icon3,
     .service-icon4 {
         overflow: visible;
     }

     .service-icon1 {
         width: 65px;
         margin-top: -40px;
     }

     .service-icon2 {
         width: 65px;
     }

     .service-icon3 {
         width: 140px;
         margin-right: -30px;
         margin-top: 40px;
     }

     .service-icon4 {
         width: 80px;
         margin-top: -50px;
     }

     .service-icon5 {
         width: 80px;
         margin-left: clamp(35px, 13vw, 80px);
     }

     .service-icon6 {
         width: 100px;
         margin-left: 30px;
     }

     .arrow1 {
         width: clamp(125px, 25vw, 250px);
         height: 100px;
         overflow: visible;
     }

     .arrow2 {
         width: clamp(100px, 25vw, 250px);
         height: 20px;
         overflow: visible;
     }

     .arrow3 {
         width: clamp(85px, 13vw, 90px);
         height: 100px;
         overflow: visible;
     }

     .arrow4 {
         width: clamp(85px, 25vw, 250px);
         height: 100px;
         overflow: visible;
     }

     .arrow5 {
         margin-right: 120px;
         width: clamp(100px, 45vw, 290px);
         height: 40px;
     }

     .arrow6 {
         margin-right: 130px;
         width: clamp(100px, 45vw, 170px);
         height: 40px;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 82px;
         margin-top: 50px;
         white-space: nowrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 100px;
         margin-top: -5px;
         white-space: wrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 100px;
         margin-top: -5px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(1) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 76px;
         margin-top: 49px;
         white-space: nowrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: -80px;
         margin-top: 0px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 20px;
         margin-top: 6px;
     }
 }

 @media (max-width: 440px) {

     /* === SERVICES PAGE STYLES === */

     .animated-services .container {
         margin-left: -30px;
     }

     .col .logo-img {
         width: clamp(100px, 40vw, 200px);
     }

     .arrow-wrapper::before {
         color: #023189;
         font-family: 'Inter', sans-serif;
         font-size: 6px;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
         white-space: nowrap;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .arrow-wrapper::before {
         content: 'Custom Software Development';
         position: absolute;
         top: 45px;
         left: 50%;
         transform: translateX(87%);
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .arrow-wrapper::before {
         content: 'Web3 & Blockchain Solutions';
         position: absolute;
         top: 38px;
         left: 100%;
         transform: translateX(215%);
         white-space: wrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .arrow-wrapper::before {
         content: 'Digital Marketing & SEO/AEO/GEO';
         position: absolute;
         top: 58px;
         left: 100%;
         transform: translateX(270%);
         white-space: wrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:first-of-type .arrow-wrapper::before {
         content: 'Cloud Development & Migration';
         position: absolute;
         top: 30px;
         left: 50%;
         transform: translateX(50%);
         white-space: wrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(2) .arrow-wrapper::before {
         content: 'E-Commerce and CMS Tools';
         position: absolute;
         top: 96px;
         left: 50%;
         transform: translateX(-95%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(3) .arrow-wrapper::before {
         content: 'UI/UX & Graphic Designing';
         position: absolute;
         top: -9px;
         left: 50%;
         transform: translateX(-95%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:first-of-type {
         position: absolute;
         left: -85px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -40px;
         left: -85px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) {
         position: absolute;
         bottom: -180px;
         left: -90px;
     }

     .animated-services .row:last-of-type .col-4:first-of-type {
         position: absolute;
         top: -160px;
         overflow: visible;
         right: clamp(25px, 14vw, 60px);
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -60px;
         right: clamp(-65px, 25vw, -72px);
     }

     .animated-services .row:last-of-type .col-4:last-of-type {
         position: absolute;
         top: 60px;
         right: clamp(-65px, 25vw, -72px);
     }

     .service-icon1,
     .service-icon2,
     .service-icon3,
     .service-icon4 {
         overflow: visible;
     }

     .service-icon1 {
         width: 65px;
         margin-top: -40px;
     }

     .service-icon2 {
         width: 65px;
     }

     .service-icon3 {
         width: 140px;
         margin-right: -30px;
         margin-top: 40px;
     }

     .service-icon4 {
         width: 80px;
         margin-top: -50px;
     }

     .service-icon5 {
         width: 80px;
         margin-left: clamp(35px, 13vw, 80px);
     }

     .service-icon6 {
         width: 100px;
         margin-left: 30px;
     }

     .arrow1 {
         width: clamp(120px, 25vw, 250px);
         height: 100px;
         overflow: visible;
     }

     .arrow2 {
         width: clamp(100px, 25vw, 250px);
         height: 20px;
         overflow: visible;
     }

     .arrow3 {
         width: clamp(89px, 13vw, 90px);
         height: 83px;
         overflow: visible;
     }

     .arrow4 {
         width: clamp(85px, 25vw, 250px);
         height: 100px;
         overflow: visible;
     }

     .arrow5 {
         margin-right: 120px;
         width: clamp(100px, 45vw, 290px);
         height: 40px;
     }

     .arrow6 {
         margin-right: 130px;
         width: clamp(100px, 45vw, 170px);
         height: 40px;
     }


     .animated-services .row:first-of-type .col-4:first-of-type .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 82px;
         margin-top: 50px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 100px;
         margin-top: -5px;
         white-space: wrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 100px;
         margin-top: -5px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(1) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 76px;
         margin-top: 49px;
         white-space: nowrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: -80px;
         margin-top: 0px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 20px;
         margin-top: 6px;
     }
 }

 @media (max-width: 399px) {

     /* === SERVICES PAGE STYLES === */
     .animated-services .container {
         margin-left: -25px;
     }

     .col .logo-img {
         width: clamp(80px, 40vw, 200px);
     }


     .animated-services .row:first-of-type .col-4:nth-of-type(3) {
         position: absolute;
         bottom: -170px;
     }

     .animated-services .row:first-of-type .col-4:first-of-type {
         position: absolute;
         left: clamp(-90px, -30%, -75px);
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -40px;
         left: -75px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) {
         position: absolute;
         bottom: -184px;
         left: -83px;
     }

     .animated-services .row:last-of-type .col-4:first-of-type {
         position: absolute;
         top: -160px;
         overflow: visible;
         right: clamp(35px, 13vw, 60px);
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -60px;
         right: clamp(-65px, 25vw, -72px);
     }

     .animated-services .row:last-of-type .col-4:last-of-type {
         position: absolute;
         top: 55px;
         right: clamp(-63px, 25vw, -72px);
     }

     .service-icon1,
     .service-icon2,
     .service-icon3,
     .service-icon4 {
         overflow: visible;
     }

     .service-icon1 {
         width: 55px;
         margin-top: -40px;
     }

     .service-icon2 {
         width: 55px;
     }

     .service-icon3 {
         width: 130px;
         margin-right: -30px;
         margin-top: 40px;
     }

     .service-icon4 {
         width: 70px;
         margin-top: -50px;
     }

     .service-icon5 {
         width: 70px;
         margin-left: clamp(35px, 10vw, 80px);
     }

     .service-icon6 {
         width: 90px;
         margin-left: 20px;
     }

     .arrow1 {
         width: clamp(120px, 25vw, 250px);
         height: 100px;
         overflow: visible;
     }


     .arrow2 {
         width: clamp(100px, 25vw, 250px);
         height: 20px;
         overflow: visible;
     }

     .arrow3 {
         width: clamp(80px, 13vw, 90px);
         height: 80px;
         overflow: visible;
     }

     .arrow4 {
         width: clamp(85px, 25vw, 250px);
         height: 100px;
         overflow: visible;
     }

     .arrow5 {
         margin-right: 120px;
         width: clamp(100px, 45vw, 290px);
         height: 40px;
     }

     .arrow6 {
         margin-right: 120px;
         width: clamp(100px, 45vw, 150px);
         height: 40px;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 82px;
         margin-top: 50px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 100px;
         margin-top: -5px;
         white-space: wrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 100px;
         margin-top: -5px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(1) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 120px;
         margin-top: 30px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: -80px;
         margin-top: 0px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 20px;
         margin-top: 6px;
     }
 }

 @media (max-width: 369px) {

     /* === SERVICES PAGE STYLES === */
     .animated-services .container {
         margin-left: -25px;
     }

     .col .logo-img {
         width: clamp(80px, 40vw, 200px);
     }

     .animated-services .row:first-of-type .col-4:first-of-type {
         position: absolute;
         left: -80px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -40px;
         left: -75px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) {
         position: absolute;
         bottom: -175px;
         left: clamp(-80px, 13vw, -90px);
     }

     .animated-services .row:last-of-type .col-4:first-of-type {
         position: absolute;
         top: -160px;
         overflow: visible;
         right: clamp(35px, 13vw, 60px);
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) {
         position: absolute;
         top: -60px;
         right: clamp(-85px, -40vw, -99px);
     }

     .animated-services .row:last-of-type .col-4:last-of-type {
         position: absolute;
         top: 65px;
         right: clamp(-65px, 25vw, -72px);
     }

     .service-icon1,
     .service-icon2,
     .service-icon3,
     .service-icon4 {
         overflow: visible;
     }

     .service-icon1 {
         width: 55px;
         margin-top: -40px;
     }

     .service-icon2 {
         width: 55px;
     }

     .service-icon3 {
         width: 130px;
         margin-right: -30px;
         margin-top: 40px;
     }

     .service-icon4 {
         width: 70px;
         margin-top: -50px;
     }

     .service-icon5 {
         width: 70px;
         margin-left: clamp(35px, 10vw, 80px);
     }

     .service-icon6 {
         width: 90px;
         margin-left: 20px;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 82px;
         margin-top: 50px;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 100px;
         margin-top: -5px;
         white-space: wrap;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 100px;
         margin-top: -5px;
         white-space: wrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(1) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 80px;
         margin-top: 50px;
         white-space: nowrap;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(2) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: -100px;
         margin-top: 6px;
     }

     .animated-services .row:last-of-type .col-4:nth-of-type(3) .service-title {
         font-size: clamp(5px, 4vw, 6px);
         margin-left: 20px;
         margin-top: -9px;
     }

     .arrow1 {
         width: clamp(90px, 32vw, 200px);
         height: 100px;
         overflow: visible;
     }

     .arrow2 {
         width: clamp(100px, 25vw, 250px);
         height: 20px;
         overflow: visible;
     }

     .arrow3 {
         width: clamp(70px, 13vw, 90px);
         height: 80px;
         overflow: visible;
     }

     .arrow4 {
         width: clamp(90px, 32vw, 200px);
         height: 100px;
         overflow: visible;
     }

     .arrow5 {
         margin-right: 120px;
         width: clamp(100px, 45vw, 290px);
         height: 40px;
     }

     .arrow6 {
         margin-right: 100px;
         width: clamp(100px, 45vw, 140px);
         height: 40px;
     }
 }

 @media (max-width: 359px) {

     .key-beneits h3 {
         padding-left: 0.2em !important;
     }

     .key-beneits p {
         font-size: clamp(10px, 1vw, 12px);
     }
 }

 @media (max-width: 330px) {

     /* === SERVICES PAGE STYLES === */
     .animated-services .row:first-of-type .col-4:first-of-type {
         position: absolute;
         left: -80px;
     }

     .arrow-wrapper::before {
         color: #023189;
         font-family: 'Inter', sans-serif;
         font-size: 6px;
         font-style: normal;
         font-weight: 700;
         line-height: normal;
         white-space: nowrap;
     }

     .animated-services .row:first-of-type .col-4:first-of-type .arrow-wrapper::before {
         content: 'Custom Software Development';
         position: absolute;
         top: 45px;
         left: 50%;
         transform: translateX(-50%);
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(2) .arrow-wrapper::before {
         content: 'Web3 & Blockchain Solutions';
         position: absolute;
         top: -13px;
         left: 50%;
         transform: translateX(-75%);
         white-space: wrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) .arrow-wrapper::before {
         content: 'Digital Marketing & SEO/AEO/GEO';
         position: absolute;
         top: 45px;
         left: 50%;
         transform: translateX(-50%);
         white-space: wrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:first-of-type .arrow-wrapper::before {
         content: 'Cloud Development & Migration';
         position: absolute;
         top: 45px;
         left: 50%;
         transform: translateX(-60%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(2) .arrow-wrapper::before {
         content: 'E-Commerce and CMS Tools';
         position: absolute;
         top: 25px;
         left: 50%;
         transform: translateX(-95%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:nth-of-type(3) .col-4:nth-of-type(3) .arrow-wrapper::before {
         content: 'UI/UX & Graphic Designing';
         position: absolute;
         top: -9px;
         left: 50%;
         transform: translateX(-95%);
         white-space: nowrap;
         animation: blink 1.7s ease-in-out 0s 1;
     }

     .animated-services .row:first-of-type .col-4:nth-of-type(3) {
         position: absolute;
         bottom: -170px;
     }
 }

 /* ====== DESKTOP STYLES ====== */

 /* ====== STYLES FOR SMALL DESKTOPS ====== */
 @media (min-width: 992px) and (max-width: 1069px) {

     /* === QUOTATION FORM & APPLICATION FORM STYLES === */
     .careers,
     .get-quotations {
         margin-top: 100px;
     }

     .get-quotations .top-heading .border-lines-container {
         margin-top: -54px;
     }

     .get-quotations .top-heading .border-line-container-x {
         width: 365px;
         padding: 2.5px 0px;
         clip-path: polygon(0% 0%, 96% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px;
     }


     .get-quotations .top-heading .border-line-container-y {
         padding: 21px 2.5px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
     }

     .careers .top-heading .border-lines-container {
         margin-top: -53px;
     }

     .careers .top-heading .border-line-container-x {
         width: 155px;
         clip-path: polygon(0% 0%, 95% 0%, 100% 100%, 90% 100%, 0% 100%);
         margin-right: -6px;
     }

     .careers .top-heading .border-line-container-y {
         padding: 20px 2.5px;
         clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 0% 100%);
     }

     .careers .top-heading .col-md-6 {
         width: 38em;
     }

     .key-beneits p:first-of-type {
         width: 53%;
     }

     .key-beneits p:nth-of-type(2) {
         width: 56%;
     }

     .key-beneits p:nth-of-type(3) {
         width: 59%;
     }

     .key-beneits p:nth-of-type(4) {
         width: 62%;
     }

     .key-beneits p:nth-of-type(5) {
         width: 65%;
     }

     .key-beneits p:nth-of-type(6) {
         width: 68%;
     }

     .key-beneits p:nth-of-type(7) {
         width: 71%;
     }

     .key-beneits p:nth-of-type(8) {
         width: 74%;
     }

     .quotation-form .select-group {
         overflow: visible;
     }

     .quotation-form .select-group .col-md-9 {
         overflow: visible;
     }

     .quotation-form .dropdown {
         overflow: visible;
     }

     .quotation-form .dropdown .btn-secondary {
         font-size: 16px;
         overflow: visible;
     }

     .quotation-form .dropdown .dropdown-menu {
         width: 220px;
     }

     .quotation-form .dropdown .dropdown-menu label {
         font-size: 12px;
     }

     .quotation-form .dropdown-item input[type="checkbox"] {
         width: 10%;
     }

     .custom-checkbox {
         width: 10px;
         height: 16px;
         padding: 5px;
     }

     .custom-checkbox:checked::before {
         width: 5px;
         height: 5px;
         padding: 6px;
     }

     .custom-checkbox:checked::after {
         font-size: 6px;
     }

     .careers .form-image {
         margin-left: 20px;
     }

     .careers .form-image img {
         width: 230px;

     }


     /* About Us Section Styles */
     .about-section {
         margin-top: 50px;
     }

     .quotation-form {
         max-width: 70%;
         min-width: 70%;
     }

     .top-heading .blue-bar {
         max-width: 75.5%;
         min-width: 75.5%;
     }

     .application-row .col-lg-6 {
         overflow: visible;
     }

 }

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

     /* === CAREER PAGE BAR STYLES === */
     .careers .top-heading .blue-bar {
         /* max-width: 53.5%;
         min-width: 53.5%; */
     }
 }

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

     /* === QUOTATION  & CAREER PAGE BAR STYLES === */
     .top-heading .blue-bar {
         max-width: 64.5%;
         min-width: 64.5%;
     }

 }

 @media (min-width: 1601px) and (max-width: 3000px) {

     /* === QUOTATION  & CAREER PAGE BAR STYLES === */
     .top-heading .blue-bar {
         max-width: 63.5%;
         min-width: 63.5%;
     }

     .careers .top-heading .blue-bar {
         /* max-width: 53.5%;
         min-width: 53.5%; */
     }
 }