@font-face {
    font-family: "space";
    src: url("../../font/space-gotesk.ttf") format("truetype");
    font-style: normal;
    font-display: swap;
}




:host, :root {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-zinc-400: oklch(70.5% .015 286.067);
    --color-zinc-600: oklch(44.2% .017 285.786);
    --color-zinc-900: oklch(21% .006 285.885);
    --color-black: #000;
    --whiteColor: #fff;
    --color-white: #fff;
    --spacing: .25rem;
    --container-sm: 24rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --text-xs: .75rem;
    --text-xs--line-height: 1rem;
    --text-sm: .875rem;
    --text-sm--line-height: 1.25rem;
    --text-base: 1rem;
    --text-base--line-height: 1.5rem;
    --text-lg: 1.125rem;
    --text-lg--line-height: 1.75rem;
    --text-xl: 1.25rem;
    --text-xl--line-height: 1.75rem;
    --text-2xl: 1.5rem;
    --text-2xl--line-height: 1.33333;
    --text-3xl: 1.875rem;
    --text-3xl--line-height: 2.25rem;
    --font-weight-normal: 400;
    --font-weight-medium: 450;
    --font-weight-semibold: 600;
    --font-weight-bold: 550;
    --font-weight-extrabold: 650;
    --font-weight-black: 750;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-mono-font-family: var(--font-mono);
    --gutter: 1rem;
    --margin: 1rem;
    --font-size-button-lg: 1rem;
    --letter-spacing-button-lg: 0;
    --line-height-button-lg: 1.5rem;
    --font-size-button-sm: 1rem;
    --letter-spacing-button-sm: 0;
    --line-height-button-sm: 1.5rem;
    --font-size-t8: .875rem;
    --font-weight-t8: 450;
    --line-height-t8: 1.1375rem;
    --letter-spacing-t8: 0;
    --font-size-t7: 1rem;
    --font-weight-t7: 450;
    --line-height-t7: 1.3rem;
    --letter-spacing-t7: -.05em;
    --font-size-t6: 1.125rem;
    --font-weight-t6: 420;
    --line-height-t6: 1.4625rem;
    --letter-spacing-t6: 0;
    --font-size-t5: 1.375rem;
    --font-weight-t5: 400;
    --line-height-t5: 1.625rem;
    --letter-spacing-t5: -.005em;
    --font-size-t4: 1.625rem;
    --font-weight-t4: 330;
    --line-height-t4: 1.8525rem;
    --letter-spacing-t4: 0;
    --font-size-t3: 1.875rem;
    --font-weight-t3: 330;
    --line-height-t3: 2.1375rem;
    --letter-spacing-t3: 0;
    --font-size-t2: 2.25rem;
    --font-weight-t2: 330;
    --line-height-t2: 2.52rem;
    --letter-spacing-t2: 0;
    --font-size-t1: 2.75rem;
    --font-weight-t1: 330;
    --line-height-t1: 2.97rem;
    --letter-spacing-t1: -.005em;
    --font-size-dsp: 3.5rem;
    --font-weight-dsp: 330;
    --line-height-dsp: 3.78rem;
    --letter-spacing-dsp: -.01em;
    --font-size-body-lg: 1.125rem;
    --line-height-body-lg: 1.575rem;
    --font-weight-body-lg: 400;
    --letter-spacing-body-lg: 0;
    --font-size-body-base: 1rem;
    --line-height-body-base: 1.4rem;
    --font-weight-body-base: 420;
    --letter-spacing-body-base: -.006em;
    --font-size-body-sm: .875rem;
    --line-height-body-sm: 1.1375rem;
    --font-weight-body-sm: 420;
    --letter-spacing-body-sm: 0;
    --space-xs: .25rem;
    --space-sm: .5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 8rem;
    --header-height: 4.5rem;
    --hero-top: var(--header-height);
    --color-shade-05: #fafafa;
    --color-shade-10: #f4f4f5;
    --color-shade-20: #e4e4e7;
    --color-shade-30: #d4d4d8;
    --color-shade-40: #a1a1aa;
    --color-shade-50: #71717a;
    --color-shade-60: #52525b;
    --color-shade-70: #3f3f46;
    --color-shade-90: #18181b;
    --color-shade-95: #0e0e10;
    --color-shade-100: #000;
    --color-rich-black: #02090a;
    --color-link-dark: #9797a2;
    --color-link-dark-hover: #d4d4d8;
    --color-link-dark-active: #a1a1aa;
    --color-link-dark-focus: #fff;
    --color-link-dark-disabled: #71717a;
    --color-pistachio-10: #d4f9e0;
    --color-aloe-10: #c1fbd4;
    --font-neuehaas: NeueHaasGrotesk, Helvetica, Arial, sans-serif;
    --font-bangla: SolaimanLipi, Arial, sans-serif;

    --grid__devMode-4: repeating-linear-gradient(90deg, #0000 -1rem, #0000 0%, #ff450033 0, #ff450033 calc(25% - .75rem));
    --grid__devMode-8: repeating-linear-gradient(90deg, #0000 -1rem, #0000 0%, #ff450033 0, #ff450033 calc(12.5% - .875rem));
    --grid__devMode-12-md: repeating-linear-gradient(90deg, #0000 -1rem, #0000 0%, #ff450033 0, #ff450033 calc(8.3% - .9rem));
    --grid__devMode-12-lg: repeating-linear-gradient(90deg, #0000 -1.5rem, #0000 0%, #ff450033 0, #ff450033 calc(8.3% - 1.35rem));
}


:host, html {
    -webkit-text-size-adjust: 100%;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -moz-tab-size: 4;
    tab-size: 4;
    -webkit-tap-highlight-color: transparent;
    font-family: Inter-Variable,Helvetica,Arial,sans-serif;
    line-height: 1.5;
}


@media (min-width: 900px) {
    :root {
        --font-size-button-lg: 1.125rem;
        --line-height-button-lg: 1.75rem;
        --font-size-b6: .875rem;
        --line-height-b6: 1.3rem;
        --letter-spacing-b6: .02em;
        --font-size-b5: 1rem;
        --line-height-b5: 1.5rem;
        --letter-spacing-b5: .015em;
        --font-size-b4: 1.125rem;
        --line-height-b4: 1.41rem;
        --letter-spacing-b4: .04em;
        --font-size-b3: 1.25rem;
        --line-height-b3: 1.75rem;
        --letter-spacing-b3: .015em;
        --font-size-b2: 1.5rem;
        --line-height-b2: 1.71rem;
        --letter-spacing-b2: .015em;
        --font-size-b1: 1.75rem;
        --line-height-b1: 2.24rem;
        --letter-spacing-b1: .015em;
        --font-size-t7: 1.25rem;
        --line-height-t7: 1.75rem;
        --letter-spacing-t7: .015em;
        --font-weight-t7: 400;
        --font-size-t6: 1.5rem;
        --line-height-t6: 1.8rem;
        --letter-spacing-t6: .01em;
        --font-size-t5: 2rem;
        --line-height-t5: 2.28rem;
        --letter-spacing-t5: .01em;
        --font-size-t4: 3rem;
        --line-height-t4: 3.42rem;
        --letter-spacing-t4: 0;
        --font-size-t3: 3.4375rem;
        --line-height-t3: 4rem;
        --letter-spacing-t3: 0;
        --font-size-t2: 4.375rem;
        --line-height-t2: 4.375rem;
        --letter-spacing-t2: 0;
        --font-size-t1: 6rem;
        --line-height-t1: 5.75rem;
        --letter-spacing-t1: 0;
        --font-size-dsp: var(--font-size-t1);
        --line-height-dsp: var(--font-size-t1);
        --letter-spacing-dsp: var(--letter-spacing-t1);
        --font-size-body-sm: var(--font-size-b4);
        --line-height-body-sm: var(--line-height-b4);
        --letter-spacing-body-sm: var(--letter-spacing-b4);
        --font-size-body-base: var(--font-size-b2);
        --line-height-body-base: var(--line-height-b2);
        --letter-spacing-body-base: var(--letter-spacing-b2);
        --font-size-body-lg: var(--font-size-b1);
        --line-height-body-lg: var(--line-height-b1);
        --letter-spacing-body-lg: var(--letter-spacing-b1);
        --space-xs: .5rem;
        --space-sm: 1rem;
        --space-md: 1.5rem;
        --space-lg: 2rem;
        --space-xl: 2.5rem;
        --space-2xl: 4rem;
        --space-3xl: 5rem;
        --space-4xl: 8rem;
        --space-5xl: 10rem;
        --hero-top: calc(var(--header-height));
    }
}



@font-face {
  font-family: "Helvetica";
  src: url("../../font/helvetica.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}






@font-face {
  font-family: "NeueHaasGrotesk";
  src: url("../../font/neuehaasgrotdisp-medium.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: "NeueHaasGrotesk";
  src: url("../../font/neuehaasgrotdisp-light.otf") format("truetype");
  font-weight: auto;
  font-style: normal;
}

@font-face {
  font-family: "NeueHaasGrotesk";
  src: url("../../font/neuehaasgrotdisp-bold.otf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "NeueHaasGrotesk";
  src: url("../../font/neuehaasgrottextround-italic.otf") format("truetype");
  font-weight: normal;
  font-style: italic;
}



body {
    background-color: #020928;
}

.text-base {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
}
.mr-8 {
    margin-right: calc(var(--spacing)*8);
}

a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
}
.duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
}

.font-primary{
    font-family: var(--font-neuehaas);
}

.py-section{
    padding: 80px 0;
}

.card-lg-title {
    color: #fff;
    font-size: var(--font-size-t5);
    font-weight: var(--font-weight-t5);
    letter-spacing: var(--letter-spacing-t5);
    line-height: var(--line-height-t5) --tw-leading is not defined;
}

.font-bangla{
    font-family: var(--font-bangla);
}

.text-justify{
    text-align: justify;
}

.text-big-heading {
    font-size: var(--font-size-t2);
    font-weight: var(--font-weight-t2);
    letter-spacing: var(--letter-spacing-t2);
    line-height: var(--line-height-t2);
    font-family: var(--font-neuehaas);
    color: #fff;
    margin-bottom: 40px;
}

.big-clip-adds{
    color: var(--color-shade-50);
        font-size: var(--font-size-t3);
    font-weight:  var(--font-weight-t3);
    letter-spacing:  var(--letter-spacing-t3);
    line-height: var(--line-height-t3);
    font-family: var(--font-neuehaas);
    cursor: pointer;
}

.text-t3 {
    font-size: var(--font-size-t3);
    font-weight: var(--tw-font-weight, var(--font-weight-t3));
    letter-spacing: var(--letter-spacing-t3);
    line-height: var(--line-height-t3);
}

.text-heading-clip-add{
    background-image: linear-gradient(126.17deg, #5fd5b6 32.74%, #865cff);
    background-clip: text;
}

.big-clip-adds:hover{
    color: #0000;
}


.line-3 {
    line-clamp: 3;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.swiper {
    width: 100%;
    height: 100%;
}

.template-slide{
    padding-top: 40px;
}

.template-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-slide .slider-image{
    width: 100%;
    height: auto;
    -webkit-box-shadow: 1px 1px 5px #22292f;
    -moz-box-shadow: 1px 1px 5px #22292f;
    box-shadow: 1px 1px 5px #22292f;
}

.slide-relative {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}
.slide-content{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: -1;
}


.temp-name{
    font-size: 22px;
    font-weight: 600;
    font-family: var(--font-neuehaas);
    color: #fff;
}

.link{
    color: #fff;
}

.slide-relative:before {
    content: "";
    background-image: linear-gradient(#0a2c30, #061518 80%);
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    transition-property: opacity;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: 0.3s;
}

.slide-relative:hover:before{
    display: block;
    opacity: 0.95;
}

.slide-relative:hover .slide-content{
    z-index: 120;
}

.heading-lr{
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 20px;
    margin-bottom: 50px;
}

.heading-lr h2{
    margin-bottom: 0;
}

.heading-lr .heading-left{
    width: 60%;
    flex-shrink: 0;
}

.heading-p {
    color: #9797a2 !important;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-body-sm);
    letter-spacing: var(--letter-spacing-body-sm);
    line-height: var(--line-height-body-sm);
}


.transition-all {
    transition-duration: var(--default-transition-duration);
    transition-property: all;
    transition-timing-function:  var(--default-transition-timing-function);
}

.campaign-image{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.campaign-image img{
    width: 100%;
}

.image-front {
    object-position: center;
    object-fit: cover;
    height: 100%;
    max-width: 100%;
    position: absolute;
    display: block;
    vertical-align: middle;
    z-index: 10;
}

.image-back {
    transition-property: opacity;
    transition-timing-function: var(--default-transition-timing-function);
    transition-duration: .3s;
    position: relative;
    opacity: 0;
    object-position: center;
    object-fit: cover;
    height: 100%;
    max-width: 100%;
    display: block;
    vertical-align: middle;
    z-index: 100;
}

.card-campaign:hover .image-back {
    opacity: 1;
}

.campaign-text{
    padding: 40px 0;
}

.heading-text-title {
    color: #fff;
    font-size: var(--font-size-t7);
    font-weight: var(--font-weight-t7);
    letter-spacing: var(--letter-spacing-t7);
    line-height: var(--line-height-t7) --tw-leading is not defined;
}

.heading-text {
    color: #9797a2;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-body-sm);
    letter-spacing: var(--letter-spacing-body-sm);
    line-height: var(--line-height-body-sm);
}


.btn-ring-cta {
    outline-width: medium;
    padding-block: .75rem;
    padding-inline: 1.5rem;
    width: auto;
    transition-duration: .15s;
    transition-property: all;
    transition-timing-function: var(--default-transition-timing-function);
    color: #fff;
    font-weight: 550;
    font-family: Inter-Variable, Helvetica, Arial, sans-serif;
    border: 2px solid #fff;
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
}

.btn-ring-cta:hover {
    color: #fff;
    font-weight: 550;
    font-family: Inter-Variable, Helvetica, Arial, sans-serif;
    border: 2px solid #fff;
}

.text-info-title{
    text-decoration: underline;
}

.heading-left p {
    color: #30deee;
    text-transform: none;
    --tw-font-weight: var(--font-weight-normal);
    font-size: var(--font-size-t7);
    font-weight: var(--tw-font-weight, var(--font-weight-t7));
    letter-spacing: var(--letter-spacing-t7);
    line-height: var(--line-height-t7);
}

.fe-editor-card{
    border-radius: 10px;
    overflow: hidden;
    /*height: 100%;*/
}

.video-container video{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.fe-img-section {
    /*background-image: radial-gradient(#3e4646, #0f3335 40%, #061a1c, #061a1c);*/
     background-image: radial-gradient(#38b000, #008000 15%, #004b23 75%, #004b23);
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card-dark-2{
     background-image: radial-gradient(#38b000, #008000 15%, #004b23 75%, #004b23);
}

.fe-img-section img {
    scale: 1.03;
    height: 100%;
    max-height: 500px;
    max-width: 100%;
    display: block;
    vertical-align: middle;
}

.fe-body{
    background-color: #004b23;
    padding: 2rem;
}

.fe-body p{
    margin-bottom: 0;
}

.card-sm-title{
    color: #fff;
    font-size: var(--font-size-t7);
    font-weight: var(--font-weight-t7);
    letter-spacing: var(--letter-spacing-t7);
    line-height: var(--line-height-t7) --tw-leading is not defined;
}

.card-sm-desc{
    color: #ddd;
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-body-sm);
    letter-spacing: var(--letter-spacing-body-sm);
    line-height: var(--line-height-body-sm);
}

.loc-card {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #061a1c;
    border-color: #1e2c31;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.image-gallery{
    width: 50%;
    flex-shrink: 0;
}



/*slider  */


.country-slide{
  width: 100%;
  padding: 10px;
}

.card-sm-desc strong{
    color: #30deee;
    font-weight: 600 !important;
}

.country-slide .card{
  background: white;
  border-radius: 15px;
  padding: 15px;
  text-align: center;
  width: 250px;
  box-shadow: 0 3px 20px rgba(0,0,0,0.2);
  transition: all .4s ease;
}
.country-slide .card img{
  width:100%;
  border-radius:10px;
  margin-bottom:15px;
}
.country-slide .card button{
  background:#083b35;
  color:white;
  padding:10px 20px;
  border-radius:10px;
  border:none;
}

.country-slide .swiper-slide{
  opacity:.5;
  transform:scale(.5);
}
.country-slide .swiper-slide-active{
  opacity:1;
  transform:scale(1);
}

.bg-loc {
    transition-property: none;
    right: -12rem;
    top: -1rem;
    width: 64%;
}



.blue-section{
    background-color: #000b1f;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.sticky-header.scrolled {
  background: #031c16;          /* scroll এর পরে */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.66);
    z-index: 5000;
}

.sticky-header.active {
  background: #031c16;          /* scroll এর পরে */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.66);
    z-index: 5000;
}


.customizing-app {
    box-shadow: var(--tw-shadow);
    background-color: #010624;
    border: 1px solid #2a1d62;
    padding: 80px 50px 50px 50px ;
    border-radius: 20px;
    height: 600px;
}


.heading-l{
    margin-bottom: 50px;
}

.dev-middle-card {
    position: absolute;
    left: calc(50% - 315px);
    --start: 80%;
    --end: 90%;
    --angle: 180deg;
    -webkit-mask-size: 100% 114%;
    mask-size: 100% 114%;
    width: 630px;
    padding: 13px;
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: auto;
    mask-image: linear-gradient(var(--angle), #0e0e11 var(--start), #0e0e1100 var(--end));
    z-index: 100;
    display: block;
    background-color: #1e2f61;
}

.aspect img{
    width: 100%;
    height: auto;
}
.aspect {
    padding-bottom: 15px;
}

.card-left {
    position: absolute;
    left: calc(25% - 100px);
    mask-size: 100% 114%;
    width: 320px;
    margin-top: 20px;
    padding: 13px;
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: 400px;
    overflow: hidden;
    mask-image: linear-gradient(var(--angle), #0e0e11 var(--start), #0e0e1100 var(--end));
    object-fit: cover;
    z-index: 90;
    background-color: #1e2f61;
}

.card-right{
    position: absolute;
    right: calc(25% - 100px);
    mask-size: 100% 114%;
    width: 320px;
    margin-top: 280px;
    padding: 13px;
    background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    height: 100%;
    max-height: 150px;
    overflow: hidden;
    mask-image: linear-gradient(var(--angle), #0e0e11 var(--start), #0e0e1100 var(--end));
    object-fit: cover;
    z-index: 190;
    background-color: #1e2f61;
}

.green-section {
    background-color: #041e18;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.black-section {
    background-color: #0e0e0e;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.green-section-bg{
     background-color: #041e18;
}

.p-relative{
    position: relative;
    display: block;
}

.text-t4 {
    font-size: var(--font-size-t4);
    font-weight: var(--tw-font-weight, var(--font-weight-t4));
    letter-spacing: var(--letter-spacing-t4);
    line-height: var(--line-height-t4);
}

.text-t5{
    font-size: var(--font-size-t5);
    font-weight: var(--tw-font-weight, var(--font-weight-t5));
    letter-spacing: var(--letter-spacing-t5);
    line-height: var(--line-height-t5);
}

.flex-1 {
    flex: 1 1 0%;
}


.card-numbers{
       border-top: 1px solid #11352d;
}

.card-number-header {
    display: flex;
    gap: 1rem;
    color: #36f4a4;
    font-size: 14px;
    padding-top: 5px;
}

.numbers {
    font-size: var(--font-size-t1);
    font-weight: var(--font-weight-t1);
    letter-spacing: var(--letter-spacing-t1);
    line-height: var(--line-height-t1);
    color: #fff;
}

.numbers span {
    font-size: var(--font-size-t4);
    font-weight: var(--font-weight-t4);
    letter-spacing: var(--letter-spacing-t4);
    line-height: var(--line-height-t4);
}

.text-body-sm {
    border-left: 2px solid #36f4a4;
    color: #99b3ad;
    padding-left: 15px;
    width: 75%;
    margin-top: 60px;
    margin-bottom: 30px;
}

.text-gray-b{
    color: #99b3ad !important;
}

.bg-trans-image{
    width: 100%;
    height: 100%;
    -webkit-background-size: contain;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: end;
}

.img-thumbnail-card{
    width: 400px;
}

.text-gray-p{
   color: #99b3ad;
}

.animation-world-section{
    display: flex;
    justify-content: center;
    align-items: center;
}

.animation-world{
    width: 70%;
    flex-shrink: 0;
}

.green-star {
    background-image: url("../../../assets/img/bg-star.svg");
    width: 100%;
    height: 100%;
    mask-image: linear-gradient(171deg, #fff 25%, #0000 90%), radial-gradient(#fff 50%, #0000 70%);
    z-index: -1;
    position: relative;
}

.globe-img img{
    width: 100%;
}


.anim-text p{
    font-size: 18px;
}


.carousel-card .card{
    padding: 0;
    padding-bottom: 0;
    height: 100%;
}

.carousel-card {
    background-color: #2f2252;
    position: relative;
    mask-image: linear-gradient(171deg, #fff 10%, #2f2252 64%), radial-gradient(#fff 50%, #56408d 70%);
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

.carousel-card .fe-body {
    background-color: #2f2252;
}

.rounded-card-green-shadow{
    background-color: #0b3229;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.card-img{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.card-img img{
    width:  250px;
    height: auto;
}

.fe-body-tr{
    padding: 20px;
}

.ceo-message {
    position: relative;
}

.min-h-ht {
    min-height: 650px;
    padding-bottom: 180px;
}
.ceo-image {
    overflow: hidden;
}

.ceo-image img{
    width: auto;
    border-radius: 20px;
    max-height: 450px;
    height: 100%;
}

.ceo-message-text{
    background-color: #072720;
    border:1px solid rgba(26, 114, 76, 0.65);
    position: absolute;
    display: block;
    bottom: -100px;
    left: 25%;
    padding: 30px 40px;
    color: #fff3fd;
    width: 70%;
    border-radius: 30px;
}

.ceo-message{
    position: relative;
}

.main-message {
    font-size: 24px;
    width: 90%;
    font-family: var(--font-neuehaas);
    margin-bottom: 20px;
}


.form-comment {
    height: 150px !important;
    resize: none;
}

.ceo-name {
    color: #fff;
    font-size: 16px;
}

.big-heading-list{
    list-style: none;
    margin-top: 40px;
}

.big-heading-list li{
    margin-bottom: 20px;
    border-left: 2px solid #36f4a4;
    padding-left: 20px;
}

.big-heading-list .text-head{
    font-size: 32px;
    color: #fff;
}

.big-heading-list p{
    font-size: 16px;
    color: #99b3ad;
}

.one-img{
    width: 100%;
    height: 100%;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

.block-img-section{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.img-two{
    margin-top: 25%;
}

.content-block-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.content-block-center ul{
    list-style: none;
}

.content-block-center ul .number-text-sec{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 10px;
    color: #fff;
}

.number-text-sec .number-sec{
    color: #36f4a4;
    font-size: 32px;
}

.number-text-sec .number-data{
    font-size: 36px;
    text-decoration: underline;
}

.contact-heading{
    display: flex;
    color: #fff;
    gap: 15px;
    font-size: 18px;
    font-weight: 600;
}

.single-contact{
    margin-bottom: 5px;
}


.form-dark .form-control {
    background-color: #041e18;
    border-color: #062f26;
    color: #dee2e6;
}

.form-dark .form-floating > label {
    color: #dee2e6 !important;
    border: 1px solid transparent;
}

.form-dark .form-floating > .form-control:focus ~ label::after:after {
    background-color: transparent;
}

.form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
    position: absolute;
    inset: 1rem 0.375rem;
    z-index: -1;
    height: 1.5em;
    content: "";
    background-color: transparent !important;
    border-radius: var(--bs-border-radius);
}

.form-dark .form-control:focus {
    background-color: #041e18;
    color: #dee2e6;
}


@media (max-width: 767px) {
    .hero-section-video {
        margin-top: -124px;
    }

    .btn-togler{
        border: 1px solid #fff3fd;
        padding: 10px 15px;
    }
    .hero-title{
        font-size: 46px;
        white-space: normal;
        line-height: 1.35;
    }

    .hero-p{
        margin-bottom: 5px;
    }

    .heading-lr{
        flex-direction: column;
        justify-content: start;
    }

    .heading-lr .heading-left {
        width: 100%;
        flex-shrink: 0;
    }

    .image-gallery {
        width: 100%;
        flex-shrink: 0;
    }

    .dev-middle-card {
        position: absolute;
        left: calc(50% - 125px);
        width: 250px;
        padding: 13px;
        z-index: 50;
    }

    .customizing-app {
        box-shadow: var(--tw-shadow);
        background-color: #010624;
        border: 1px solid #2a1d62;
        padding: 25px 25px 25px 25px;
        border-radius: 20px;
        height: 600px;
    }

    .card-left {
        position: absolute;
        left: calc(25% - 70px);
        mask-size: 100% 114%;
        width: 280px;
        margin-top: 70px;
    }

    .card-right {
        position: absolute;
        right: calc(25% - 78px);
        mask-size: 100% 114%;
        width: 280px;
        margin-top: 394px;
    }

    .ceo-message-text {
        background-color: #072720;
        border: 1px solid rgba(26, 114, 76, 0.65);
        position: absolute;
        display: block;
        bottom: 10px;
        left: 15%;
        padding: 20px 20px;
        color: #fff3fd;
        width: 80%;
        border-radius: 30px;
    }

    .main-message {
        font-size: 16px;
        width: 100%;
        font-family: var(--font-neuehaas);
        margin-bottom: 20px;
    }

    .content-left{
        margin-top: 30px;
    }

    .number-text-sec .number-data {
        font-size: 22px;
        text-decoration: underline;
    }

    .copy-list ul {
        padding: 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        margin: 0;
    }
    .social-link{
        margin-top: 10px;
    }
    .animation-world-section{
        flex-direction: column;
    }

    .background-video-content {
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding-left: 10px;
        gap: 30px;
    }

    .feature-card {
        height: 100%;
    }

    .green-star {
        mask-image: linear-gradient(111deg, #fff 25%, #0000 118%), radial-gradient(#fff 50%, #0000 70%);
    }

    .hero-btn, .hero-btn:hover {
        z-index: 8;
        background-color: rgb(253, 253, 253);
        text-transform: uppercase;
        color: rgb(2, 9, 10);
        text-decoration: none;
        letter-spacing: 2px;
        text-align: left;
        line-height: 37px;
        font-weight: 500;
        font-size: 15px;
        padding: 10px 30px;
        backdrop-filter: none;
        filter: none;
        transform-origin: 50% 50%;
        opacity: 1;
        transform: translate(0px, 0px);
        visibility: visible;
        border-radius: 999px;
    }
    
    .footer-copyright{
        text-align: center;
    }

    .copy-list{
        margin-top: 20px;
    }

    .sticky-header{
        padding: 10px 0;
    }

    .big-heading-list .text-head {
        font-size: 20px;
        color: #fff;
    }

    .bd-gutter{
        justify-content: space-between !important;
    }

    .opcanvas-nav{
        z-index: 25000;
        background-color: #041e18;
    }

    .offcanvas {
        z-index: 25000;
    }

    .offcanvas-title{
        color: #fff3fd;
    }

    .bd-links-nav {
        column-count: 1;
    }

    .navbar-toggler svg path{
        fill: rgb(213, 211, 241);
    }

    .bd-navbar-nav{
        justify-content: start !important;
    }

}

.search-icon{
    z-index: 40;
    left: .75rem;
    top: 14px;
    color: #fff3fd;
}

.search-icon svg path {
    fill: #fff3fd;
}

.search-textarea {
    height: 46px;
    overflow-y: hidden;
    --tw-bg-opacity: 1;
    background-color: #031611;
    border-radius: .75rem;
    transition-duration: .3s;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    box-shadow: 1px 10px 50px #507955;
    color: #fff;
    font-size: .875rem;
    line-height: 1.25rem;
    padding-right: 5rem;
    padding-left: 2.5rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    --tw-border-opacity: 1;
    border-color: #106F00 !important;
    width: 100%;
}

.search-textarea:active, .search-textarea:focus, .search-textarea:focus-visible {
    border-color: #106F00 !important;
    box-shadow: 1px 10px 50px #507955 !important;
}

.card-body-img{
    height: 250px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;

}

.fe-card {
    border-radius: 10px;
    overflow: hidden;=
}

.topic-group{
    color: #fff3fd;
    margin-bottom: 50px;
}

.topic-title{
    font-size: 22px;
    margin-bottom: 20px;
    color: #30deee;
    text-transform: none;
}

.topic-group ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.topic-group ul li{
    font-size: 16px;
    margin-bottom: 10px;
}

.footer {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative;
    background-color: #032821;
}

.green-star.footer .container{
    position: relative !important;
    z-index: 100;
}

.details-fe-body{
    border: 1px dashed #106F00;
    padding: 15px;
}






.ihbox-imgbox-wrapper{
    box-shadow:1px 1px 15px #3041b2;
    width: fit-content;
    border-radius: 50%;
    padding: 5px;
    background-color: #0d2896;
    z-index: 500;
}

.ihbox-imgbox {
    text-align: center;
    border: 1px solid #405dd2;
    background-image:  radial-gradient(#0d2896, #061056 15%, #020a31 80%, #02093d);
    width: 350px;
    height: 350px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #133308;
}



.element-title {
    font-size: 21px;
    line-height: 30px;
    margin-bottom: 5px;
    font-family: "Urbanist", sans-serif;
}

.ihbox-imgbox img {
    transform: perspective(100px) rotateY(-3deg);
    border-radius: 15px;
    transition: .9s;
    z-index: 5000;
}


.ihbox-imgbox:hover img {
    transform: rotateY(10deg) !important;
}


.magnetic-wrap{
    display: flex;
    justify-content: center;
}

.single-banner {
    width: 350px;
    /*height: 110px;*/
    background-color: #fff;
    /*border: 8px solid #ee5925;*/
    box-shadow:1px 1px 15px #3041b2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 20px;
}


.banner-img-wrap {
    position: relative;
}

.single-banner:hover{
    box-shadow: 1px 1px 15px #1d2c91;
}


.single-banner{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.dhaka{
    top: -120px;
    left: -340px;
}

.chattogram{
    top: 100px;
    left: -400px;
}

.barisal{
    top: auto;
    left: -320px;
    bottom: -140px;
}


.rangpur {
    top: -120px;
    left: auto;
    right: -340px;
}

.rajshahi{
    top: 100px;
    right:-400px;
    left: auto;
}

.sylhet{
    top: auto;
    right: -320px;
    left: auto;
    bottom: -140px;
}



.link-transparent{
    display: block;
    text-decoration: none;
    color: inherit;
}

.icon img{
    margin-top: 5px;
    width: 60px;
    height: 60px;
    -o-object-fit: contain;
    object-fit: contain;
    margin-bottom: 5px;
}
.icon{
    height: 100%;
}

.division{
    color: #f0f1f3;
    font-family: 'space', sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    vertical-align: middle;
}

.single-banner{
    padding: 15px 10px;
}

.single-banner .link-transparent{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0;
    display: flex;
}

.text-sub {
    font-size: 15px;
    font-weight: 600;
}

.division h2{
    font-size: 22px !important;
    margin-bottom: 5px;
    font-family: var(--font-neuehaas);
    font-weight: 700;
    letter-spacing: 1px;
}

.bg-image{
    background-image: url("../../../assets/img/bg-hero.jpg");
    background-size: cover;
    background-position: center center;
    position: relative;
}

.bg-image:after{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    content: '';
    background: rgba(4, 14, 45, 0.82);
}


.py-section-hero{
    height: 920px;
    min-height: 100vh;
    padding-top: 280px;
    padding-bottom: 10px;
}

.single-banner {
    background-image: radial-gradient(#0d2896, #061056 15%, #020a31 80%, #02093d);
}

.center-logo {
    height: 100px;
    width: auto;
}
.ihbox-imgbox{
    font-family: 'space', sans-serif;
}

.ihbox-imgbox h2{
    font-weight: 700;
}

.motto{
    color: #fff;
    line-height: 1.45;
    font-size: 18px;
}


.text-link{
    font-size: 11px;
    margin-bottom: 5px;
    margin-top: 3px;
}

@media (max-width: 1600px) {

    .ihbox-imgbox {
        text-align: center;
        border: 1px solid #405dd2;
        background-image: radial-gradient(#0d2896, #061056 15%, #020a31 80%, #02093d);
        width: 250px;
        height: 250px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #133308;
    }

    .center-logo {
        height: 60px;
        width: auto;
    }
    
    .ihbox-imgbox h2{
        font-size: 24px;
    }
    
    .motto{
        font-size: 14px;
    }

    .py-section-hero {
        height: 720px;
        min-height: 100vh;
        padding-top: 230px;
        padding-bottom: 100px;
    }

    .single-banner {
        padding: 10px 10px;
    }

    .icon img {
        margin-top: 5px;
        width: 30px;
        height: 30px;
        -o-object-fit: contain;
        object-fit: contain;
    }


    .dhaka {
        top: -80px;
        left: -350px;
    }

    .chattogram {
        top: 80px;
        left: -400px;
    }

    .barisal {
        top: auto;
        left: -320px;
        bottom: -100px;
    }


    .rangpur {
        top: -80px;
        left: auto;
        right: -350px;
    }

    .rajshahi {
        top: 80px;
        right: -400px;
        left: auto;
    }

    .sylhet {
        top: auto;
        right: -350px;
        left: auto;
        bottom: -100px;
    }


    .division h2 {
        font-size: 20px !important;
        margin-bottom: 0;
        font-family: "space ", sans-serif;
    }
}


.feature-card {
    padding: 15px 20px;
    background-color: #fff;
    box-shadow: 1px 1px 15px #3041b2;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 20px;
     background-image: radial-gradient(#030a25, #061056 15%, #020a31 80%, #02093d);
    z-index: 1500;
    display: block;
}

.feature-card:hover{
    box-shadow: 1px 1px 15px #1d2c91;
}

.feature-card-inner{
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-card-inner .logo img{
    width: 60px;
    height: auto;
}

.card-details{
    color: #fff;
}

.name {
    font-size: 20px !important;
    margin-bottom: 0;
    font-weight: 600;
    font-family: "space ", sans-serif;
}

.url{
    font-size: 13px;
    font-weight: 500;
}

.feature-section{
    margin: -120px 0 0;
    padding-bottom: 50px;
    z-index: 1;
    position: relative;
    background-color: #030c32;
}

@media (max-width: 1600px) {
    .feature-section {
        margin: -100px 0 0;
        z-index: 500;
        padding-bottom: 20px;
        position: relative;
        background-color: #040e32;
    }
}

@media (max-width: 1400px) {
    .feature-section {
        padding: 20px 0;
        margin: 0px 0 0;
        z-index: 500;
        position: relative;
        background-color: #040e32;
    }
}

.support-section{
    background-color: #010624;
}

.section-heading{
    text-align: center;
    margin-bottom: 50px;
}

.sub-title{
    font-size: 32px;
    font-weight: 600;
    font-family: 'space', sans-serif;
    color: var(--secColor);
    text-shadow: 1px 1px 5px #020938;
}

.title{
    font-size: 16px;
    font-weight: 500;
    font-family: 'space', sans-serif;
    color: #ddd;
}


.contact-form {
    background-image: radial-gradient(#030a25, #061056 15%, #020a31 80%, #02093d);
    background-color: transparent;
    border-radius: 20px 20px 20px 20px;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #232746;
    transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
    padding: 40px 40px 40px 40px;
}

.contact-form h2 {
    color: #fff;
    font-family: 'space', sans-serif;
}

.contact-form p {
    color: #fff;
    font-family: 'space', sans-serif;
}

.contact-form .form-control {
    background-color: #020938;
    border-color: #212542;
    color: var(--text-color);
}

.contact-form  .form-floating>label {
    color: var(--text-color);
}

.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    color: var(--text-color);
    transform: scale(.85) translateY(-.5rem) translateX(.15rem);
    background-color: transparent;
}

.form-floating > label::after {
    background-color: transparent !important;
}

.form-floating .form-comment {
    height: 150px;
}

.contact-form h1{
    color: #fff;
}

.single-contact{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}


.btn-default{
    padding: 15px 20px;
    margin-right: 29px;
    line-height: 1.2;
    border: 1px solid #b6b6b6;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    font-family: "space";
    transition: all 0.3s ease;
}


.btn-default .right-arrow {
    padding: 12px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    position: absolute;
    right: -25px;
    top: 7%;
    z-index: 100;
    background: var(--secColor);
    color: white;
    transition: all 0.3s ease;
}

.btn-group:hover {
    .right-arrow {
        right: -32px;
        color: var(--secColor);
        background: white;
        border: 1px solid var(--secColor);
    }

    .btn-default {
        background: var(--secColor);
        color: white;
    }
}





.contact-info-card {
    padding: 25px 15px 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.contact-info-card .contact-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.contact-info-card h3 {
    margin-bottom: 24px;
    color: #fff;
}

.contact-info-card p {
    margin-bottom: 10px;
    color: #fff;
}

.bg-chard {
     background-image: radial-gradient(#030a25, #061056 15%, #020a31 80%, #02093d);
}
.bg-mauve {
    background-image: radial-gradient(#030a25, #061056 15%, #020a31 80%, #02093d);
}

.btn.style-one {
    margin-bottom: 8px;
    z-index: 1;
    font-weight: 400;
    padding: 7px 29px 7px 29px;
    border: none;
    overflow: hidden;
    transition: var(--transition);
    z-index: 1 !important;
    font-family: var(--secondaryFont);
}

.btn.style-one:before, .btn.style-one:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transition: all ease 300ms;
}

.btn.style-one:before{
    background: var(--btnColor);
}

.btn.style-one span {
    position: relative;
    padding-right: 20px;
    display: inline-block;
    color: #ddd;
}


.btn.style-one span .icon-left {
    position: absolute;
    top: 5px !important;
    right: -5px;
    transition: all 350ms linear;
}

.btn.style-one .icon-right {
    position: absolute;
    right: 58px;
    top: 12px;
    opacity: 0;
    transition: all 350ms linear;
}
.btn.style-one:after {
    background-color: #1f254d;
}

.btn.style-one:after {
    z-index: -2;
    opacity: 0;
}

.btn.style-one {
    color: var(--whiteColor);
}

.btn.style-one:hover span .icon-left {
    right: 0%;
    opacity: 0;
}

.btn.style-one:hover {
    padding-left: 21px;
    padding-right: 34px;
}

.btn.style-one:hover:before {
    width: 46px;
    height: 100%;
    border-radius: 6px 0 0 6px;
}

.btn.style-one:hover .icon-right {
    right: 14px;
    opacity: 1;
}

.btn.style-one:hover:after {
    opacity: 1;
}


/*faq*/

.faq {
    background-color: #070d31;
    padding: 100px 0px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.faq .accordion-item {
    margin-bottom: 0px;
    background-color: #020938;
    border-radius: 0px;
    border: 1px solid #202442;
    -webkit-box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05);
    box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05);
}

.faq .accordion-item:last-of-type {
    margin-bottom: 0px;
}

.faq .accordion-item .accordion-button:not(.collapsed) {
    color: #dcd9d9;
    background-color: var(--btnColor);
    border-radius: 0px 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.faq .accordion-item .accordion-button:not(.collapsed)::after {
    color:  #fff;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.faq .accordion-item .accordion-button {
    border-radius: 0px;
    color: #b6b9be;
    position: relative;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 20px 30px;
    font-weight: 700;
}


.faq .accordion-item:first-of-type > .accordion-header .accordion-button.collapsed {
    border-radius: 50px;
}

.faq .accordion-item:last-of-type > .accordion-header .accordion-button.collapsed {
    border-radius: 50px;
}

.faq h6 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
    font-weight: 600;
    color: var(--secColor);
}

.faq h6 button {
    padding: 0px;
    font-size: 18px;
    line-height: inherit;
    border: none;
    outline: none;
    -webkit-box-shadow: 0px 0px 0px;
    box-shadow: 0px 0px 0px;
    padding: 16px 0px;
    border-radius: 50px;
    color: var(--secondary-color);
}

.faq .accordion-body {
    padding: 24px 30px;
    border: 0px;
}

.faq .accordion-body p {
    color: var(--text-color);;
}

.faq .faq-thumb-inner {
    min-width: 800px;
    position: relative;
}


.accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b6b9be' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important;
--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b6b9be' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important;
}



.team-single {
    padding: 12px;
    border-radius: 15px;
    border: 1px solid rgba(161, 159, 151, 0.22);
    -webkit-transition: var(--transition);
    transition: var(--transition);
    position: relative;
}

.team-single-thumb {
    position: relative;
    z-index: 1;
    text-align: center;
    height: 400px;
    -webkit-margin-end: 74px;
    margin-inline-end: 74px;
}

.team-single-thumb::before {
    content: "";
    position: absolute;
    inset: 0px;
    width: 90%;
    height: 100%;
    background-color: #07114b;
    -webkit-clip-path: polygon(20% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 0%);
    clip-path: polygon(20% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 0%);
    border-radius: 15px;
    -webkit-transition: var(--transition);
    transition: var(--transition);
    z-index: -1;
}

.team-single-thumb a {
    width: 100%;
    text-align: start;

}

.team-content-wrapper {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px 12px 0px;
    gap: 16px;
}

.team-single-content h5 a{
    margin-top: -4px;
    font-weight: 800;
    font-size: 28px;
    font-family: 'space', sans-serif;
    color: var(--secColor);
    text-decoration: none;
}

.team-single-content p {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
}

.team-single-thumb-social {
    position: absolute;
    top: 60%;
    transform: translateY(-60%);
    inset-inline-end: 24px;
    z-index: 3;
}

.team-single-thumb-social ul {
    list-style: none;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    gap: 10px;
}

.team-single-thumb-social a {
    width: 40px;
    min-width: 40px;
    height: 40px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: var(--secColor);
    background-color: #07114b;
    font-size: 16px;
    border-radius: 50%;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(62, 81, 77, 0.12);
    border-image: initial;
}

.team-single:hover {
    border-color:var(--secColor);
}

.team-single:hover .team-single-thumb::before {
    background-color: #020938;
}
.team-single-thumb img{
    width: 300px;
    height: auto;
    position: absolute;
    left: 10%;
    top: 10%;
}


.address{
    line-height: 1.45;
}

.footer-img{
    width: 100%;
}


.address-section{
    background-color: var(--btnColor);
    color: #fff;
    min-width: 180px;
    height: 100px;
    padding: 1rem;
    text-align: center;
    font-family: "space", sans-serif;
    position: absolute;
    top: -20px;
    right: -20px;
    border-radius: 10px 40px 10px 10px ;
}

.district-name{
    font-size: 22px;
    font-weight: 500;
}

.address{
   font-size: 16px;
    font-weight: 500;
}

@media (max-width: 1400px) {
    .py-section-hero {
        height: 650px;
        min-height: 100vh;
    }

    .name {
    font-size: 18px !important;
    margin-bottom: 0;
    font-weight: 600;
    font-family: "space ", sans-serif;
}

    .btn.style-one{
        font-size: 14px;
    }
}

@media (max-width: 1024px) {
    .py-section-hero {
        height: 720px;
        min-height: auto;
        padding-top: 230px;
        padding-bottom: 100px;
    }
}


@media (max-width: 767px) {
    .nav-custom {
        padding: 8px 0;
    }

    .navbar {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23b6b9be' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }



    .ihbox-imgbox {
        justify-content: center;
        box-shadow: 1px 1px 10px #3041b2;
        width: 80px;
        height: 80px;
    }
    
    .team-single-content p{
        font-size: 14px;
    }

    .motto{
        display: none;
    }

    .ihbox-imgbox img {
        display: none;
    }

    .ihbox-imgbox-wrapper {
        box-shadow: none;
        width: fit-content;
        border-radius: 50%;
        padding: 5px;
        background-color: transparent;
        z-index: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 30px;
    }

    .ihbox-imgbox h2 {
        font-size: 16px;
        line-height: 1.25;
        margin-top: 5px;
    }

    .py-section-hero {
        height: auto;
        min-height: 100vh;
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .contact-form{
        padding: 30px 20px;
    }

    .single-banner {
        padding: 8px 4px 2px 4px;
        width: 115px;
        height: 85px;
        background-color: #fff;
        box-shadow: 1px 1px 5px #3041b2;
        border-radius: 5px;
    }

    .division {
        color: #f0f1f3;
        font-family: 'space', sans-serif;
        display: flex;
        flex-direction: column;
        vertical-align: middle;
    }

    .single-banner-inne{
        gap: 5px;
        flex-direction: row !important;
    }

    .division h2 {
        font-size: 14px !important;
    }

    .icon{
        display: none;
    }
    
    .dhaka {
        top: -100px;
        left: -100px;
    }

    .chattogram {
        top: 2px;
        left: -124px;
    }

    .barisal {
        top: auto;
        left: -100px;
        bottom: -100px;
    }

    .rangpur {
        top: -100px;
        left: auto;
        right: -100px;
    }

    .rajshahi {
        top: 2px;
        right: -124px;
        left: auto;
    }

    .sylhet {
        top: auto;
        right: -100px;
        left: auto;
        bottom: -100px;
    }

    .feature-section {
        padding: 20px 0;
        margin: 0px 0 0;
        z-index: 99;
        position: relative;
        background-color: #040e32;
    }

    
    .text-sub{
        font-size: 10px;
        line-height: 1.25;
        margin-bottom: 2px;
        margin-top: 5px;
    }

    .text-link{
        margin-top: 0;
        line-height: 1;
    }


    .team-single-thumb::before {
        content: "";
        position: absolute;
        inset: 0px;
        width: 100%;
        height: 100%;
        background-color: #07114b;
        -webkit-clip-path: polygon(20% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 0%);
        clip-path: polygon(20% 0%, 100% 50%, 100% 100%, 0% 100%, 0% 0%);
        border-radius: 15px;
        -webkit-transition: var(--transition);
        transition: var(--transition);
        z-index: -1;
    }

    .team-single-thumb img {
        width: 160px;
        height: auto;
        position: absolute;
        left: 7%;
        top: 0%;
    }

    .team-single-thumb {
        position: relative;
        z-index: 1;
        text-align: center;
        height: 180px;
        -webkit-margin-end: 74px;
        margin-inline-end: 74px;
    }

    .team-single{
        padding-top: 80px;
    }

    .district-name {
        font-size: 18px;
        font-weight: 500;
    }

    .address {
        font-size: 14px;
        font-weight: 500;
    }

    .address-section {
        background-color: var(--secColor);
        color: #fff;
        min-width: 180px;
        height: 80px;
        padding: 1rem;
        text-align: center;
        font-family: "space", sans-serif;
        position: absolute;
        top: -20px;
        right: -5px;
        border-radius: 10px 40px 10px 10px;
    }

    .team-single-thumb-social {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        inset-inline-end: 24px;
        z-index: 3;
    }

    .team-single-wrapper {
        margin-top: 50px;
    }

    .offcanvas, .offcanvas-body {
        z-index: 500000;
    }

    .py-section-hero {
        min-height: auto;
        padding-top: 230px;
        padding-bottom: 100px;
        z-index: 10;
        height: 450px;
    }
    
    .text-bg-dark{
        background-color: #030d3f !important;
    }

    .border-bottom {
        border-bottom: var(--bs-border-width) var(--bs-border-style) #222 !important;
    }


    .feature-card {
        padding: 12px 8px;
        background-color: #fff;
        box-shadow: 1px 1px 5px #3041b2;
        border-radius: 5px;
        background-image: radial-gradient(#030a25, #061056 15%, #020a31 80%, #02093d);
        z-index: 1500;
        display: flex;
        width: 100%;
        justify-content: center;
    }

    .feature-card-inner .logo img {
        width: 30px;
        height: 100%;
    }

    .single-banner .link-transparent{
        height: 100%;
    }

    .name {
        font-size: 13px !important;
        margin-bottom: 0;
        font-weight: 600;
        font-family: "space ", sans-serif;
    }
    
    .url{
        font-size: 11px;
    }
    
    .card-details{
        text-align: center;
    }

    .feature-card-inner {
        gap: 5px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

}


.section-content{
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}

.faq-content {
    min-height: 520px;
}

.info-icon{
    color: var(--secColor);
    padding-right: 5px;
}