@import url('https://fonts.googleapis.com/css2?family=Abel&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

body {
    font-family: "Plus Jakarta Sans", sans-serif;
}

h1, h2, h3 {
    font-family: "Plus Jakarta Sans", sans-serif;
    letter-spacing: -0.01em;
}
h3 {
    font-weight: 600;
}
h4, h5, h6 {
    font-family: "Plus Jakarta Sans", sans-serif;
}
h4 {
    font-size: 2rem;
    font-weight: 700;
}
.h4 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.25rem;
}
@media (min-width: 576px) {
    h4 {
        font-size: 2.5rem;
    }
}
h5 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.625rem;
}
.p-80 {
    font-family: "Abel", sans-serif;
    font-size: 5rem;
    line-height: 2rem;
    letter-spacing: -0.2rem;
}
.lead, .p-24-sb {
    font-size: 1.5rem;
    font-weight: 600;
}
.p-24-b {
    font-size: 1.5rem;
    font-weight: 700;
}
.p-20-b {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.875rem;
}
.p-20-m {
    font-size: 1rem;
    line-height: 1.625rem;
}
.p-18-sb {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.625rem;
}

.p-16-b {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25rem;
}
.p-16-sb {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.75rem;
}
.p-16-m {
    font-size: 0.938rem;
    font-weight: 500;
    line-height: 1.5rem;
}
@media (min-width: 576px) {
    .p-20-m {
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.875rem;
    }
    .p-18-sb {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .p-16-m {
        font-size: 1rem;
        line-height: 1.75rem;
    }
}
.p-15-b {
    font-size: 0.938rem;
    font-weight: 700;
    line-height: 1.563rem;
}
.p-15-m {
    font-size: 0.938rem;
    font-weight: 500;
    line-height: 1.563rem;
}

.p-13-b {
    font-size: 0.813rem;
    font-weight: 700;
    line-height: 1.25rem;
}
.p-13-m {
    font-size: 0.813rem;
    font-weight: 500;
    line-height: 1.25rem !important;
}
.p-12-sb {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 0.938rem;
}
.p-12-m {
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 0.938rem;
}
.tx-darkblue { color: #182676; }
.tx-blue { color: rgba(37, 99, 235, 0.85)}
.tx-171 { color: #171717; }
.tx-orange { color: #F6861F; }
.tx-yellow { color: #FFBB00; }

.tx-blnc { text-wrap: balance; }

.btn-blue {
    background-color: #2A3780;
    color: #fff;
    padding: 11px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 20px;
    transition: all ease 0.5s;
    text-decoration: none;
}
.btn-blue:hover {
    background-color: #576ad6;
    color: #fff;
}
a.link-next {
    text-decoration: none;
    padding: 8px 20px;
}
a.link-next:hover {
    text-decoration: underline
}
header ul li {
    padding: 1px 0 ;
}

header ul li a {
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    color: #fff;
    transition: all 0.3s ease;
}
header ul li a:hover {
    color: dodgerblue;
}
header ul li a.active {
    color: #F6861F;
    content: "_"
}
header ul li a.active::before {
    content: "_";
    position: relative;
    left: -5px;
}

@media (min-width: 576px) {
    header ul li a.active::after {
    left: 55px;
    }
}

.talk-bulb {
    position: absolute;
   top: -40px; 
   left: 200px; 
}

@media (min-width: 576px) {
    .talk-bulb {
       top: -40px; 
       left: 380px; 
    }
}

@media (min-width: 768px) {
    .talk-bulb {
       top: -30px; 
       left: 480px; 
    }
}
@media (min-width: 992px) {
    .talk-bulb {
       top: -30px; 
       left: 560px; 
    }
}

.hero-section {
    padding-top: 30px; /* Space for the header */
    padding-bottom: 0;
    background: url('../images/bg-grad-01.png');
    background-size: cover;
    background-position: center;
    color: white;
    min-height: 90vh;
    display: flex;
    align-items: center;           
}

@media (min-width: 576px) {
    .hero-section {
        padding-top: 100px; /* Space for the header */
        padding-bottom: 50px;
        min-height: 90vh;
        display: flex;
        align-items: center;           
    }
}

/**FLUSH ONE**/

.flush-one {
    position: absolute;
    bottom: 30px;
    right: 0;
    overflow: hidden;
}
@media (min-width: 576px) {
    .flush-one {
        top: 65%;
        width: 80%;
    }
}

@media (min-width: 768px) {
    .flush-one {
        top: 55%;
    }
}

@media (min-width: 992px) {
    .flush-one {
        top: 52%;
        width: auto;
    }
}

@media (min-width: 1200px) {
    .flush-one {
        top: 50%;
        width:auto;
    }
}

@media (min-width: 1400px) {
    .flush-one {
        top: 40%;
        width:auto;
    }
}

.work-cover {
    position: relative; 
    margin-top: 10px;
}

@media (min-width: 576px) {
    .work-cover {
        position: relative; 
        top: -60px;
    }
}

.inside-work {
    margin-top: -120px
}
@media (min-width: 576px) {
    .inside-work {
        margin-top: -50px
    }
}
@media (min-width: 992px) {
    .inside-work {
        margin-top: -100px
    }
}
@media (min-width: 1200px) {
    .inside-work {
        margin-top: -110px
    }
}

.flush-two {
    top: -20px;
}
@media (min-width: 576px) {
    .flush-two {
        top: -50px;
    }
}

.tx-blnc { text-wrap: balance; }
.tx-prty { text-wrap: pretty; }

.bg-darkblue { background-color: #2A3780; }
.bg-beige { background-color: #DCD3C9; }
.bg-quote {
    background-image: url(../images/quote.svg);
    background-repeat: no-repeat;
    background-position: 80px 20px;
}

.rotate-intel {
    transform: rotate(-90deg);
    position: absolute;
    top: 50%;
    left: -80px;
}

.hr-100 {
  /* Set the width and center it */
  width: 100px;
  margin: 20px auto; /* 'auto' handles the horizontal centering */
  
  /* Define the dashed style and color */
  border: none;              /* Remove default browser styling */
  border-top: 1px dashed #ffffff; /* Adjust thickness (2px) as needed */
  
  /* Ensure visibility if the background is dark */
  opacity: 1; 
}
.hr-250 {
  /* Set the width and center it */
  width: 250px;
  margin: 5px auto; /* 'auto' handles the horizontal centering */
  
  /* Define the dashed style and color */
  border: none;              /* Remove default browser styling */
  border-top: 1px solid #D0B2A4; /* Adjust thickness (2px) as needed */
  
  /* Ensure visibility if the background is dark */
  opacity: 1; 
}

.abt-strok {
    top: -40px;
}

@media (min-width: 567px) {
    .abt-strok {
        top: -110px;
    }
}

@media (min-width: 768px) {
    .abt-strok {
        top: -130px;
    }
}
@media (min-width: 1200px) {
    .abt-strok {
        top: -130px;
    }
}

.footer ul li a {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 9px;
    text-decoration: none;
    color: #32385A;
}

#last {
    position: relative;
    width: 100%;
    /* Ensure enough height for mobile content */
    min-height: 700px; 
    background-image: url('../images/bg-grad-02-sm.png');
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Desktop background switch */
@media (min-width: 567px) {
    #last {
        min-height: 400px;
        background-image: url('../images/bg-grad-02.png');
    }
}

/* Main CTA area - centered in the flex container */
.cta-content {
    flex-grow: 1;
    display: flex;
    align-items: top;
    justify-content: center;
    z-index: 2;
    padding: 4rem 0;
}
@media (min-width: 768px) {
    .cta-content {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        z-index: 2;
        padding: 2rem 0;
    }
}

@media (min-width: 992px) {
    .cta-content {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
        padding: 2rem 0;
    }
}

.foot-cover {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

/* Mobile positioning for cover: bottom right but small */

@media (max-width: 575.98px) {
    .foot-cover {
        bottom: 15%;
        right: -20px;
        width: 94%;
    }
}

@media (min-width: 576px) {
    .foot-cover {
        bottom: 15%;
        right: -20px;
        width: 74%;
    }
}

        /* Tablet/Desktop positioning for cover */
@media (min-width: 768px) {
    .foot-cover {
        top: 150px;
        right: 0;
        width: 30%;
        opacity: 1;
    }
}
@media (min-width: 992px) {
    .foot-cover {
        top: 150px;
        right: 0;
        width: 40%;
        opacity: 1;
    }
}

@media (min-width: 1200px) {
    .foot-cover {
        top: 100px;
        right: 0;
        width: auto;
        opacity: 1;
    }
}

@media (min-width: 1400px) {}

.hover-lift {
    transition: transform 0.4s;
    display: inline-block;
}

.hover-lift:hover {
    transform: translateY(-3px); 
}

/***flickity***/
.carousel { 
    color: #000;
}

.carousel-cell {
    width: 60%;
    height: 280px;
    margin-right: 10px;
    background: #FFBB00;
    border-radius: 20px;
    counter-increment: gallery-cell;
    text-align: left;
    padding: 30px;
    color: #000;
    transition: all ease 0.4s;
    margin-bottom: 10px;
}

.carousel-cell:hover {
    color: #fff;
    box-shadow: 0 2px 5px 3px rgba(0,0,0,0.15);
}

@media (min-width: 567px) {
    .carousel-cell {
        width: 42%;
        height: 270px;
    }
}

@media (min-width: 768px) {
    .carousel-cell {
        width: 38%;
        height: 260px;
    }
}

@media (min-width: 992px) {
    .carousel-cell {
        width: 34%;
        height: 250px;
    }
}

@media (min-width: 1200px) {
    .carousel-cell {
        width: 30%;
        height: 240px;
    }
}

.carousel-cell .p-18-sb {
    line-height: 1.5rem;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  align-items: center;
  /**content: counter(gallery-cell);**/
  line-height: 200px;
  font-size: 80px;
  color: white;
}

/***Bento***/
/***wild bento-grid***/


.wild-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows:repeat(2, 280px);
    grid-gap: 12px;
    padding: 8px 1px;
}

.wild-item {
    position: relative;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    /**justify-content: flex-end;**/
    align-items: flex-start;
    text-align: left;
    transition: all 0.4s ease;
    background-color:white;
    color: #2A3780;
    overflow: hidden;
    padding: 30px;
}

.wild-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color:#2A3780;
    color: #fff;
}

.wild-item p {
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.75rem;
}

.wild-item-1 {
    grid-column: span 3;
    grid-row: span 2;
}

.wild-item-2 {
    grid-column: span 3; 
    grid-row: span 1;
}

.wild-item-3 {
    grid-column: span 3;
    grid-row: span 1;
}

.wild-item-4 {
    grid-column: span 3;
    grid-row: span 2;
}

.wild-item-5 {
    grid-column: span 6;
    
}   
        
@media (max-width: 576px) {
        
    .wild-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows:repeat(3, 260px);
        grid-gap: 15px;
        padding: 8px 1px;
    }
    
    .wild-item p {
    font-size: 1rem;
    line-height: 1.5rem;
}

    .wild-item-1 {
        grid-column: span 3;
        grid-row: span 1;
    }

    .wild-item-2 {
        grid-column: span 3;
        grid-row: span 1;
    }

    .wild-item-3 {
        grid-column: span 3;
        grid-row: span 1;
    }

    .wild-item-4 {
        grid-column: span 3;
        grid-row: span 1;
    }

    .wild-item-5 {
        grid-column: span 6;
        grid-row: span 1;
    }

}

@media (min-width: 577px) and (max-width: 992px) {
            
    .wild-grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows:repeat(3, 240px);
        grid-gap: 15px;
        padding: 8px 1px;
    }

    .wild-item-1 {
        grid-column: span 3;
        grid-row: span 2;
    }
            
    .wild-item-2 {
        grid-column: span 3;
        grid-row: span 1;
    }
            
    .wild-item-3 {
        grid-column: span 3;
        grid-row: span 1;
    }
            
    .wild-item-4 {
        grid-column: span 3;
        grid-row: span 1;
    }
            
    .wild-item-5 {
        grid-column: span 3;
        grid-row: span 1;
    } 
}

@media (min-width: 993px) and (max-width: 1200px) {
        
    .wild-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows:repeat(2, 240px);
        grid-gap: 15px;
        padding: 8px 1px;
    }

    .wild-item-1 {
        grid-column: span 4;
        grid-row: span 2;
    }
        
    .wild-item-2 {
        grid-column: span 4;
        grid-row: span 1;
    }
        
    .wild-item-3 {
        grid-column: span 4;
        grid-row: span 1;
    }
        
    .wild-item-4 {
        grid-column: span 4;
        grid-row: span 1;
    }
        
    .wild-item-5 {
        grid-column: span 4;
        grid-row: span 1;
    }
               
} 

/****portfolio grid****/

:root {
    --hover-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Portfolio Card Styling */
.portfolio-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
    cursor: pointer;
    height: 100%;
}

.portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--hover-shadow);
}

.portfolio-kad {
    border: none;
    overflow: hidden;
    background: transparent;
    /**box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);**/
    transition: var(--transition);
    cursor: pointer;
    height: 100%;
}
.portfolio-kad:hover {
    transform: translateY(-8px);
    /**box-shadow: var(--hover-shadow);**/
}

.card-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 10/10;
}

.kad-img-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 10/10;
}

.card-img-top {
    transition: var(--transition);
    object-fit: cover;
    height: 100%;
}

.kad-img-top {
    transition: var(--transition);
    object-fit: cover;
    height: 100%;
}

.portfolio-card:hover .card-img-top, .portfolio-kad:hover .kad-img-top {
    transform: scale(1.05);
}

/* Overlay Effect */
.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(37, 99, 235, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
}
.kad-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(37, 99, 235, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition);
    border-radius: 16px;
}

.portfolio-card:hover .card-overlay, .portfolio-kad:hover .kad-overlay {
    opacity: 1;
}

.overlay-text {
    color: white;
    font-weight: 600;
    border: 2px solid white;
    padding: 8px 20px;
    border-radius: 50px;
    transform: translateY(20px);
    transition: var(--transition);
    font-size: 0.875rem;    
}

.portfolio-card:hover .overlay-text, .portfolio-kad:hover .overlay-text {
    transform: translateY(0);
}

.card-body {
    padding: 1.5rem;
    text-align: left;
}

.kad-body {
    padding: 1rem 0;
    text-align: left;
}

.client-name {
    font-size: 0.725rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.project-task {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.short-desc {
    font-size: 0.825rem;
    color: #64748b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Modal Styling */
.modal-content {
    border: none;
    border-radius: 16px;
}

.modal-header {
    border-bottom: 1px solid #f1f5f9;
    padding: 1.5rem 2rem;
}

.modal-body {
    padding: 2rem;
}

.modal-gallery img {
    border-radius: 12px;
    margin-bottom: 1.5rem;
    width: 100%;
}

.project-meta-box {
    background: #f1f5f9;
    padding: 1.5rem;
    border-radius: 12px;
}

.meta-label {
    font-weight: 700;
    color: #475569;
    font-size: 0.85rem;
    display: block;
    margin-bottom: 0.25rem;
}

/* Badge Styling */
.tech-badge {
    background: #fff;
    color: #2563eb;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
    border: 1px solid #e2e8f0;
}

/*****MARGIN & PADDING EXTRA*****/

.m-6 { margin: 5rem; }
.mt-6 {  margin-top: 5rem !important; }
.mt-7 {  margin-top: 7rem !important; }
.mt-8 {  margin-top: 9rem !important; }
.my-6 {  margin-top: 5rem !important; margin-bottom: 5rem !important;}
.mx-6 {
  margin-left: 5rem !important;
  margin-right: 5rem !important;
}
.my-7 {
  margin-top: 7rem !important;
  margin-bottom: 7rem !important;
}
.p-4-5 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
    padding-left: 2.5rem !important;
    padding-right: 2.5rem !important;
}
.p-6 {  padding: 5rem; }
.p-7 {  padding: 7rem; }
.pt-4-5 {  padding-top: 2rem !important; }
.pt-6 {  padding-top: 5rem !important; }
.pt-7 {  padding-top: 7rem !important; }
.pt-8 {  padding-top: 9rem !important; }
.pt-9 {  padding-top: 11rem !important; }
.pb-6 {  padding-bottom: 5rem !important; }
.pb-7 {  padding-bottom: 7rem !important; }
.pb-8 {  padding-bottom: 9rem !important; }
.pb-9 {  padding-bottom: 11rem !important; }
.px-4-5 {
padding-left: 2rem !important;
padding-right: 2rem !important;
}
.px-6 {
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}
.py-6 {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}
.py-7 {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}
.py-8 {
  padding-top: 7.5rem !important;
  padding-bottom: 7.5rem !important;
}
.py-9 {
  padding-top: 8.5rem !important;
  padding-bottom: 8.5rem !important;
}
.py-10 {
  padding-top: 9.5rem !important;
  padding-bottom: 9.5rem !important;
}

.mt-100 {  margin-top: 0; }
.mt-150 {  margin-top: 75px; }
.mt-200 {  margin-top: 100px; }
.mt-250 {  margin-top: 125px;}
.mt-300 {  margin-top: 150px; }

@media (min-width: 576px) {
  .mt-sm-6 { margin-top: 5rem !important; }
  .mt-sm-7 { margin-top: 7rem !important; }
  .pt-sm-6 { padding-top: 5rem !important;}
  .pt-sm-7 { padding-top: 7rem !important;}
  .pb-sm-6 { padding-bottom: 5rem !important;}
  .pb-sm-7 { padding-bottom: 7rem !important;}
  .px-sm-6 {
      padding-left: 5rem !important;
      padding-right: 5rem !important;
  }
  .py-sm-6 {
      padding-top: 5rem !important;
      padding-bottom: 5rem !important;
  }
  .py-sm-7 {
      padding-top: 7rem !important;
      padding-bottom: 7rem !important;
  }
  .mt-150 {
      margin-top: 150px;
  }
  .mt-200 {
      margin-top: 200px;
  }
  .mt-250 {
      margin-top: 250px;
  }
  .mt-300 {
      margin-top: 300px;
  }
}

@media (min-width: 768px) {
  .mt-md-6 {
      margin-top: 5rem !important;
  }
  .mt-md-7 {
      margin-top: 7rem !important;
  }
  .pt-md-6 {
      padding-top: 5rem !important;
  }
  .pt-md-7 {
      padding-top: 7rem !important;
  }
  .pb-md-6 {
      padding-bottom: 5rem !important;
  }
  .pb-md-7 {
      padding-bottom: 7rem !important;
  }
  .px-md-6 {
      padding-left: 5rem !important;
      padding-right: 5rem !important;
  }
  .py-md-6 {
      padding-top: 5rem !important;
      padding-bottom: 5rem !important;
  }
  .py-md-7 {
      padding-top: 7rem !important;
      padding-bottom: 7rem !important;
  }
}

@media (min-width: 992px) {
      .ms-lg-n4 {
          margin-left: -3rem !important;
      }
      .ms-lg-n5 {
          margin-left: -4rem !important;
      }
      .ms-lg-n6 {
          margin-left: -5rem !important;
      }
      .ms-lg-n8 {
          margin-left: -8rem !important;
      }
      .ms-lg-n10 {
          margin-left: -15rem !important;
      }
      .mt-lg-6 {
          margin-top: 5rem !important;
      }
      .mt-lg-7 {
          margin-top: 7rem !important;
      }
      .mt-lg-8 {
        margin-top: 9rem !important;
      }
      .pt-lg-6 {
          padding-top: 5rem !important;
      }
      .pt-lg-7 {
          padding-top: 7rem !important;
      }
      .pt-lg-8 {
          padding-top: 9rem !important;
      }
      .pt-lg-9 {
          padding-top: 11rem !important;
      }
      .pb-lg-6 {
          padding-bottom: 5rem !important;
      }
      .pb-lg-7 {
          padding-bottom: 7rem !important;
      }
      .pb-lg-8 {
          padding-bottom: 9rem !important;
      }
      .pb-lg-9 {
          padding-bottom: 15.5rem !important;
      }

      .px-lg-6 {
          padding-left: 5rem !important;
          padding-right: 5rem !important;
      }
      .py-lg-6 {
          padding-top: 5rem !important;
          padding-bottom: 5rem !important;
      }
      .px-lg-7 {
          padding-left: 7rem !important;
          padding-right: 7rem !important;
      }
      .py-lg-7 {
          padding-top: 7rem !important;
          padding-bottom: 7rem !important;
      }
      .py-lg-8 {
          padding-top: 7.825rem !important;
          padding-bottom: 7.825rem !important;
      }
      .py-lg-9 {
          padding-top: 8.5rem !important;
          padding-bottom: 8.5rem !important;
      }
      .py-lg-10 {
          padding-top: 9.5rem !important;
          padding-bottom: 9.5rem !important;
      }
      
      .mx-lg-6 {
          margin-left: 5rem !important;
          margin-right: 5rem !important;
      }
      .my-lg-6 {
          margin-top: 5rem !important;
          margin-bottom: 5rem !important;
      }
      .my-lg-7 {
          margin-top: 7rem !important;
          margin-bottom: 7rem !important;
      }
      .mt-100 {
          margin-top: 100px;
      }
  }

@media (min-width: 1200px) {
      .mt-xl-6 {
          margin-top: 5rem !important;
      }
      .mt-xl-7 {
          margin-top: 7rem !important;
      }
      .mt-xl-8 {
        margin-top: 9rem !important;
    }
      .pl-xl-5{ 
          padding-left: 3rem !important;
}
      .pt-xl-6 {
          padding-top: 5rem !important;
      }
      .pt-xl-7 {
          padding-top: 7rem !important;
      }
      .pt-xl-8 {
          padding-top: 9rem !important;
      }
      .pt-xl-9 {
          padding-top: 11rem !important;
      }
      .pb-xl-6 {
          padding-bottom: 5rem !important;
      }
      .pb-xl-7 {
          padding-bottom: 7rem !important;
      }
      .pb-xl-8 {
          padding-bottom: 9rem !important;
      }
      .pb-xl-9 {
          padding-bottom: 15.5rem !important;
      }
      .px-xl-6 {
          padding-left: 5rem !important;
          padding-right: 5rem !important;
      }
      .px-xl-7 {
          padding-left: 7rem !important;
          padding-right: 7rem !important;
      }
      .py-xl-6 {
          padding-top: 5rem !important;
          padding-bottom: 5rem !important;
      }
      .py-xl-7 {
          padding-top: 7rem !important;
          padding-bottom: 7rem !important;
      }
      .py-xl-8 {
          padding-top: 9rem !important;
          padding-bottom: 9rem !important;
      }
      .py-xl-9 {
          padding-top: 11rem !important;
          padding-bottom: 11rem !important;
      }
      .py-xl-10 {
          padding-top: 13rem !important;
          padding-bottom: 13rem !important;
      }
      .pe-xl-6 {
          padding-right: 5rem !important;
      }

  }

@media (min-width: 1400px) {
  .ps-xxl-6 {
      padding-left: 10% !important;
  }
  .pe-xxl-6 {
      padding-right: 12% !important;
  }
  .pt-xxl-6 {
      padding-top: 5rem !important;
  }
  .pt-xxl-7 {
      padding-top: 7rem !important;
  }
  .pt-xxl-8 {
      padding-top: 9rem !important;
  }
  .pt-xxl-9 {
      padding-top: 11rem !important;
  }
  .pb-xxl-6 {
      padding-bottom: 5rem !important;
  }
  .pb-xxl-7 {
      padding-bottom: 7rem !important;
  }
  .pb-xxl-8 {
      padding-bottom: 9rem !important;
  }
  .pb-xxl-9 {
      padding-bottom: 11rem !important;
  }
  .px-xxl-6 {
        padding-left: 7rem !important;
        padding-right: 7rem !important;
  }
  .px-xxl-7 {
        padding-left: 9rem !important;
        padding-right: 9rem !important;
    }
}