@font-face {
  font-family: "Cerebri Sans";
  src: url("../Font/CerebriSans-Regular.woff2") format("woff2"),
       url("../Font/CerebriSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cerebri Sans";
  src: url("../Font/CerebriSans-SemiBold.woff2") format("woff2"),
       url("../Font/CerebriSans-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --text: #FFFFFF;
    --subtitle: #C4C4C4;
    --primary:#1262FF;
    --first-btn: #272438;
    --second-btn: linear-gradient(90deg, #82E8FF 0%, #1262FF 100%);
    --yellow: #FFB730;
    --border: #454064;
    --color: transparent;
}
.row{
    padding: 0 !important;
    margin: 0 !important;
}
.container{
    padding: 0;
}
body{
    background: #191724;
    font-family: 'Cerebri Sans',sans-serif;
}
html{
    scroll-behavior:smooth;
}
img{
    max-width:100%;
    display:block;
}
ul{   
    padding:0;
    margin:0;
}
li{
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--text);
}
a{
    text-decoration:none;
    transition:var(--transition);
}
button{
    border:none;
    background:none;
    cursor:pointer;
}
input,
textarea{
    outline:none;
    box-shadow:none !important;
}

h1,h2,h3,h4,h5,h6,p{
    margin: 0;
    padding: 0;
}
h1{
    font-size: 90px;
    line-height: 105px;
    font-weight: 600;
    color: var(--text);
}
h2{
    font-size: 50px;
    line-height: 58px;
    font-weight: 600;
    color: var(--text);
}
h3{
    font-size: 40px;
    line-height: 48px;
    font-weight: 600;
    color: var(--text);   
}
h5{
    font-size: 30px;
    line-height: 38px;
    font-weight: 600;
    color: var(--text);
}
h6{
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    color: var(--text);
}
p{
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: var(--subtitle);
}
span{
    font-size: 90px;
    line-height: 98px;
    font-weight: 600;
    color: var(--yellow);
}
a{
    font-size: 18px;
    line-height: 26px;
    font-weight: 600;
    color: var(--text);
}
@media (max-width:1280px){
    h2{
        font-size: 44px;
        line-height: 52px;
    }
    h5{
        font-size: 28px;
        line-height: 36px;
    }
    h6{
        font-size: 22px;
        line-height: 30px;
    }
}
@media (max-width:1200px) and (min-width:1025px){
    h2{
        font-size: 40px;
        line-height: 48px;
    }
    h5{
        font-size: 26px;
        line-height: 34px;
    }
    h6{
        font-size: 20px;
        line-height: 28px;
    }
    p{
        font-size: 18px;
        line-height: 26px;
    }
}
@media (max-width:1024px){
    h2{
        font-size: 36px;
        line-height: 44px;
    }
    h5{
        font-size: 24px;
        line-height: 32px;
    }
    h6{
        font-size: 20px;
        line-height: 28px;
    }
    p{
        font-size: 16px;
        line-height: 24px;
    }
}
@media (max-width:880px) and (min-width:768px){
    h2{
        font-size: 34px;
        line-height: 42px;
    }
    h5{
        font-size: 22px;
        line-height: 28px;
    }
    h6{
        font-size: 18px;
        line-height: 26px;
    }
}
@media (max-width:767px){
    h2{
        font-size: 28px;
        line-height: 36px;
    }
    h5{
        font-size: 20px;
        line-height: 28px;
    }
}

section{
    padding: 100px 15px;
}
@media (max-width:1440px){
    section{
        padding: 80px 15px;
    }
}
@media (max-width:1280px){
    section{
        padding: 70px 15px;
    }
}
@media (max-width:1024px){
    section{
        padding: 60px 15px;
    }
}
@media (max-width:767px){
    section{
        padding: 50px 15px;
    }
}
@media (max-width:480px){
    section{
        padding: 40px 15px;
    }
}
/* Button */
.btn-primary,
.btn-secondary{
    border-radius: 50px;
    border: 1px solid var(--border);
    padding: 14px 30px;
    background: var(--first-btn);
}
.btn-secondary{
    background: var(--second-btn);
}
.btn-primary:hover{
    background: var(--second-btn);
}
.btn-secondary:hover{
    background: var(--first-btn);
}
@media screen and (max-width:1199px) {
    .btn-primary,
    .btn-secondary{
        padding: 8px 25px;
    }
}
@media screen and (max-width:767px) {
    #contact,
    #login{
        display: none;
    }
}
/* Header Start */
.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
}
.header.scrolled {
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}
.navbar{
    padding: 0 !important;
    height: 100px;
    padding: 10px 0 !important;
}
.header .navbar .container{
    width: 100%;
    max-width: 1620px;
    padding: 0 15px;
}
.navbar-brand{
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    max-width: 200px;
}
.header .header-menu{
    display: flex;
    gap: 100px;
}
.navbar-expand-md .navbar-nav{
    gap: 50px;
}
.navbar-expand-md .navbar-nav .nav-link{
    padding: 0 !important;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.navbar-expand-md .navbar-nav .nav-link.active,
.navbar-expand-md .navbar-nav .nav-link:hover{
    color: var(--primary);
}
.navbar-nav .nav-item.dropdown {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
}
.navbar-nav .dropdown-toggle::after {
    display: none;
}
.navbar-nav .dropdown-arrow {
    background: none;
    border: 0;
    padding: 0 0 0 6px;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}
.navbar-nav .dropdown-icon {
    font-size: 18px;
    color: inherit;
    transition: transform 0.3s ease, color 0.3s ease;
}
.navbar-nav .dropdown-menu {
    border: 0;
    border-radius: 4px;
    min-width: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.navbar-nav .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
}

.navbar-nav .dropdown-item {
    padding: 8px 15px;
    font-size: 18px;
    color: var(--text);
}
.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item.active {
    background: transparent;
    color: var(--primary);
}
.navbar-nav .dropdown-arrow[aria-expanded="true"] .dropdown-icon,
.navbar-nav .dropdown:hover .dropdown-icon{
    color: var(--primary);
    transform: rotate(180deg);
}
.navbar-nav .dropdown:has(> .nav-link.active) .dropdown-icon {
   color: var(--primary);
}
.navbar-nav .dropdown > .dropdown-menu {
    top: 100%;
    background: var(--border);
    padding: 0;
}
.navbar-nav .dropdown:hover > .dropdown-menu {
    display: block;
}
.navbar-nav .dropdown.force-closed > .dropdown-menu {
    display: none !important;
}
.navbar-nav .dropdown.force-closed .dropdown-icon {
    transform: none;
}
.header .btn-header{
    display: flex;
    gap: 20px;
}
.header .navbar-toggler {
    border: 0;
    padding: 0 !important;
    box-shadow: none;
}
.header .navbar-toggler:focus {
    box-shadow: none;
}
.header .navbar-toggler i {
    font-size: 22px;
    color: white;
}
.menu-close-icon {
    display: none;
}
.navbar-toggler[aria-expanded="true"] .menu-open-icon {
    display: none;
}
.navbar-toggler[aria-expanded="true"] .menu-close-icon {
    display: inline-block;
}
@media screen and (max-width:1440px) {
    .header .header-menu{
        gap: 40px;
    }
}
@media screen and (max-width:1199px) {
    .navbar-expand-md .navbar-nav{
        gap: 20px;
    }
    .navbar-brand {
        max-width: 170px;
    }
    .navbar-expand-md .navbar-nav .nav-link,
    .dropdown-menu.show li a,
    .navbar-nav .dropdown-item{
        font-size: 16px;
    }
}
@media screen and (max-width:1024px) {
    .navbar{
        height: 80px;
    }
    .header .navbar-collapse{
        display: none !important;
    }
    .header .navbar-toggler{
        display: block !important;
    }
    .header .btn-header{
        display: flex;
        flex: 0 0 auto;
    }
    .header .navbar-collapse.show{
        display: block !important;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #191724;
        padding: 10px;
    }
    .header .navbar-collapse.show .navbar-nav{
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 15px;
    }
    .header .navbar-collapse.show .nav-item {
        width: 100%;
        text-align: center;
    }
    .header .navbar-collapse.show .nav-link {
        display: block;
    }
    .navbar-nav .dropdown-item{
        padding: 8px;
    }
    .navbar-nav .dropdown-menu{
        max-width: 80px;
    }
    .header .nav-item.dropdown {
        position: relative;
    }
    .header .nav-item.dropdown .dropdown-menu {
        position: absolute !important;
        top: 100%;
        left: 60% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(8px) !important;
        margin: 0 !important;
    }
    .header .nav-item.dropdown .dropdown-menu.show {
        transform: translateX(-50%) translateY(0) !important;
    }
    .header .navbar-nav .dropdown:hover > .dropdown-menu:not(.show) {
        display: none !important;
    }
    .header .navbar-nav .dropdown > .dropdown-menu.show {
        display: block !important;
    }
    .header .navbar-nav .dropdown:hover .dropdown-arrow[aria-expanded="false"] .dropdown-icon {
        transform: none;
    }
}
@media screen and (max-width:480px) {
    .navbar-expand-md .navbar-nav .nav-link,
    .dropdown-menu.show li a,
    .navbar-nav .dropdown-item{
        font-size: 14px;
    }
    .header .navbar-collapse.show .navbar-nav{
        gap: 10px;
    }
    .navbar-nav .dropdown-icon{
        font-size: 16px;
    }
}
/* Header End */

/* Hero Section Start*/
.hero-section{
    background-image: url(../image/bg-hero-home1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    object-fit: cover;
    height: 100%;
    min-height: 855px;
    padding: 226px 15px 130px;
}
.hero-section .container{
    width: 100%;
    max-width: 1460px;
    margin-left: 300px;
}
.hero-section .hero-content{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.hero-section .hero-content .hero-title .title{
    color: transparent;
    -webkit-text-stroke: 2px var(--text);
}
.hero-section .hero-content .hero-btn {
    display: flex;
    gap: 20px;
    align-self: flex-start;
}
.hero-section .hero-img{
    width: 100%;
}

/* .hero-img img {
    max-width: 100%;
    height: auto;
    animation: heroSway 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes heroSway {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%      { transform: translateY(-15px) rotate(2deg); }
    50%      { transform: translateY(-25px) rotate(0deg); }
    75%      { transform: translateY(-10px) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-img img { animation: none; }
} */

@media screen and (max-width:1760px){
    .hero-section .container{
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width:1399px) and (min-width:1280px) {
    .hero-section{
        padding: 145px 15px 0;
        min-height: 690px;
    }
    .hero-section .hero-content .hero-title h1,
    .hero-section .hero-content .hero-title span{
        font-size: 55px;
        line-height: 63px;
    }
}
@media (max-width:1279px) and (min-width:1025px) {
    .hero-section{
        min-height: 590px;
        padding: 150px 15px 0;
    }
    .hero-section .hero-content .hero-title h1, 
    .hero-section .hero-content .hero-title span {
        font-size: 45px;
        line-height: 53px;
    }
}
@media (max-width:1024px) and (min-width:768px){
    .hero-section{
        min-height: 470px;
        padding: 150px 15px 0;
    }
    .hero-section .hero-content .hero-title h1, 
    .hero-section .hero-content .hero-title span {
        font-size: 40px;
        line-height: 48px;
    }
    .hero-section .hero-content{
        gap: 20px;
        padding-bottom: 20px;
    }
    .hero-section .hero-img{
        max-width: 70%;
    }
}
@media (max-width:767px) and (min-width:481px){
    .hero-section .hero-content .hero-title h1, 
    .hero-section .hero-content .hero-title span {
        font-size: 30px;
        line-height: 38px;
        text-align: center;
    }
     .hero-section{
        min-height: 470px;
        padding: 100px 15px 0;
    }
    .hero-section .hero-content .hero-title .title{
        -webkit-text-stroke: 1px var(--text);
    }
    .hero-section .hero-content p{
        text-align: center;
    }
    .hero-section .hero-content .hero-btn{
        align-self: center;
    }
    .hero-section .hero-img{
        max-width: 60%;
    }
    .hero-section .hero-content{
        gap: 20px;
        padding-bottom: 20px;
    }
}
@media (max-width:480px){
    .hero-section .hero-content .hero-title h1, 
    .hero-section .hero-content .hero-title span {
        font-size: 30px;
        line-height: 38px;
        text-align: center;
    }
     .hero-section{
        min-height: 470px;
        padding: 100px 15px 0;
    }
    .hero-section .hero-content .hero-title .title{
        -webkit-text-stroke: 1px var(--text);
    }
    .hero-section .hero-content p{
        text-align: center;
    }
    .hero-section .hero-content .hero-btn{
        align-self: center;
    }
    .hero-section .hero-img{
        max-width: 60%;
    }
    .hero-section .hero-content{
        gap: 20px;
        padding-bottom: 20px;
    }
}
@media (max-width:400px) {
    .hero-section .hero-content .hero-btn{
        flex-direction: column;
        justify-content: center;
        align-self: center;
        width: 100%;
        text-align: center;
    }
}
/* Hero Section End*/

/*Explore the Power of Proton Wallet Start*/
.power-wallet-section .container{
    width: 100%;
    max-width: 1320px;
}
.power-wallet-section .power-wallet{
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.power-wallet-section .power-wallet-grid .power-wallet-box{
    background: linear-gradient(105.5deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.power-wallet-section .power-wallet-grid .power-wallet-box .power-card-title{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
@media (max-width:1280px) {
    .power-wallet-section .power-wallet{
        gap: 16px;
    }
    .power-wallet-section .power-wallet-grid .power-wallet-box{
        padding: 30px;
    }
}
@media (max-width:1024px){
    .power-wallet-section .power-wallet-grid .power-wallet-box .power-wallet-icon{
        max-width: 75px;
    }
    .power-wallet-section .power-wallet-grid .power-wallet-box,
    .power-wallet-section .power-wallet-grid .power-wallet-box .power-card-title{
        gap: 10px;
    }
}
@media (max-width:767px){
    .power-wallet-section .power-wallet .col-lg-6{
        padding: 0 !important;
    }
    .power-wallet-section .power-wallet{
        gap: 6px;
    }
    .power-wallet-section .power-wallet-grid .power-wallet-box{
        align-items: center;
        text-align: center;
    }
}
@media (max-width:480px){
    .power-wallet-section .power-wallet-grid .power-wallet-box .power-wallet-icon{
        max-width: 65px;
    }    
    .power-wallet-section .power-wallet-grid .power-wallet-box{
        padding: 15px;
    }
}
@media (max-width:360px){
    .power-wallet-section .power-wallet-grid .power-wallet-box .power-wallet-icon{
        max-width: 55px;
    }
}
/*Explore the Power of Proton Wallet End*/

/*Your 3-Step Guide to Getting Started Start*/
.guide-getting-section{
    background: #FFFFFF0F;
}
.guide-getting-section .container{
    width: 100%;
    max-width: 1320px;
}
.guide-getting-section .guide-getting{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.guide-getting-points .guide-getting-point {
    display: flex !important;
    flex-direction: column;
    gap: 30px;
    padding-right: 100px;
}
.guide-getting-point .guide-getting-card{
    display: flex;
    gap: 10px;
}
.guide-getting-point .guide-getting-card .guide-getting-number{
    border-radius: 10px;
    padding: 47px 35px;
    background: var(--yellow);
}
.guide-card-title {
    position: relative;
    border-radius: 0 16px 16px 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.guide-card-title::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0 16px 16px 0;
    padding: 1px;
    background: linear-gradient(
        90deg,
        rgba(82, 76, 118, 0) 0%,
        #524C76 64.9%
    );
    -webkit-mask:linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.guide-getting-box{
    width: 100%;
    max-width: 220px;
    height: 100%;
    min-height: 535px;
    border-radius: 10px;
    background: linear-gradient(203.96deg, #9900FF 0%, #FFB730 100%);
}
@media (max-width:1280px) {
    .guide-getting-section .guide-getting{
        gap: 35px;
    }
    .guide-getting-points .guide-getting-point{
        padding-right: 50px;
    }
}
@media (max-width:991px){
    .guide-getting-points .guide-getting-point{
        padding: 0 0 20px;
    }
    .guide-getting-box{
        display: none;
    }
}
@media (max-width:767px){
    .guide-card-title{
        padding: 20px;
        text-align: center;
    }
    .guide-getting-point .guide-getting-card .guide-getting-number{
        padding: 0;
        text-align: center;
    }
    .guide-getting-point .guide-getting-card{
        flex-direction: column;
    }
}
@media (max-width:480px){
    .guide-getting-section .guide-getting{
        gap: 20px;
    }
}
/*Your 3-Step Guide to Getting Started End*/

/*Buy Crypto Instantly Using Proton Wallet Start*/
.crypto-proton-section .container{
    width: 100%;
    max-width: 1320px;
}
.crypto-proton-section .crypto-proton-content{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.crypto-proton-content .crypto-proton-subtitle{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.crypto-proton-content .crypto-proton-subtitle .crypto-proton-des{
        gap: 16px;
}
.crypto-proton-content .crypto-proton-subtitle .crypto-proton-des .crypto-proton-arrow img{
    max-width: 30px;
}
.crypto-proton-content .proton-btn{
    gap: 20px;
}
@media (max-width:1280px){
    .crypto-proton-section .crypto-proton-content{
        gap: 30px;
        padding-left: 50px;
    }
}
@media (max-width:1024px){
    .crypto-proton-section .crypto-proton-content{
        padding-left: 25px;
    }
    .crypto-proton-content .crypto-proton-subtitle .crypto-proton-des .crypto-proton-arrow img{
        max-width: 25px;
    }
}
@media (max-width:991px){
    .crypto-proton-section .crypto-proton-content{
        padding: 0;
    }
    .crypto-proton-content .crypto-proton-subtitle .crypto-proton-des .crypto-proton-arrow{
        align-self: center;
    }
    .crypto-proton-content .crypto-proton-subtitle .crypto-proton-des .crypto-proton-arrow img{
        max-width: 20px;
    }
}
@media (max-width:767px){
    .crypto-proton-section .crypto-proton-img img{
        width: 100%;
    }
    .crypto-proton-content h2{
        text-align: center;
    }
    .crypto-proton-content .crypto-proton-subtitle{
        gap: 0;
    }
    .crypto-proton-section .crypto-proton-content{
        gap: 15px;
    }
    .crypto-proton-content .proton-btn{
        align-self: center;
    }
}
/*Buy Crypto Instantly Using Proton Wallet End*/

/*Create Your Proton Wallet Portfolio Today Start*/
.portfolio-wallet-section{
    background: linear-gradient(203.96deg, #9900FF 0%, #FFB730 100%);
}
.portfolio-wallet-section .container{
    width: 100%;
    max-width: 1520px;
}
.portfolio-wallet-section .wallet-sec{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.wallet-sec .wallet-grid{
    display: flex;
    gap: 40px;
}
.wallet-sec .wallet-grid .col-lg-4{
    width: 31.33%;
}
.wallet-sec .wallet-grid .wallet-box{
    height: 100%;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(105.5deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(100px);
}
.wallet-sec .wallet-grid .wallet-box .wallet-box-title{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.wallet-sec .wallet-grid .wallet-box .wallet-box-title p{
    color: var(--text);
}
@media (max-width:1280px){
    
    .wallet-sec .wallet-grid .wallet-box{
        padding: 30px;
        gap: 15px;
    }
    .wallet-sec .wallet-grid .wallet-box .wallet-box-icon img{
        max-width: 80px;
    }
    .wallet-sec .wallet-grid .wallet-box .wallet-box-title{
        gap: 10px;
    }
}
@media (max-width:1200px) and (min-width:1025px){
    
    .portfolio-wallet-section .wallet-sec{
        gap: 30px;
    }
    .wallet-sec .wallet-grid{
        gap: 25px;
    }
    .wallet-sec .wallet-grid .wallet-box{
        padding: 20px;
    }
}
@media (max-width:1024px){
    .portfolio-wallet-section .wallet-sec{
        gap: 30px;
    }
    .wallet-sec .wallet-grid{
        gap: 20px;
    }
    .wallet-sec .wallet-grid .wallet-box{
        padding: 20px;
    }
    .wallet-sec .wallet-grid .wallet-box .wallet-box-icon img{
        max-width: 70px;
    }
}
@media (max-width:880px) and (min-width:768px){
    
    .wallet-sec .wallet-grid .wallet-box .wallet-box-icon img{
        max-width: 60px;
    }
    .wallet-sec .wallet-grid .wallet-box{
        padding: 15px;
        height: 100%;
        gap: 8px;
    }
}
@media (max-width:767px){
    
    .wallet-sec .wallet-grid .col-lg-4{
        width: 100%;
    }
    .wallet-sec .wallet-grid{
        flex-direction: column;
    }
    .wallet-sec .wallet-grid .wallet-box{
        align-items: center;
        text-align: center;
        padding: 15px;
    }
    .wallet-sec .wallet-grid .wallet-box .wallet-box-icon img{
        max-width: 60px;
    }
    .wallet-sec .wallet-grid .wallet-box .wallet-box-title{
        gap: 8px;
    }
}
/*Create Your Proton Wallet Portfolio Today End*/

/*Team Borad Start*/
.team-section{
    padding-top: 76px;
}
.team-section .container{
    width: 100%;
    max-width: 1320px;
}
.team-section .team-board{
    width: 40%;
    padding-right: 10px !important;
}
.team-section .team-intro-card {
   border-radius: 20px;
   padding: 50px;
   display: flex;
   flex-direction: column;
   gap: 30px;
   background: var(--border);
   height: 100%;
}
.team-section .team-intro-card p{
    color: #ffffff;
}
.team-section .col-lg-2{
    width: 20%;
}
.team-section .team-card {
    height: 100%;
    border-radius: 20px;
    border: 1px solid var(--border);
    padding: 20px;
    gap: 20px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(105.5deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
}
.team-section .team-card .team-name{
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}
#card-3,
#card-8{
    padding-right: 0 !important;
}
#card-4{
    padding-left: 0 !important;
}
@media(max-width:1440px){
    .team-section{
        padding-top: 56px;
    }
}
@media(max-width:1280px){
    .team-section{
        padding-top: 46px;
    }   
    .team-section .team-intro-card{
        padding: 25px;
        justify-content: center;
        gap: 15px;
    }
    .team-section .team-card{
        padding: 15px;
    }
}
@media(max-width:1024px){
    .team-section{
        padding-top: 36px;
    }
}
@media(max-width:767px){
    .team-section{
        padding-top: 26px;
    }
    .team-section .team-board{
        width: 100%;
    }
    .team-section .team-intro-card{
        padding: 40px;
        text-align: center;
    }
    .team-section .col-lg-2{
        width: 100%;
    }
    .team-section .team-card .team-img{
        align-self: center;
    }
}
@media(max-width:480px){
    .team-section{
        padding-top: 16px;
    }
    .team-section .col-lg-2{
        display: flex;
        justify-content: center;
    }
    .team-section .team-card{
        width: 55%;
    }
}

/*clients-section Start*/
.clients-section{
    background-image: url(../image/bg-clients-home-1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.clients-section .container{
    width: 100%;
    max-width: 1800px;
}
.clients-section .clients{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.clients .testimonial-slider-row {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    transition: transform 0.6s ease;
}
.clients .testimonial-slide {
    flex-shrink: 0;
}
.clients .testimonial-card {
    border-radius: 20px;
    border: 1px solid var(--border);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 70px;
    background: linear-gradient(105.5deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
    backdrop-filter: blur(100px)
}
.clients .testimonial-top {
    display: flex;
    gap: 20px;
}
.clients .testimonial-top .client-detils{
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.clients .testimonial-top .quote-icon{
    position: absolute;
    left: 360px;
}
.clients .testimonial-card p{
    color: var(--text);
}
.swiper.testimonial-swiper .swiper-pagination {
    position: static !important;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 50px;
}
.swiper.testimonial-swiper .swiper-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    opacity: 1;
    transition: all 0.4s ease;
}
.swiper.testimonial-swiper .swiper-dot.active {
    width: 40px;
    height: 8px;
    flex: 0 0 45px;
    border-radius: 10px;
    background: #ffb52b;
}

@media (max-width:1440px){
    .clients .testimonial-card{
        gap: 60px;
    }
    .clients .testimonial-top .quote-icon{
        left: 390px;
    }
}
@media (max-width:1320px){
    .clients .testimonial-top .quote-icon{
        left: 340px;
    }
    .clients .testimonial-top .client-img{
        max-width: 60px;
    }
}
@media (max-width:1280px) {
    .clients-section .clients{
        gap: 35px;
    }
    .clients .testimonial-top .client-img{
        max-width: 50px;
    }
    .clients .testimonial-top{
        gap: 10px;
    }
}
@media (max-width:1250px) and (min-width:1215px){
    .clients .testimonial-top .quote-icon{
        left: 330px;
    }
}
@media (max-width:1214px) and (min-width:1025px){
    .clients .testimonial-top .quote-icon{
        left: 265px;
    }
}
@media (max-width:1024px){
    .clients .testimonial-top .quote-icon{
        left: 420px;
    }
    .clients .testimonial-card{
        gap: 40px;
    }
}
@media (max-width:880px) and (min-width:768px){
    .clients .testimonial-top{
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .clients .testimonial-top .client-detils{
        gap: 0;
    }
    .clients .testimonial-top .quote-icon{
        left: 45%;
        top: 47%;
        width: 25px;
    }
    .clients .testimonial-card{
        gap: 50px;
    }
    .clients .testimonial-card p{
        text-align: center;
    }
    .swiper.testimonial-swiper .swiper-pagination{
        padding-top: 30px;
    }
}
@media (max-width:767px){
    .clients-section .clients{
        gap: 25px;
    }
    .clients .testimonial-top{
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .clients .testimonial-top .client-detils{
        gap: 0;
    }
    .clients .testimonial-top .quote-icon{
        left: 49%;
        top: 55%;
        width: 25px;
    }
    .clients .testimonial-card{
        gap: 50px;
    }
    .clients .testimonial-card p{
        text-align: center;
    }
    .swiper.testimonial-swiper .swiper-pagination{
        padding-top: 30px;
    }
}
@media (max-width:575px) and (min-width:481px){
    .clients .testimonial-top .quote-icon{
        left: 48%;
        top: 50%;
        width: 25px;
    }
}
@media (max-width:480px){
    .clients .testimonial-top .quote-icon{
        left: 48%;
        top: 50%;
        width: 25px;
    }
}
@media (max-width:375px){
    .clients .testimonial-top .quote-icon{
        left: 48%;
        top: 47%;
        width: 25px;
    }
}
/*clients-section End*/

/*Blog-Section-Start*/
.blog-section .container{
    width: 100%;
    max-width: 1320px;
}
.blog-section .blog{
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.blog .blog-card{
    height: 100%;
    border-radius: 20px;
    border: 1px solid var(--border);
    padding: 20px;
    gap: 20px;
    display: flex;
    flex-direction: column;
    background: linear-gradient(105.5deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
}
.blog .blog-card .blog-img img{
    width: 100%;
}
.blog .blog-card p{
    color: var(--text);
}
.blog .blog-card a{
    color: var(--primary);
}
@media (max-width:1280px){
    .blog-section .blog{
        gap: 35px;
    }
}
@media (max-width:767px){
    .blog-section .blog{
        gap: 25px;
    }
    .blog .blog-grid .row .col-12{
        display: flex;
        justify-content: center;
        padding: 0 !important;
    }
    .blog .blog-card{
        max-width: 615px;
        gap: 10px;
    }
}
@media (max-width:345px){
    .blog .blog-title{
        flex-direction: column;
        gap: 10px;
    }
    .blog .blog-title .btn-primary{
        width: fit-content;
    }
}
/*Blog-Section-End*/

/*Footer-Start*/
.footer-section{
    padding: 0 15px;
}
.unlock-sec .container{
    width: 100%;
    max-width: 1320px;
}
.unlock-sec .unlock{
    background: linear-gradient(203.96deg, #9900FF 0%, #FFB730 100%);
    border-radius: 20px;
    padding: 50px 200px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    text-align: center;
}
.unlock-sec .unlock .unlock-title{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.unlock-sec .unlock .unlock-title p{
    color: var(--text);
}
.unlock-sec .unlock .unlock-store{
    display: flex;
    gap: 20px;
}
.main-footer .container{
    width: 100%;
    max-width: 1620px;
    padding: 0 15px;
}
.footer-section {
    position: relative;
    z-index: 2;
    margin-bottom: -122px;
}

.main-footer {
    position: relative;
    z-index: 1;
    background: #FFFFFF05;
}
.main-footer .container {
    width: 100%;
    max-width: 1620px;
}
.main-footer .top-footer {
    position: relative;
    z-index: 1;
    padding-top: 200px;
    padding-bottom: 50px;
}
.top-footer .col-lg-4{
    width: 22%;
}
.top-footer .logo-sec{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.top-footer .logo-sec p{
    color: var(--text);
}
.top-footer .footer-menu-link .footer-menu{
    width: 20%;
}
.top-footer .footer-menu-link #footer-menu{
    width: 40%;
}
.top-footer .footer-menu-link .footer-menu{
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.top-footer .footer-menu ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.top-footer .footer-menu .footer-link.active,
.top-footer .footer-menu .footer-link:hover{
    color: var(--primary);
}
.top-footer .footer-menu .footer-email{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.top-footer .footer-menu .footer-email input{
    border-radius: 50px;
    border: 1px solid var(--primary);
    padding: 14px 20px;
    background: var(--first-btn);
}
.top-footer .footer-menu .footer-email .btn-secondary{
    display: flex;
    width: fit-content;
}
.top-footer .footer-menu .footer-email .btn-secondary:hover{
    border: 1px solid var(--primary);
}
.bottom-footer{
    padding: 17px 15px;
    background: var(--first-btn);
}
.bottom-footer .container{
    width: 100%;
    max-width: 1620px;
}
.bottom-footer .copy p{
    color: var(--text);
}
.bottom-footer .social-icon{
    display: flex;
    gap: 30px;
}
.bottom-footer .social-icon{
    color: #ffffff;
}
.bottom-footer #current-year{
    font-size: 18px;
    color: var(--text);
    font-weight: 400;
    line-height: 26px;
}
@media (max-width:1440px){
    .top-footer .col-lg-4{
        width: 30%;
    }
    .top-footer .logo-sec .footer-logo img{
        max-width: 250px;
    }
}
@media (max-width:1280px){
    .unlock-sec .unlock{
        padding: 30px 100px;
    }
    .unlock-sec .unlock .unlock-title h3{
        font-size: 36px;
        line-height: 44px;
    }
    .unlock-sec .unlock-store .app-store,
    .unlock-sec .unlock-store .play-store{
        width: 200px;
    }
    .top-footer .logo-sec .footer-logo{
        max-width: 200px;
    }
    .top-footer .logo-sec .footer-logo img{
        max-width: 200px;
    }
}
@media (max-width:1024px){
    .unlock-sec .unlock{
        padding: 30px 60px;
    }
    .unlock-sec .unlock .unlock-title h3{
        font-size: 34px;
        line-height: 42px;
    }
    .unlock-sec .unlock-store .app-store, .unlock-sec .unlock-store .play-store {
        width: 150px;
    }
    .top-footer .col-lg-4,
    .top-footer .col-lg-8{
        width: 100%;
    }
    .top-footer .logo-sec{
        padding-bottom: 30px;
        align-items: center;
    }
    .top-footer .footer-menu-link .footer-menu {
        text-align: center;
    }
    .top-footer .footer-menu-link #footer-menu{
        text-align: left;
    }
    .main-footer .top-footer{
        padding-top: 180px;
        padding-bottom: 30px;
    }
    .top-footer .footer-menu .footer-email input{
        padding: 10px 15px;
    }
     .bottom-footer #current-year{
    font-size: 16px;
    line-height: 24px;
   }
}
@media (max-width:881px){
    .bottom-footer .copy{
        text-align: center;
        padding-bottom: 20px;
    }
    .bottom-footer .col-lg-4{
        justify-content: center !important;
    }
}
@media (max-width:767px){
    .unlock-sec .unlock{
        padding: 20px;
    }
    .unlock-sec .unlock .unlock-title h3{
        font-size: 28px;
        line-height: 36px;
    }
    .main-footer .top-footer{
        padding-top: 160px;
    }
    .top-footer .footer-menu ul{
        gap: 10px;
    }
    .top-footer .footer-menu .footer-link{
        font-size: 16px;
    }
     .bottom-footer #current-year{
    font-size: 16px;
    line-height: 24px;
   }
}
@media (max-width:575px) and (min-width:481px){
    .top-footer .footer-menu-link .footer-menu{
        width: 33%;
        gap: 20px;
    }
    .top-footer .footer-menu-link #footer-menu{
        width: 100%;
        text-align: center;
        padding-top: 20px;
    }
    .top-footer .footer-menu .footer-email .btn-secondary{
        align-self: center;
    }
    .bottom-footer .copy{
        text-align: center;
        padding-bottom: 20px;
    }
    .bottom-footer .col-lg-4{
        justify-content: center !important;
    }
    .top-footer .logo-sec p{
        text-align: center;
    }
}
@media (max-width:480px){
    .top-footer .footer-menu-link .footer-menu{
        width: 33%;
        gap: 20px;
    }
    .top-footer .footer-menu-link #footer-menu{
        width: 100%;
        text-align: center;
        padding-top: 20px;
    }
    .top-footer .footer-menu .footer-email .btn-secondary{
        align-self: center;
    }
    .bottom-footer .copy{
        text-align: center;
        padding-bottom: 20px;
    }
    .bottom-footer .col-lg-4{
        justify-content: center !important;
    }
    .top-footer .logo-sec p{
        text-align: center;
    }    
    .top-footer .logo-sec .footer-logo img{
        max-width: 150px;
    }
    .top-footer .logo-sec{
        gap: 15px;
    }
}
@media (max-width:375px){
    .top-footer .footer-menu-link .footer-menu{
        width: 100%;
        text-align: left;
        padding-bottom: 20px;
    }
    .top-footer .footer-menu-link #footer-menu{
        padding: 0;
        text-align: left;
    }
    .top-footer .logo-sec{
        align-items: start;
    }
    .top-footer .logo-sec p{
        text-align: left;
    }
}
/*Footer End*/