:root {
    --primary-theme: #AF2824;
    --secondry-theme: #243C7A;
    --gradiant-them: linear-gradient(180deg, #002767 0%, #000A19 100%);
    --gradiant-theme-2: linear-gradient(180deg, #002767 0%, #000A19 100%);

    --grey: #585353;
    --dark-grey: #2F2E2E;
    --grey-600: #646464;
    --default-color: #fff;
    --black: #000A19;
    --light-black: #1E1E1E;
    --primary-font: "Bitter", serif;
    --secondry-font: "Red Rose", sans-serif;
    --text-0: .0rem;
    --text-1: .1rem;
    --text-2: .2rem;
    --text-3: .3rem;
    --text-4: .4rem;
    --text-5: .5rem;
    --text-6: .6rem;
    --text-7: .7rem;
    --text-8: .8rem;
    --text-9: .9rem;
    --text-10: 1rem;
    --text-11: 1.1rem;
    --text-12: 1.2rem;
    --text-13: 1.3rem;
    --text-14: 1.4rem;
    --text-15: 1.5rem;
    --text-16: 1.6rem;
    --text-17: 1.7rem;
    --text-18: 1.8rem;
    --text-19: 1.9rem;
    --text-20: 2rem;
    --text-21: 2.1rem;
    --text-22: 2.2rem;
    --text-23: 2.3rem;
    --text-24: 2.4rem;
    --text-25: 2.5rem;
    --text-26: 2.6rem;
    --text-27: 2.7rem;
    --text-28: 2.8rem;
    --text-29: 2.9rem;
    --text-30: 3rem;
    --text-31: 3.1rem;
    --text-32: 3.2rem;
    --text-33: 3.3rem;
    --text-34: 3.4rem;
    --text-35: 3.5rem;
    --text-36: 3.6rem;
    --text-37: 3.7rem;
    --text-38: 3.8rem;
    --text-39: 3.9rem;
    --text-40: 4rem;
    --text-41: 4.1rem;
    --text-42: 4.2rem;
    --text-43: 4.3rem;
    --text-44: 4.4rem;
    --text-45: 4.5rem;
    --text-46: 4.6rem;
    --text-47: 4.7rem;
    --text-48: 4.8rem;
    --text-49: 4.9rem;
    --text-50: 5rem;
    --text-51: 5.1rem;
    --text-52: 5.2rem;
    --text-53: 5.3rem;
    --text-54: 5.4rem;
    --text-55: 5.5rem;
    --text-56: 5.6rem;
    --text-57: 5.7rem;
    --text-58: 5.8rem;
    --text-59: 5.9rem;
    --text-60: 6rem;
    --text-61: 6.1rem;
    --text-62: 6.2rem;
    --text-63: 6.3rem;
    --text-64: 6.4rem;
    --text-65: 6.5rem;
    --text-66: 6.6rem;
    --text-67: 6.7rem;
    --text-68: 6.8rem;
    --text-69: 6.9rem;
    --text-70: 7rem;
    --text-71: 7.1rem;
    --text-72: 7.2rem;
    --text-73: 7.3rem;
    --text-74: 7.4rem;
    --text-75: 7.5rem;
    --text-76: 7.6rem;
    --text-77: 7.7rem;
    --text-78: 7.8rem;
    --text-79: 7.9rem;
    --text-80: 8rem;
    --text-81: 8.1rem;
    --text-82: 8.2rem;
    --text-83: 8.3rem;
    --text-84: 8.4rem;
    --text-85: 8.5rem;
    --text-86: 8.6rem;
    --text-87: 8.7rem;
    --text-88: 8.8rem;
    --text-89: 8.9rem;
    --text-90: 9rem;
    --text-91: 9.1rem;
    --text-92: 9.2rem;
    --text-93: 9.3rem;
    --text-94: 9.4rem;
    --text-95: 9.5rem;
    --text-96: 9.6rem;
    --text-97: 9.7rem;
    --text-98: 9.8rem;
    --text-99: 9.9rem;
    --text-100: 10rem;
    --text-101: 10.1rem;
    --text-102: 10.2rem;
    --text-103: 10.3rem;
    --text-104: 10.4rem;
    --text-105: 10.5rem;
    --text-106: 10.6rem;
    --text-107: 10.7rem;
    --text-108: 10.8rem;
    --text-109: 10.9rem;
    --text-110: 11rem;
    --text-111: 11.1rem;
    --text-112: 11.2rem;
    --text-113: 11.3rem;
    --text-114: 11.4rem;
    --text-115: 11.5rem;
    --text-116: 11.6rem;
    --text-117: 11.7rem;
    --text-118: 11.8rem;
    --text-119: 11.9rem;
    --text-120: 12rem;
    --text-121: 12.1rem;
    --text-122: 12.2rem;
    --text-123: 12.3rem;
    --text-124: 12.4rem;
    --text-125: 12.5rem;
    --text-126: 12.6rem;
    --text-127: 12.7rem;
    --text-128: 12.8rem;
    --text-129: 12.9rem;
    --text-130: 13rem;
    --text-131: 13.1rem;
    --text-132: 13.2rem;
    --text-133: 13.3rem;
    --text-134: 13.4rem;
    --text-135: 13.5rem;
    --text-136: 13.6rem;
    --text-137: 13.7rem;
    --text-138: 13.8rem;
    --text-139: 13.9rem;
    --text-140: 14rem;
    --text-141: 14.1rem;
    --text-142: 14.2rem;
    --text-143: 14.3rem;
    --text-144: 14.4rem;
    --text-145: 14.5rem;
    --text-146: 14.6rem;
    --text-147: 14.7rem;
    --text-148: 14.8rem;
    --text-149: 14.9rem;
    --text-150: 15rem;
    font-size: 62.5%;
}

::-webkit-scrollbar {
    width: var(--text-7);
}

::-webkit-scrollbar-track {
    background-color: #ececec;
    border-radius: var(--text-10);
}

::-webkit-scrollbar-thumb {
    background-color: var(--secondry-theme);
    border-radius: var(--text-10);
}

html,
body {
    overflow-x: hidden;
}

body {
    color: var(--light-black);
    font-size: var(--text-20
    );
    font-family: var(--primary-font);
}

img {
    max-width: 100%;
}

.row::after {
    --bs-gutter-x: var(--text-30);
}


h1,
h2,
h3,
h4,
h5,
h6,
ul,
a,
p,
span,
button {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

p {
    font-family: var(--secondry-font);
}

/* header css */
.header {
    padding: var(--text-14) 0;
}

.primary-navs-wrapper {
    flex-grow: 1;
    max-width: 57rem;

}

.primary-navs a {
    font-family: var(--secondry-font);
    color: var(--black);

}

.primary-navs .primary-navs-link.active {
    color: var(--primary-theme);
    font-weight: 700;
}

.header-right-wrapper {
    width: 100%;
    max-width: 39rem;
    padding: var(--text-10) var(--text-36);
    position: relative;
}

.logo img {
    width: 100%;
    max-width: 270px;
}
.header-right-wrapper::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -30px;
    width: 68px;
    height: 181px;
    background-color: #fff;
    transform: rotate(38deg);
}

.hero-banner {
    background: linear-gradient(90deg, rgba(0, 10, 25, 0.73) 42.12%, rgb(153 7 7 / 71%) 90.9%), url(../images/hero-bg.png) no-repeat center / cover;
    padding: var(--text-32) 0 5rem 0;
}

.hero-right-img-wrapper-banner{
    animation: animate2 5s linear infinite;
}

.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(80%);
    transition: transform 0.4s ease, opacity 0.4s ease;
  }
  
  .char.up {
    transform: translateY(-80%);
  }
  
  .char.show {
    opacity: 1;
    transform: translateY(0);
  }
  
  .color-primary {
    color: #fff !important;
  }
  
  .color-accent {
    color: var(--primary-theme);
  }
  
  
  

.sec-hd,
.hero-banner h1 {
    font-size: var(--text-52);
    font-weight: 800;
    color: var(--default-color);

}

/* .sec-hd span,
.hero-banner h1 span {
    color: var(--primary-theme);
} */

.hero-banner p {
    color: var(--default-color);
    font-size: var(--text-32);
    font-weight: 700;
}

.btn {
    font-size: var(--text-16);
    font-family: var(--secondry-font);
    font-weight: 700;
    padding: var(--text-17) var(--text-45);
}

.btn-primary {
    background-color: var(--primary-theme);
    border: none;
}
.sec-btn:hover {
    background-color: var(--secondry-theme) !important;
    color: var(--default-color) !important;
}
.sec-btn:hover .arrow-icon {
    color: var(--default-color) !important;
}

.trd-btn:hover {
    background-color: #001433 !important;
    color: var(--default-color) !important;
}
.trd-btn:hover .arrow-icon {
    color: var(--default-color) !important;
}


.arrow-icon {
    font-size: var(--text-20);
}

.hero-right-img-wrapper {
    max-width: 52rem;
}

.stats-left-img-wrapper::before,
.hero-right-img-wrapper::before {
    content: '';
    position: absolute;
    top: 34px;
    left: -15px;
    width: 100%;
    height: 100%;
    background: url('../images/shape-01.png') no-repeat center/cover;
}

.stats-card-item {
    background-color: var(--default-color);
    clip-path: polygon(0 0, calc(100% - 86px) 0, 100% 86px, 100% 100%, 0 100%);
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: -15rem;
    padding: var(--text-120) var(--text-20);
    height: 100%;
}
.stats-card-item:hover {
    background-color: var(--primary-theme);
    color: var(--default-color);
}
.stats-card-item:hover .stats-img-wrapper img {
    filter: brightness(0) invert(1);
}
.stats-card-item:hover .stats-content {
    color: var(--default-color);
}
.stats-card-item:hover .stats-para {
    color: var(--default-color);
}


.stats-card-item-sec {
    background-color: var(--default-color);
    padding: var(--text-70) var(--text-20);
    clip-path: polygon(0 0, calc(100% - 86px) 0, 100% 86px, 100% 100%, 0 100%);
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-top: -15rem;
    height: 100%;
}
.stats-card-item-sec:hover {
    background-color: var(--primary-theme);
    color: var(--default-color);
}
.stats-card-item-sec:hover .stats-img-wrapper img {
    filter: brightness(0) invert(1);
}
.stats-card-item-sec:hover .stats-content {
    color: var(--default-color);
}
.stats-card-item-sec:hover .stats-para {
    color: var(--default-color);
}



.btn-primary:hover {
    background-color: var(--default-color);
    color: var(--primary-theme);
}
.btn-primary:hover .arrow-icon {
    color: var(--primary-theme);
}

.hd-sm {
    color: var(--black);
    font-weight: 800;
    font-size: var(--text-19);
}


.stats-content {
    color: var(--black);
    font-size: var(--text-24);
}

.sec-gradiant {
    background: var(--gradiant-them);
}

.hd-36 {
    font-weight: 500;
    font-size: var(--text-36);
    color: #FCFCFC;
}

.border-line {
    border: 2px solid var(--primary-theme);
}

.border-line.sm {
    width: 100%;
    max-width: 200px;
}

.sec-hd {
    font-size: var(--text-52);
}

.stats-left-img-wrapper::before {
    top: 8px;
    left: -20px !important;
    max-width: 530px;
    background: url(../images/shape-01.png) no-repeat center;
    z-index: 999;
}

.para {
    color: #FCFCFC;
}

.our-services {
    padding: var(--text-124) 0 20rem 0;
}

.services-card-item {
    padding: var(--text-14) var(--text-13) var(--text-0) var(--text-13);
    z-index: 1;
    clip-path: polygon(98px 0, 100% 0, 100% 100%, 0 100%, 0 86px);

}
.hero-right-img{
    clip-path: polygon(410px 0px, 95% 117px, 95% 94%, 141px 294px, -157px 0)
}

.services-card-wrapper .services-card-img {
    clip-path: polygon(96px 0, 100% 0, 100% 100%, 0 100%, 0 82px)  
}

.services-card-item:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 10, 25, 0) 47.03%, #002767 95.31%);

}

.services-card-item::before {
    content: '';
    background-color: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
}

.services-card-wrapper {
    position: relative;
}

.services-card-shape {
    position: absolute;
    top: 0;
    left: 0px;
    height: 100%;
    width: 100%;
}

.core-values-card-item {
    margin-top: 0;
}


.read-more-link{
    margin-bottom: var(--text-20);
    z-index: 9999;
    position: relative;
}
.read-more-link:hover {
    color: var(--primary-theme);
}
.read-more-link:hover .arrow-icon {
    color: var(--primary-theme);
}

.core-values-img-wrapper {
    background-color: var(--primary-theme);
    padding: var(--text-14) var(--text-20);
    clip-path: polygon(0 0, calc(100% - 37px) 0, 100% 37px, 100% 100%, 0 100%);
    max-width: 15rem;
}

.core-values-sec.sec-gradiant {
    background: linear-gradient(-2deg, #002767 0%, #000A19 100%);
}

.testimonials-card-item {
    clip-path: polygon(0 0, calc(100% - 86px) 0, 100% 86px, 100% 100%, 0 100%);
    background-color: var(--default-color);
    padding: var(--text-35);
    position: relative;
    z-index: 1;
}
.quote {
    font-size: var(--text-80);
    color: #E8E9EA;
}

.profile-image-wrapper {
    position: relative;
    max-width: 12.8rem;
    height: 12.8rem;
}

.profile-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-theme);
    clip-path: polygon(52px 0, 100% 0, 100% 100%, 0 100%, 0 52px);
    z-index: 0;
}

.profile-image-wrapper img {
    position: relative;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(calc(52px + 2px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), 2px calc(100% - 2px), 2px calc(52px + 2px));
    z-index: 1;
    padding: 3px;
}

.tes-profile-wrapper .para {
    max-width: 26rem;
}

.testimonials-slider .slick-slide {
    padding: 0 var(--text-15);
}

/* Slick Dots Customization */
.testimonials-slider .slick-dots {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    align-items: center;
    gap: var(--text-10);
    width: auto !important;
}

.testimonials-slider .slick-dots li {
    width: 40px;
    height: 6px;
    margin: 0;
}

.testimonials-slider .slick-dots li button {
    width: 40px;
    height: 4px;
    padding: 0;
}

.testimonials-slider .slick-dots li button::before {
    content: '';
    width: 40px;
    height: 4px;
    background-color: #fff;
    border-radius: 0;
    opacity: 1;
}

.testimonials-slider .slick-dots li.slick-active button::before {
    background-color: var(--primary-theme);
}

/* .tes-img-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/shape-04.png') no-repeat center/cover;
    z-index: 1;
} */
.contact-us-shape {
    position: absolute;
    top: -15px;
    left: 36px;
    width: 96%;
    height: 95%;
    z-index: 2;
    max-width: 467px;
}

.input-field {
    width: 100%;
    border: 1px solid #F1F1F1;
    background-color: #F5F5F5;
    box-shadow: 1px 2px 2px 0px #0000001F inset;
    padding: var(--text-14) var(--text-14) var(--text-14) var(--text-50);
}

.input-field-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: var(--text-16);
    color: var(--primary-theme);
}

.input-field-icon:last-child {
    display: block;
    padding-top: var(--text-15);
}

.input-field::placeholder {
    color: #B5B8BB;

}

.contact-us-form {
    background-color: var(--default-color);
    padding: var(--text-50);
}

.field-wrapper {
    margin-bottom: var(--text-20);
    position: relative;
}

.submit-btn.btn {
    display: flex;
    gap: var(--text-10);
}

.submit-btn .arrow-icon {
    transform: rotate(45deg);
}

.contact-us-top-shape {
    right: 0;
    left: 320px;
    position: absolute;
    margin: 0 auto;
}

.contact-us-form-shape {
    top: 130px;
    left: 0;
    width: 100%;
    max-width: 740px;
    right: -680px;
    margin: 0 auto;
}

.contact-us-right-top-shape {
    position: absolute;
    top: 110px;
    right: 0;
    width: 100%;
    max-width: 180px;
    right: -10px;
}

.contact-us-right-bottom-shape {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 130px;
    right: -10px;
}

.newsletter-sec {
    background-color: var(--secondry-theme);
}

.newsletter-btn {
    width: 100%;
    max-width: max-content;
}

.newsletter-field-wrapper .input-field {
    padding: var(--text-15) var(--text-20) var(--text-15) var(--text-20);
}

.newsletter-btn i {
    width: var(--text-20);
    height: var(--text-20);
    background-color: var(--default-color);
    color: var(--primary-theme);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--text-2);
}

.footer {
    background: linear-gradient(180deg, #001433 0%, #000A19 100%);
    padding: var(--text-50) 0 var(--text-80) 0;
    font-family: var(--secondry-font);
}

.footer-navs-link {
    color: var(--default-color);
    font-family: var(--secondry-font);
}

.footer-contact-list a span {
    margin-right: var(--text-10);
    color: var(--primary-theme);
    font-size: var(--text-20);
}

.footer-contact-list a {
    color: var(--default-color);
}

.footer-menu-wrapper {
    margin-top: var(--text-50);
}

.footer-social-links li a {
    background-color: var(--primary-theme);
    width: var(--text-40);
    height: var(--text-40);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--text-2);
    color: var(--default-color);
}

.hero-right-img-wrapper::before {
    animation: animate 5s linear infinite;
}

.contact-us-shape,
.stats-left-img-wrapper::before {
    animation: animate2 5s linear infinite;
}

.footer-bottom-wrapper {
    background-color: var(--primary-theme);
    padding: var(--text-20) 0;
}

@keyframes animate {
    0% {
        top: 34px;
        left: -15px;

    }

    50% {
        top: 6px;
        left: 9px;
    }

    100% {
        top: 34px;
        left: -15px;
    }
}

@keyframes animate2 {
    0% {
        top: -17px;
        left: 20px;
    }

    50% {
        top: 10px;
        left: 20px;
    }

    100% {
        top: -17px;
        left: 20px;
    }
}

.contact-us-para {
    max-width: 570px;
}
.services-card-wrapper .services-card-content p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
    overflow: hidden;
}
.close-icon i,
    .menu-icon i {
        display: none;
    }
.stats-card-item:hover .hd-sm {
    color: var(--default-color);
}
.services-card-item {
    overflow: hidden;
    transition: transform 0.5s ease-in-out;
}
.services-card-item:hover  {
    transform: scale(1.05);
}
.services-card-item:hover .read-more-link {
    color: var(--primary-theme) !important;
}
.stats-card-item-sec:hover .para,
.stats-card-item-sec:hover .hd-sm {
    color: var(--default-color) !important;
}
/* responsive css */
@media (max-width: 1366px) {
    :root {
        font-size: 58%;
    }

    .header-right-wrapper {
        max-width: 33rem;
    }

    .header-right-wrapper::before {
        left: -34px;
    }

    .contact-us-para {
        max-width: 470px;
    }

    .contact-us-form-shape {
        max-width: 650px;
        right: -580px;
    }
}

@media (max-width: 1024px) {

    /* <---------mobile menu----------> */
    .close-icon i,
    .menu-icon i {
        display: block;
        z-index: 2;
        background: var(--secondry-theme);
        width: 3.5rem;
        height: 3.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        /* position: absolute;
    top: 38px;
    right: 10px; */
        border-radius: 2px;
    }

    .close-icon i {
        position: absolute;
        top: 2rem;
        right: 2rem;
        border-radius: 100%;
    }

    .primary-navs {
        transform: translateX(-100%);
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: all ease-in-out 1s;
        padding: 4.4rem 0;
        z-index: 2;
    }

    .primary-navs.active {
        transform: translateX(0);
        background-color: #fff;
        width: 70%;
        box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;
        overflow: auto;
        height: 100%;
    }

    .primary-navs a {
        font-size: var(--text-20);
    }

    .menu-icon {
        margin-left: 10px;

    }
}

@media (max-width: 767px) {
    .stats-sec .mb-124 {
        margin-bottom: 0;
    }

    .our-services {
        padding: var(--text-100) 0 10rem 0;
    }

    .py-150 {
        padding-top: var(--text-100) !important;
        padding-bottom: var(--text-100) !important;
    }

    .contact-us-form-shape {
        display: none;
    }

    .contact-us-sec .col-lg-6:last-child {
        padding-top: 0 !important;
    }

    .newsletter-sec .input-field {
        text-align: center;
    }

    .newsletter-sec .btn {
        max-width: 100%;
    }
    
    .header-right-wrapper::before {
        display: none;
    }

}

@media (max-width: 575px) {

    .sec-hd,
    .hero-banner h1 {
        font-size: var(--text-40);
    }
    
    .logo img {
        width: 100%;
        max-width: 170px;
    }
    
}

/* home page css */