/*
Theme Name:  grilroy personal Template;
Version:1.0;


*/

/*
CSS LIST========>


======================>>
BANNER AREA CSS
======================>>
HEADER AREA CSS
======================>>
WELCOME AREA CSS
=======================>>
ABOUT AREA CSS AREA CSS
=======================>>
SKILL AREA CSS
=======================>>
SERICE AREA CSS
=======================>>
PROJECT AREA CSS
=======================>>
PRICING AREA CSS
=======================>>
TESTIMONIALS AREA CSS
=======================>>
BLOG  AREA CSS
=======================>>
CTA  AREA CSS
=======================>>
SOCIAL AREA CSS
=======================>>
LOGO AREA CSS
=======================>>
FOOTER AREA CSS

=========>>COMMON CSS

*/

/*
==========================
	BANNER AREA CSSS
==========================
*/

:root {
    --bg1: #07121a;
    --bg2: #0b0b12;
    --arc-color: #15d6a6;
    --arc-height: 300px;
    --arc-offset: -150px;
    --thickness: 5px;
    --blur: 4px;
    --anim-duration: 3s;


    --card-dark: #1a1a1a;
    --muted: rgba(255, 255, 255, 0.55);
    --muted-strong: rgba(255, 255, 255, 0.75);
    --white: #fff;
    --green-1: #107c41;
    --green-2: #2fc49a;
    --deposit-green: #15906a;

    --c1: #0E472E;
    --c2: #4FAC92;
    --size: 60vmin;
    --speed: 8s;
}

.header-banner-area {
    background: #2E3D44;
    position: relative;
    z-index: 2;
}

.header-banner-area .owl-nav {
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -15px;
    background: #2E3D44;
}

.header-banner-area .owl-nav>div {
    height: 20px;
    width: 30px;
    text-align: center;
    line-height: 20px;
    display: inline-block;
    color: #fff;
    margin: 0 2px;
}

.header-banner-area .owl-nav>div:hover {
    color: #4FAC92;
}

.header-banner-area .owl-nav>div i {
    font-size: 12px;
}

.header-banner-area .owl-nav>div:first-child {
    border-right: 1px solid #657A84;
    padding-right: 4px;
}

.header-area {
    background: black;
    border-bottom: 1px solid #15181a;
    /* position: absolute; */
    left: 0;
    width: 100%;
    top: 0;
    z-index: 99;
    -webkit--webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    padding-block: 14px;
}

.header-area.header-main {
    /* top: 60px; */
    -webkit--webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.header-area.sticky {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    background: #000;
    transition: all 1s;
}

.banner-comments {
    position: relative;
    z-index: 2;
    padding: 10px;
    padding-left: 50px;
}

.banner-icon {
    position: absolute;
    left: 0;
    background: #4FAC92;
    padding: 10px 12px;
    top: 0;
    color: #fff;
}

.banner-social-wrap div {
    display: inline-block;
}

.banner-social li {
    display: inline-block;
}

.banner-social li a {
    color: #fff;
    font-size: 13px;
    height: 100%;
    display: block;
    padding: 10px;
}

.banner-social li a:hover {
    color: #4FAC92;
}


.banner-social li {
    border-left: 1px solid #435157;
}


a.contact-btn {
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    background: #4FAC92;
    padding: 10px 25px 10px 40px;
    transition: all .3s;
    position: relative;
    z-index: 2;
}

a.contact-btn i {
    transition: all .3s;
    position: absolute;
    left: 7px;
    top: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    margin-top: -15px;
}

a.contact-btn:hover i {
    left: 10px;
    transition: all .3s infinite alternate;
}

a.contact-btn:hover {
    color: #fff;
}


.banner-single-carousel p {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
}

/*
==========================
	HEADER AREA CSS
==========================
*/
.header-area {
    border-bottom: 1px solid #15181a;
}

.search-area div {
    display: inline-block;
}

.search-box {
    position: relative;
    z-index: 2;
}



.search-btn {
    position: absolute;
    left: -30px;
    top: 50%;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    margin-top: -15px;
}

.search-btn i {
    color: #4FAC92;
}

.search-box input {
    background: transparent;
    border: none;
    color: #c8c6c6;
    position: relative;
    z-index: 2;
}


.search-box input::placeholder {
    color: #c8c6c6;
    font-size: 18px;
    font-weight: 300;
}

.search-box input:focus::placeholder {
    color: #222;
}

.slide-widgest-wrap {
    position: fixed;
    background: transparent;
    z-index: 9999;
    height: 100%;
    width: 100%;
    top: 0;
    right: -100%;
    transition: all .5s;
}

.slide-widgest-wrap.active {
    right: 0;
    transition: all .5s;
}

.grid-menu:hover {
    cursor: pointer
}

.slide-widgest-wrap:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background: #000;
    left: 0;
    opacity: .7;
    top: 0;
    z-index: -1;
}

.side-widgest {
    position: absolute;
    width: 30%;
    right: -100%;
    top: 0;
    height: 100%;
    padding: 80px 40px 40px 40px;
    background: black;
    transition: all 1s;
}

.side-widgest:hover {
    cursor: pointer;
}

.side-widgest.active {
    right: 0;
    transition: all 1s;
}

.side-content p {
    font-weight: 400;
    color: #fff;
}

.side-content {
    margin: 40px 0;
}

.side-social li {
    display: inline-block;
}

.side-social li a {
    color: #fff;
    font-size: 18px;
    width: 40px;
    text-align: center;
    border: 1px solid;
    display: block;
    height: 40px;
    line-height: 40px;
    margin-right: 6px;
    border-radius: 4px;
    transition: all .3s;
}

.side-close {
    position: absolute;
    right: 5%;
    top: 5%;
    font-size: 20px;
    color: #fff;
    border: 1px solid #fff;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 4px;
    transition: all .3s;
}

.side-social li a:hover,
.side-close:hover {
    background: #4FAC92;
    border-color: #4FAC92;
    transition: all .3s;
}

/*
==========================
	WELCOME AREA CSS
==========================
*/
.welcome-area-wrap {
    position: relative;
    z-index: 2;
}





.bg-video {
    position: absolute;
    top: -147px;
    right: 28%;
    width: 845px;
    height: 1070px;
    object-fit: cover;
    z-index: 3;
}


.bg-video2 {
    position: absolute;
    top: 0px;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.bg-video2-mob {
    position: absolute;
    top: -200px;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 5;
}

.welcome__wrap2 {
    background: url(../img/bg/Header.png);
    background-size: cover;
    background-position: center
}


.single-welcome-area {
    position: relative;
    z-index: 2;
    height: 800px;
    display: flex;
    /* align-items: center; */
}

.wlc-title h1 {
    font-style: normal;
    font-weight: 300;
    font-size: 80px;
    line-height: 92px;
    background: linear-gradient(180.91deg, #FFFFFF 35.94%, #999999 72.88%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.wlc-title h2 {

    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: 800;
    font-size: 56px;
    line-height: 116.67%;

    background: linear-gradient(180deg, #FFFFFF 44.44%, #CACACA 61.6%, #999999 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

}

.wlc-title h1 span {
    color: #4FAC92;
}

.wlc-title p {
    font-weight: 400;
    font-size: 18px;
    padding-left: 20px;
    border-left: 3px solid #4FAC92;
    line-height: 28px;
    margin: 40px 0;
}

.wlc-author-1 {
    position: absolute;
    right: 5%;
    width: 40%;
    bottom: 0;
    height: 90%;
    z-index: -1;
}

.author-1 img {
    height: 100%;
    width: auto;
}


.welcome-carousel .owl-dots {
    position: absolute;
    counter-reset: wlc-counter;
    bottom: 50%;
    right: 5%;
    margin-bottom: -30px;
}

.welcome-carousel .owl-dots>div {
    height: 30px;
    width: 30px;
    background: transparent;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    margin: 7px 0;
    border: 1px solid #4FAC92;
    transition: all .3s;
    overflow: hidden;
}

.welcome-carousel .owl-dots>div:after {
    position: absolute;
    content: "0" counter(wlc-counter);
    counter-increment: wlc-counter;
    height: 100%;
    width: 100%;
    text-align: center;
    top: 50%;
    margin-top: -13px;
    color: #4FAC92;
    font-size: 12px;
    transition: all .3s;

}

.welcome-carousel .owl-dots>div:hover,
.welcome-carousel .owl-dots>div.active {
    background: #4FAC92;
    border-color: #4FAC92;

}

.welcome-carousel .owl-dots>div:hover:after,
.welcome-carousel .owl-dots>div.active:after {
    color: #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

}

h1.wlc-filltext {
    color: red;
    position: absolute;
    top: 15%;
    font-size: 200px;
    text-transform: uppercase;
    left: 0;
    letter-spacing: 2px;
    z-index: -1;
    -webkit-text-stroke: 1px #141618;
    -webkit-text-fill-color: transparent;
}

.wlc-author-1 img {
    position: absolute;
    bottom: 0;
}



/*
==========================
	ABOUT ATRA CSS
==========================
*/

.about-img-section {
    padding: 240px 0;
}

.about-area1 {
    background-image: url(assets/img/bg/about-bg.png);
    background-position: center;
    background-size: cover;
}

.about-img-section1 {
    background-image: url(../img/about/about1.png);
    background-size: cover;
    background-position: center
}

a.about-video {
    height: 80px;
    width: 80px;
    text-align: center;
    line-height: 80px;
    background: #fff;
    border-radius: 50%;
    color: #4FAC92;
    font-size: 40px;
}

.about-shape {
    position: relative;
    z-index: 3;
}

.about-shape:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 130%;
    background: url(../img/about/about-bg-shape.png);
    z-index: -1;
    left: -15%;
    background-repeat: no-repeat;
    top: 0%;
}

.about-area-primery .about-shape:after {
    background: url(../img/about/about-bg-shape2.png) no-repeat;
}

.about-shape:before {
    position: absolute;
    content: "";
    height: 300px;
    width: 300px;
    background: url(../img/about/about-shape.svg) no-repeat;
    background-repeat: no-repeat;
    bottom: -20%;
    left: -15%;
    z-index: -1;
}

.about-area-primery .about-shape:before {
    background: url(../img/about/about-shape2.svg) no-repeat;
}

.video-play-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    /* background: #fa183d; */
    border-radius: 50%;
    padding: 18px 20px 18px 28px;
}

.video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #22cd6f;
    border-radius: 50%;
    -webkit-animation: pulse-border 1500ms ease-out infinite;
    animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    background: #22cd6f;
    border-radius: 50%;
    -webkit-transition: all 200ms;
    -o-transition: all 200ms;
    transition: all 200ms;
}

.video-play-button:hover:after {
    background-color: darken(#22cd6f, 10%);
}

.video-play-button img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
}

.video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid #fff;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
    0% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}


.about-area-primery:after {
    position: absolute;
    content: "";
    height: 400px;
    width: 400px;
    right: 0;
    top: 0;
    background: url(../img/bg/about-bg.svg);
    opacity: .1;
}

.about-area-primery {
    position: relative;
    z-index: 2;
    background: #f1f1f1;
}

/*
==========================
    SKILL AREA CSS
==========================
*/


.skill-box small {
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 500;
}

.skill-box h5 {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    color: #4FAC92;
    margin: 12px 0;
}

.skill-box p {
    font-size: 15px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 400;
    line-height: 1.6;
}

.skill-box {
    padding: 15px;
    background: #0B0D0E;
    box-shadow: 0px 65px 64.5px rgba(0, 0, 0, 0.39);
    transform: translateY(0);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}



.primery-skill {
    position: relative;
    z-index: 2;
}

.primery-skill:after {
    position: absolute;
    content: "";
    height: 500px;
    width: 500px;
    background: url(../img/bg/skill-bg1.svg);
    bottom: -30%;
    z-index: -1;
    background-position: right;
    background-size: contain;
    left: -11%;
    -webkit-animation: spin infinite ease 9s;
    animation: spin infinite ease 9;
    opacity: .2
}





.primery-skill .skill-box small {
    font-size: 14px;
    text-transform: uppercase;
    color: #2d2e2f;
    font-weight: 500;
    z-index: 2;
}

.primery-skill .skill-box h5 {
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 600;
    color: #0b0d0e;
    margin: 12px 0;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

}

.skill-area.primery-skill .row:last-child div.skill-box:before {
    position: absolute;
    content: "";
    height: 60px;
    width: 60px;
    background: #e9f7ef;
    left: 10px;
    top: 20px;
    z-index: -1;
    border-radius: 50%;
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;

}

.skill-area.primery-skill {
    overflow: hidden;
}


.skill-area.primery-skill .row:last-child div.skill-box:hover:before {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    -webkit-transition: all .6s;
    -o-transition: all .6s;
    transition: all .6s;
    border-radius: 0;
}

.primery-skill .skill-box:hover h5 {
    color: #4FAC92;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.primery-skill .skill-box p {
    font-size: 15px;
    text-transform: capitalize;
    color: #0b0d0e;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 0;
    z-index: 2;
}

.primery-skill .skill-box {
    padding: 30px;
    background: #fff;
    box-shadow: 0px 65px 64.5px rgba(0, 0, 0, 0.1);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.primery-skill .skill-box:hover {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}


.skill-box:hover {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    background: #131617;
}

.skill-box.skill-box2:hover {
    background: #fff;
}

.technical-skills {
    background: transparent;
    position: relative;
}

.technical-skills .skills-wrapper {
    margin-top: 40px;
}

.border_separatior {
    border-top: 1px solid #f4f4f4;

}

.technical-skills .skill .chart {
    position: relative;
    display: inline-block;
    min-height: 155px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
}

.technical-skills .skill .chart>span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 24px;

}

.technical-skills .skill .chart>span span {
    font-size: 48px;
    margin-right: 5px;
}

.technical-skills .skill h5 {
    margin-top: 15px;
    text-transform: uppercase;
    color: #fff;
}


.skill-area.primery-skill.section-padding {
    counter-reset: skill;
}

.skill-area.primery-skill.section-padding .row:last-child div.skill-box {
    position: relative;
    z-index: 2;
}

.skill-area.primery-skill.section-padding .row:last-child div.skill-box:after {
    content: "0" counter(skill);
    counter-increment: skill;
    position: absolute;
    right: 14px;
    bottom: 0;
    font-size: 70px;
    line-height: 80px;
    opacity: .2;
    font-family: 'Oswald', sans-serif;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;

}

.skill-area.primery-skill.section-padding .row:last-child div.skill-box:hover:after {
    color: #0b0d0e;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;

}


/*
==========================
    SERVICE AREA CSS
==========================
*/


.single-service {
    text-align: center;
    padding: 50px 40px;
    transition: all .3s;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background: #131617;
}


.circles-wrap {
    position: absolute;
    bottom: -32%;
    left: -5%;
    z-index: -1;
}

span.circle {
    border-radius: 50%;
    position: absolute;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.circles {
    height: 400px;
    width: 400px;
    background: transparent;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

span.circle.circle-1 {
    height: 100px;
    width: 100px;
    background: #5fdb97;
    z-index: 5;
    display: inline-block;
    z-index: 5;
}


span.circle.circle-2 {
    height: 200px;
    width: 200px;
    background: #4dd78b;
    z-index: 4;
}

span.circle.circle-3 {
    height: 300px;
    width: 300px;
    background: #39d27e;
    z-index: 3;
}

span.circle.circle-4 {
    height: 400px;
    width: 400px;
    background: #22cd6f;
    z-index: 2;
}



.single-service:hover span.circle,
.single-service.active span.circle {
    transform: scale(1);
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}


.service-area .circles-wrap {
    position: absolute;
    bottom: -32%;
    left: auto;
    z-index: -1;
    right: -50%;
}


.service-text h4 {
    font-size: 24px;
    text-transform: uppercase;
    color: #22cd6f;
    margin-bottom: 30px;
}

.service-text {
    margin: 30px 0 30px 0px;
}

.service-area .service-text {
    margin: 30px 0 0px 0px;
}


.service-text p {
    color: #999999;
    text-transform: capitalize;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
}


.service-icon {
    width: 90px;
    margin: 0 auto;
}

.single-service.active,
.single-service:hover {
    background: #09c75f;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.single-service.active .service-text h4,
.single-service.active .service-text h3,
.single-service:hover .service-text h3,
.single-service.active .service-text h5,
.single-service:hover .service-text h5,
.single-service:hover .service-text h4,
.single-service.active .service-text p,
.single-service:hover .service-text p {
    color: #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.single-service.active .cbtn.pricing-btn,
.single-service:hover .cbtn.pricing-btn {
    background: #06a950;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.single-service.active .cbtn.pricing-btn i,
.single-service:hover .cbtn.pricing-btn i {
    color: #06a950;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.single-service.active .separator,
.single-service:hover .separator {
    border-color: #fff;
}

.service-area.service-primery {
    background: #fff;
}


.service-primery .single-service {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
}

.service-primery .single-service.active,
.service-primery .single-service:hover {
    background: #09c75f;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}



.service-primery .service-text {
    margin: 40px 0 0 0px;
}

.service-primery {
    position: relative;
    z-index: 2;
}

.service-primery:after {
    position: absolute;
    content: "";
    height: 400px;
    width: 400px;
    right: 0;
    top: 0;
    background: url(../img/bg/service-bg.svg);
}

.pricing2 {
    background: #FAFAFA;
}

.pricing2 .service-text h3,
.pricing2 .service-text h4 {
    color: #32383A;
}

/*
==========================
    PROJECT AREA CSS
==========================
*/


.da-thumbs {
    list-style: none;
    position: relative;
    padding: 0;
}

.da-thumbs li {
    margin: 10px;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 420px;
}



.project-area-primery .da-thumbs .owl-nav {
    position: absolute;
    top: -34%;
    right: 0;
}

.da-thumbs li a,
.da-thumbs li a img {
    display: block;
    position: relative;
    height: 100% !important;
    width: 100% !important;
}

.da-thumbs li a {
    overflow: hidden;
}

.da-thumbs li a div {
    position: absolute;
    background: #06a950;
    width: 100%;
    height: 100%;
}

.da-thumbs li a div.custom-hover-object {
    position: absolute;
    background: #06a950;
    width: 100%;
    height: 100%;
}

.da-thumbs li a div {
    display: block;
    padding: 10px 0;
    text-transform: uppercase;
    font-weight: normal;
    color: #fff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.da-thumbs li a div.custom-hover-object span {
    color: #fff
}


.da-thumbs .owl-nav {
    position: absolute;
    top: -33%;
    right: 0;
}

.da-thumbs .owl-nav>div {
    height: 45px;
    width: 45px;
    background: transparent;
    border: 1px solid #06a950;
    text-align: center;
    line-height: 45px;
    border-radius: 4px;
    color: #06a950;
    font-size: 16px;
    display: inline-block;
    margin: 0 5px;
    transition: all .3s;
}

.da-thumbs .owl-nav>div:hover,
.da-thumbs .owl-nav>div:focus {
    background: #06a950;
    border-color: #06a950;
    color: #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.project-area {
    background: url(../img/bg/project-bg.jpg);
    background-size: cover;
    background-position: center;
}

.project-area-primery {
    background: transparent;
}

.project-area-primery {
    position: relative;
    z-index: 2;
}

.project-area-primery:after {
    position: absolute;
    content: "";
    height: 700px;
    width: 700px;
    left: -10%;
    bottom: 0;
    background: url(../img/bg/portfolio-bg.svg);
    z-index: -1;
    background-position: right;
    background-size: contain;
}

/*
==========================
    PRICING AREA CSS
==========================
*/


.pricing-area1 {
    background-image: url(../img/bg/about-bg.png);
    background-position: center;
    background-size: cover
}

.service-text h3 {
    font-size: 36px;
    text-transform: uppercase;
    color: #22cd6f;
}

.service-text h5 {
    color: #999999;
    text-transform: capitalize;
    font-size: 18px;
}

.separator {
    border-top: 1px solid #999999;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

/*
==========================
    COUNTER AREA CSS
==========================
*/
.fact i {
    font-size: 48px;
    margin-bottom: 10px;
    color: #4FAC92;
}


.fact h2 {
    color: #4FAC92;
}


.fact span {
    color: #32383A;
    font-size: 18px;
}

.fun-facts {
    background: #E6FFF2;

}

/*
==========================
    TESTIMONIALS AREA CSS
==========================
*/

.testimonials .owl-nav {
    position: absolute;
    top: -59%;
    right: -10%;
}

.testimonials .owl-nav>div {
    height: 45px;
    width: 45px;
    background: transparent;
    border: 1px solid #06a950;
    text-align: center;
    line-height: 45px;
    border-radius: 4px;
    color: #06a950;
    font-size: 16px;
    display: inline-block;
    margin: 0 5px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.testimonials .owl-nav>div:hover,
.testimonials .owl-nav>div:focus {
    background: #06a950;
    border-color: #06a950;
    color: #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.testimonial-img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -50px;
}

.testimonial-img img {
    max-width: 100%;
    max-height: 100%;
    margin-right: 20px;
}

.testimonial {
    position: relative;
    z-index: 2;
    padding-left: 130px;
}

.testimonial-text h4 {
    font-size: 25px;
    text-transform: uppercase;
    line-height: 34px;
    margin: 25px 0;
}

.testimonial-text p {
    font-size: 18px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 400;
    margin: 0;
}

.testimonials-area-primery .testimonial-text h4,
.testimonials-area-primery .testimonial-text p {
    color: #0b0d0e;
}

.testimonials-area1 {
    background: url(../img/bg/testimonials-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*
==========================
    BLOG AREA CSS
==========================
*/
.blog-area .owl-nav {
    position: absolute;
    top: -27%;
    right: 0;
}

.blog-area .owl-nav>div {
    height: 45px;
    width: 45px;
    background: transparent;
    border: 1px solid #06a950;
    text-align: center;
    line-height: 45px;
    border-radius: 4px;
    color: #06a950;
    font-size: 16px;
    display: inline-block;
    margin: 0 5px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.blog-area .owl-nav>div:hover,
.blog-area .owl-nav>div:focus {
    background: #06a950;
    border-color: #06a950;
    color: #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}


.single-blog-img {
    display: flex;
    align-items: flex-end;
}

span.blog-banner {
    color: #fff;
    background: #131617;
    padding: 10px 25px;
    text-transform: uppercase;
}

.blog-description {
    background: #ffffff;
    padding: 30px;
    border: 1px solid #f1f1f1;
    position: relative;
    z-index: 2;
}


.single-blog-img img {
    height: 250px;
    width: 100% !important;
}

a.readmore-btn:hover i {
    padding-right: 10px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;

}

a.readmore-btn i {
    padding-right: 5px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.blog-description h6 {
    color: #131617;
    text-transform: capitalize;
    font-weight: 400;
    margin-bottom: 0;
}

.blog-description a {
    font-size: 20px;
    text-transform: uppercase;
    color: #131616;
    font-weight: 600;
    margin: 20px 0;
}

.blog-description p {
    color: #131617;
    text-transform: capitalize;
    font-weight: 400;
    margin: 0;
}

.single-blog {
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.single-blog:hover .blog-description a {
    background: #fff;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.single-blog:hover span.blog-banner {
    background: #06a950;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

a.readmore-btn {
    color: #4FAC92;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0;
}

.single-blog:hover .blog-description a {
    color: #22cd6f;
}

/*
==========================
    CTA AREA CSS
==========================
*/


.cta-area1 {
    background-image: url(../img/bg/map.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}



.heading.cta-heading h2 {
    font-size: 48px;
    line-height: 60px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.cta-form input {
    background: #32383a;
    width: 55% !important;
    padding: 14px 15px;
    border: 1px solid #22cd6f;
    border-radius: 5px;
    float: left;
    color: #fff;
}

.cta-form a.subscribe-btn {
    width: 43%;
    float: right;
}

a.subscribe-btn {
    padding: 15px 60px 15px 30px;
    background: #22cd6f;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
    text-align: left;
    border: 1px solid transparent;
    font-size: 15px;
}

a.subscribe-btn:hover,
a.subscribe-btn:hover i {
    border-color: #22cd6f;
    background: transparent;
    color: #22cd6f;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

a.subscribe-btn i {
    background: #fff;
    color: #22cd6f;
    height: 35px;
    width: 35px;
    text-align: center !important;
    position: absolute;
    right: 13px;
    line-height: 35px;
    border-radius: 3px;
    top: 50%;
    margin-top: -17.5px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

.cta-form {
    width: 80%;
    margin: 0 auto;
}

.cta-primery {
    position: relative;
    z-index: 2;
    background: #fafafa;
}

img.cta-shape {
    position: absolute;
    z-index: -1;
}

.cta-shap1 {
    top: 20%;
    left: 9%;
}

.cta-shap2 {
    right: 12%;
    top: 10%;
}

.cta-shap4 {
    right: 7%;
    top: 48%;
}

.cta-shap3 {
    top: 40%;
    left: 31%;
}

.cta-shap5 {
    top: 80%;
    left: 6%;
}

/*
==========================
    SOCIAL AREA CSS
==========================
*/

.social-area .row>div {
    margin: 0;
    padding: 0;
}

.sinlge-social-hover a {
    display: block;
    padding: 50px 30px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    transform: scale(1.5);
    opacity: 0;
    visibility: hidden;
}

.sinlge-social-hover {
    position: relative;
    z-index: 2;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    overflow: hidden;
}

.sinlge-social-hover:after {
    position: absolute;
    content: "";
    height: 100%;
    width: 0;
    background: #22cd6f;
    top: 0;
    left: 0;
    z-index: -1;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}

span.single-social-icon i {
    font-size: 32px;
    margin-bottom: 20px;
}

.sinlge-social-hover:hover a {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
    color: #fff;
}

.sinlge-social-hover:hover:after {
    width: 100%;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}


/*
==========================
    LOGO AREA CSS
==========================
*/
.single-logo-table {
    height: 100px;
    width: 100%;
    text-align: center;
    display: table;
}

.single-logo-table img:hover {
    filter: brightness(1);
    cursor: move;
    opacity: 1;
}

.single-logo-table-cell {
    height: 100%;
    width: 100%;
    display: table-cell;
    vertical-align: middle;
}

.single-logo-table img {
    filter: brightness(40);
    opacity: .3;
    max-height: 100%;
    max-width: 100%;
}

/*
==========================
    FOOTER AREA CSS
==========================
*/
.footer-area1 {
    background-image: url(../img/bg/footer-bg.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat
}

.footer-menu li a {
    color: #fff;
    text-transform: uppercase;
    padding: 0 9px;
}

.footer-menu li a:hover {
    color: #4FAC92;
}

.footer-menu li {
    display: inline-block;
}

.copyright span {
    color: #4FAC92;
}

.copyright {
    text-transform: uppercase;
    color: #474747;
    font-size: 12px;
}

/*
==========================
    COMMON CSS
==========================
*/



.site-black {
    /* background: #0B0D0E; */
    background: black;
}

.heading h2 {
    font-size: 44px;
    line-height: 55px;
    text-transform: uppercase;
    margin-bottom: 0;
}

.heading h2 span {
    color: #22cd6f;
}

.heading {
    position: relative;
    z-index: 2;
}

.heading strong.filltext {
    font-size: 80px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #171c1e;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.heading p {
    font-weight: 400;
    margin: 40px 0;
}


.primery-heading small {
    font-weight: 500;
    color: #4FAC92 !important;
    font-size: 16px;
    text-transform: uppercase;
}



.primery-heading h2 {
    font-size: 48px;
    line-height: 62px;
    text-transform: uppercase;
    color: #0b0d0e;
    font-weight: 600;
    margin-bottom: 0;
}

.primery-heading h2 span {
    color: #4FAC92;
}

.primery-heading {
    position: relative;
    z-index: 2;
}

.primery-heading strong.filltext {
    font-size: 80px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    -webkit-text-fill-color: #f1f1f1;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.primery-heading p {
    font-weight: 400;
    font-size: 17px;
    color: #0b0d0e;
}


.heading small {
    font-weight: 500;
    color: #4FAC92 !important;
    font-size: 16px;
    text-transform: uppercase;
}


.primery-info-content {
    padding-left: 30px;
    border-left: 3px solid #4FAC92;
    color: #fff;
}

.primery-info-content p {
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 400;
    color: #4FAC92;
    margin-bottom: 0;
}





.info-content {
    padding-left: 30px;
    border-left: 3px solid #4FAC92;
    color: #fff;
}

.info-content p {
    font-size: 18px;
    text-transform: capitalize;
    font-weight: 400;
    margin-bottom: 0;
}



a.up-btn {
    position: fixed;
    bottom: 0;
    right: 10%;
    background: #4FAC92;
    color: #fff;
    height: 60px;
    width: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 30px;
    border-radius: 5px;
    border: 1px solid #fff;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
}

a.up-btn:hover {
    color: #4FAC92;
    background: #fff;
    border-color: #4FAC92;
    z-index: 999999999;
}

.header-area.sticky a.up-btn {
    visibility: visible;
    opacity: 1;
    bottom: 5%;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
}


/*PRELOADER CSS*/

.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    -webkit-animation: lds-dual-ring 1.2s linear infinite;
    animation: lds-dual-ring 1.2s linear infinite;
}

.preloader {
    background: #000;
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes lds-dual-ring {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}





.circles {
    margin-bottom: -10px;
}

.circle {
    width: 150px;
    margin: 6px 6px 0px;
    display: inline-block;
    position: relative;
    text-align: center;
    line-height: 1.2;
}

.circle canvas {
    vertical-align: top;
}

.circle strong {
    position: absolute;
    top: 48px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 42px;
    font-size: 48px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
}

.circle strong i {
    font-style: normal;
    font-size: 24px;
    font-weight: normal;
    color: #fff;
    padding-left: 2px;
}

.circle span {
    display: block;
    font-size: 20px;
    letter-spacing: 0px;
    line-height: 58px;
    color: #ffffff;
    font-family: "Oswald";
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
}



.install {
    display: inline-block;
}

.install a {
    display: block;
    width: auto;
    vertical-align: middle;
    padding: 6px 12px;
    line-height: 20px;
    background-color: transparent;
    color: #fff;
    border-radius: 3px;
    text-decoration: none;
    margin: 5px auto;
    transition: all .3s;
}

.install code {
    padding: 6px 12px;
    display: block;
    font: 13px/20px Courier New, Liberation Mono, monospase;
    background-color: transparent;
    border-radius: 4px;
    margin: 5px 0;
    white-space: nowrap;
}



.credits {
    color: #aaa;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
}

.credits img {
    margin-left: 4px;
    border-radius: 4px;
    vertical-align: middle;
}

@media (max-height: 600px),
(max-width: 480px) {
    .credits {
        position: inherit;
    }
}


p.single-soicial-text {
    margin: 0 !important;
}


/*
====================
    overright
=====================
*/
.owl-carousel .owl-item img {
    display: inline-block;
    width: auto;
}





.counter-div {
    padding: 20px;
    background: rgba(5, 5, 5, 0.6);
}

.content-cent {
    align-content: center;
}

.single-counter {
    align-content: center;
}

.single-counter h2 {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 43px;
    color: #CFCFCF;


}

.single-counter p {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 21px;
    color: #BFBFBF !important;

}

.banner-content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 5;
}

.banner-content>.row {
    margin: 0;
    /* reset row margins if needed */
}


.banner-adv {
    margin-top: 8px;
    color: #fff !important;
    line-height: 20px;
    font-weight: 300;
}

.banner-adv strong {
    font-weight: 600;
}

.welcome__wrap1 {
    position: relative;
    width: 100%;
    /* height: 800px; */
    overflow: hidden;
}

.welcome__wrap1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--thickness);
    background: var(--arc-color);
    filter: blur(2px);
    box-shadow:
        0 -4px 20px var(--arc-color),
        0 4px 20px var(--arc-color);
    pointer-events: none;
    z-index: 2;
    animation: glowPulse var(--anim-duration) ease-in-out infinite;
}

.section-market {
    padding-top: 180px;
    position: relative;
    overflow: hidden;
    --arc-color: #4fac92;
    --arc-radius: 2500px;
    --arc-thickness: 4px;
    --arc-rise: -1050px;
    --anim-duration: 3s;
}

@media only screen and (max-width: 767px) {

    .section-market {
          padding-top: 120px !important;
        --arc-radius: 1300px !important;
        /* padding-top: 155px; */
        /* --arc-radius: 1210px; */
        --arc-rise: 160px
    }
}

.section-market::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(-1 * (var(--arc-radius) - var(--arc-rise)));
    transform: translateX(-50%);
    width: calc(var(--arc-radius) * 2);
    height: calc(var(--arc-radius) * 2);
    border-radius: 50%;
    border: var(--arc-thickness) solid var(--arc-color);
    /* full circle */
    /* Keep glow if you like */
    box-shadow: 0 0 18px var(--arc-color), 0 0 36px var(--arc-color);
    pointer-events: none;
    z-index: 2;
    animation: glowPulse var(--anim-duration) ease-in-out infinite;
}

.section-at {
    padding-top: 120px;
    margin-top: -100px;
    padding-bottom: 100px;
    position: relative;
    overflow: hidden;
    --arc-color: #4fac92;
    --arc-radius: 2000px;
    --arc-thickness: 4px;
    --arc-rise: -1050px;
    --anim-duration: 3s;
}




.section-at::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * (var(--arc-radius) - var(--arc-rise)));
    transform: translateX(-50%);
    width: calc(var(--arc-radius) * 2);
    height: calc(var(--arc-radius) * 2);
    border-radius: 50%;
    border: var(--arc-thickness) solid var(--arc-color);
    /* full circle */
    /* Keep glow if you like */
    box-shadow: 0 0 18px var(--arc-color), 0 0 36px var(--arc-color);
    pointer-events: none;
    z-index: 2;
    animation: glowPulse var(--anim-duration) ease-in-out infinite;
}


/* glowing animation */
@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

.per-card {

    border: 1px solid #487D75;
    border-radius: 5px;
    padding: 20px;

}

.lang-btn {
    color: #fff;
    font-family: 'Gilroy-Regular';
    font-size: 16px;
}

.lang-btn-active {
    color: #4FAC92 !important;
    font-family: 'Gilroy-Bold';
    font-style: normal;
    font-weight: 800;
    font-size: 18px;
}

.section-neon {
    --arc-color: #4fac92;
    --thickness: 4px;
    --arc-height: 150px;
    --blur: 8px;
    --anim-duration: 3s;

    background: linear-gradient(180deg, var(--bg1, #0E472E), #041214 60%);
    text-align: center;
}

/* curved arc element */
/* .arc {
    margin: 0 auto;
    width: 120%;
    height: var(--arc-height);
    border-radius: 50%;
    border-top: var(--thickness) solid var(--arc-color);
    filter: blur(var(--blur));
    box-shadow: 0 0 18px var(--arc-color), 0 0 36px var(--arc-color);
    animation: glowPulse var(--anim-duration) ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
} */


/* acccount */

.account-section {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.account-section h1 {
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 36px;
}

.account-cards {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.account-card {
    position: relative;
    background: var(--card-dark);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    flex: 1 1 320px;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Popular badge above the card */
.popular-badge {
    padding: 7px 22px;
    font-weight: 700;
    color: white;
    font-size: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    background: linear-gradient(87.5deg, #0E472E 6.27%, #4FAC92 78.35%);
    border-left: 1px solid #54CCBB;
    border-top: 1px solid #54CCBB;

    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

}

.account-body {
    padding: 28px;
    text-align: start;
    flex: 1;
    background: var(--card-dark);

}


/* Deposit row */
.deposit-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 18px;
}

.deposit-amount {
    color: var(--deposit-green);
    font-weight: 800;
    font-size: 28px;
    letter-spacing: -0.5px;
}


/* Features as two-column table: labels (left) + values (right) */
.features-table {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 140px 1fr;
    row-gap: 5px;
    column-gap: 18px;
    align-items: start;
    font-size: 14px;
}

.feature-label {
    color: var(--muted);
    font-weight: 500;
    align-self: center;
}

.feature-value {
    color: var(--muted-strong);
    font-weight: 400;
    line-height: 1.4;
}

/* Footer button stretches edge-to-edge */
.account-footer {
    margin-top: auto;
}

.btn-start {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 0;
    border-radius: 0 0 10px 10px;
    border: none;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
}

.btn-start img {
    width: 18px;
    height: 18px;
    display: block;
}

.btn-green {
    background: linear-gradient(90deg, var(--green-1), var(--green-2));
    color: white;
}

.btn-grey {
    background: linear-gradient(90deg, #444, #888);
    color: rgba(255, 255, 255, 0.9);
}

/* Description below cards */


/* responsive */
@media (max-width: 680px) {}

/* tp */
.trading-section {
    position: relative;
    z-index: 2;
    padding-top: 200px;
    margin-top: -100px;

}


/* .trading-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--thickness);
    background: var(--arc-color);
    filter: blur(2px);
    box-shadow:
        0 -4px 20px var(--arc-color),
        0 4px 20px var(--arc-color);
    pointer-events: none;
    z-index: 2;
    animation: glowPulse var(--anim-duration) ease-in-out infinite;
} */

/* central content (image + list) */
.content-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    margin: 34px auto 0;
    flex-wrap: wrap;
}

/* left platform graphic */
.platform-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.platform-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow:
        0 10px 30px rgba(3, 3, 3, 0.6),
        0 2px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.03);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
}

/* right features */
.features {
    flex: 1 1 520px;
    max-width: 620px;
    text-align: left;
}

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

.feature-item {
    display: flex;
    align-items: flex-start;
    /* icon aligns with top of text so multi-line wraps nicely */
    gap: 14px;
    margin-bottom: 18px;
}

.feature-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.02);
    padding: 4px;
}


/* button */
.download-wrap {
    margin-top: 36px;
    text-align: center;
}

.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    border-radius: 10px;
    border: none;
    background: linear-gradient(90deg, var(--accent-green-1), var(--accent-green-2));
    box-shadow: 0 8px 30px rgba(46, 138, 116, 0.12), 0 2px 6px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease;
}

.download-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgba(46, 138, 116, 0.14);
}

.download-btn svg {
    transform: translateY(1px);
}

/* responsive adjustments */
@media (max-width:820px) {
    .trading-section h1 {
        font-size: 32px;
    }

    .content-block {
        gap: 20px;
    }

    .platform-img {
        width: 110px;
        height: 110px;
    }

    .features {
        max-width: 520px;
    }
}

@media (max-width:560px) {
    .content-block {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .features {
        text-align: center;
    }

    .feature-item {
        justify-content: center;
        align-items: center;
    }


}

/* contact */

.contact-section {
    padding-top: 160px;
    margin-top: -100px;
}




.form-label {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 6px;
}

.form-label .icon-placeholder {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-inline-end: 8px;
    border-radius: 3px;
    background-position: center;
    background-repeat: no-repeat;
}

.form-control,
.form-select {
    border: none;
    color: #fff;
    background: #222222;
    border-radius: 5px;

}

.form-select {
    height: 38px;
    width: 100%;
    color: #495057;
    padding-inline: 10px;
}

.form-control::placeholder {
    color: #666;
}

.form-control:focus,
.form-select:focus {
    border-color: #4ca987;
    background-color: #353535 !important;

    box-shadow: none;
}

.btn-custom {
    background: linear-gradient(90deg, #0fa, #4FAC92);
    border: none;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 6px;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* space between icon and text */
}

.btn-custom:hover {
    background: linear-gradient(90deg, #4FAC92, #0fa);
}

.btn-custom .icon-placeholder {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
}


.contact-info {
    margin-top: 50px;
}



.contact-option {
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    transition: color 0.3s ease;
}

.contact-option i {
    font-size: 18px;
    background: #222222;
    border-radius: 50px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.contact-option img {
    width: 20px;
    height: 20px;
    transition: filter 0.3s ease;
}

/* Hover effect */
.contact-option:hover {
    color: #4FAC92;
    /* green text */
}

.contact-option:hover img {
    filter: brightness(0) saturate(100%) invert(66%) sepia(98%) saturate(393%) hue-rotate(92deg) brightness(97%) contrast(101%);
    /* This recolors PNG icons to green-ish */
}

/* Dark style for dropdown */
.form-select option {
    background-color: #0c0c0c;
    color: #fff;
}

/* Hover/focus effect for options */
.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
    background-color: #2d3d35 !important;
    /* light greenish bg */
    color: #7de0c0 !important;
}

/* faq */

.faq-section {
    padding-top: 180px;
    margin-top: -120px;
}




.btn-custom {
    background: linear-gradient(90deg, #0fa, #4FAC92);
    border: none;
    color: white;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.btn-custom:hover {
    background: linear-gradient(90deg, #4FAC92, #0fa);
}



footer {
    background: linear-gradient(105.77deg,
            rgba(5, 5, 5, 0.6) 41.5%,
            rgba(72, 125, 117, 0.39) 134.65%);
    border-radius: 7px;
    color: #d1d1d1;
    padding: 50px 30px 20px;
}

footer .logo img {
    max-height: 70px;
}

footer h6 {
    color: #487D75A6;
    margin-bottom: 15px;
}

footer h4 {
    color: #487D75A6;
    margin-bottom: 15px;
}

footer a {
    color: #d1d1d1;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #4FAC92;
}

footer .social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    background: #2a2a2a;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    transition: color 0.3s ease, transform 0.3s ease;
}

footer .social-icons a:hover {
    color: #4FAC92;
    /* icon changes color */
    transform: scale(1.1);
}

footer .disclaimer {
    font-size: 13px;
    line-height: 1.6;
    color: #b5b5b5;
    margin-top: 20px;
}

footer .bottom-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
    padding-top: 15px;
    text-align: left;
    /* align to left */
    font-size: 14px;
    color: #487D75A6;
}

.close-menu i {
    color: #487D75;
}

.close-menu {
    background: linear-gradient(105.77deg, rgba(0, 0, 0, 0.6) 35.89%, rgba(72, 125, 117, 0.39) 134.65%);
    border-radius: 7px;

}

.mob-none {
    display: block !important;
}

.mob-none-flex {
    display: inline-flex !important;
}

.mob-login {
    display: none;

}


.perf-section {
    position: relative;
    min-height: 700px;
    display: grid;
    place-items: center;
    overflow: hidden;
    /* background: #0b0d0e; */
    background: black;
    padding-top: 200px;
    margin-top: -100px;
    padding-bottom: 140px;
}

.perf-section::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--size);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
            var(--c2) 0%,
            var(--c1) 30%,
            rgba(79, 172, 146, 0.25) 60%,
            rgba(14, 71, 46, 0.15) 75%,
            transparent 100%);
    animation: glow var(--speed) ease-in-out infinite;
}

@keyframes glow {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.95);
        opacity: 0.25;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 0.4;
    }
}


#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Center content */
.loader-content {
    text-align: center;
    color: #fff;
}

/* Logo */
.loader-logo {
    width: 190px;
    margin-bottom: 20px;
}

/* Line background */
.loader-line {
    width: 200px;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    overflow: hidden;
    border-radius: 2px;
    margin: 0 auto;
}

/* Progress bar */
.loader-progress {
    width: 0;
    height: 100%;
    background: #fff;
    transition: width 0.3s ease;
}

/* Percent text */
#loader-percent {
    margin-top: 10px;
    font-size: 14px;
}





/* Remove Bootstrap's default arrow */
.accordion-button::after {
    display: none;
}

/* Make sure button text never overlaps arrow */
.accordion-button {
    position: relative;
    padding-right: 2.5rem;
    /* Always keep space for arrow */
    text-align: left;
    /* Keep text aligned properly */
    white-space: normal;
    /* Allow wrapping on mobile */
}

/* Custom arrow */
.accordion-button::before {
    content: "";
    position: absolute;
    right: 1rem;
    /* All arrows in one vertical line */
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #4FAC92;
    /* arrow color */
    transition: transform 0.3s ease;
    pointer-events: none;
    /* arrow doesn’t block clicks */
}

/* Rotate when active (open) */
.accordion-button:not(.collapsed)::before {
    transform: translateY(-50%) rotate(180deg);
}

.counters {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
    /* padding-inline: 25px; */
}

.counters .single-counter {
    /* flex: 1 1 180px; */
    /* grow, shrink, min-width */
    text-align: start;
    /* center text by default */
    padding: 10px;
}

#faq .accordion-button {
    padding-right: 2.5rem;
}

/* Accordion item with gradient border */
/* #faq .accordion-item {
    border: none;
    margin-bottom: 1rem;

    border: 1px solid transparent;
    border-image-slice: 1;
    border-image-source: linear-gradient(87.5deg,
            #196946 6.27%,
            #68F3C2 42.66%,
            #3BCDA3 58.94%);
    overflow: hidden;
} */



#faq .accordion-item {
    position: relative;
    border-radius: 5px;
    margin-bottom: 1rem;
    overflow: hidden;
    background:
        linear-gradient(87.5deg,
            #196946 6.27%,
            #68f3c2a1 42.66%,
            #3bcda394 58.94%) border-box,
        #222222 padding-box;

    border: 1px solid transparent;
}

/* Accordion header button */
#faq .accordion-button {
    border: none;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* let parent item control the curve */
}

/* Accordion body */
#faq .accordion-body {
    border: none;
    background: #222222;
    padding: 0rem 1.25rem 1rem 1.25rem;
}

.site-content {
    text-align: center;
}

.linesty {
    width: 100%;
    object-fit: cover;
}

.img-fill {
    position: absolute;
    top: 0;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width: 100%;
    height: 100%;

}

/* Scroll-animate helper */
.js-animate {
    opacity: 0;
}

.js-animate.animated,
.js-animate.animate__animated {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .js-animate {
        opacity: 1 !important;
    }
}




.download-wrap {
    margin-top: 30px;
    gap: 15px;
    flex-wrap: wrap;
}

.download-btn {
    max-width: 221px;
    transition: transform 0.3s ease;
}

.download-btn:hover {
    transform: scale(1.05);
}

@media (max-width: 1000px) {

    #android-btn,
    #ios-btn,
    #windows-btn {
        display: none;
        /* Hide all initially */
    }
}

/* Tweak these to taste */
.gradient-glow {
    --speed: 5s;
    --c1: #747474;
    /* dark silver */
    --c2: #949494;
    /* mid silver */
    --c3: #b1b1b1;
    /* light silver */
    --glow: #8f8f8f;
    /* darker glow for a softer shine */
    --size: 320%;

    /* font: 900 clamp(40px, 8vw, 96px)/1.05 system-ui, sans-serif;
  letter-spacing: .5px;
  margin: 2rem auto;
  text-align: center; */

    background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c1));
    background-size: var(--size) 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: shimmer var(--speed) linear infinite,
        glowPulse calc(var(--speed)*.75) ease-in-out infinite;

    position: relative;
    text-shadow:
        0 0 3px color-mix(in oklab, var(--glow), transparent 40%),
        0 0 6px color-mix(in oklab, var(--glow), transparent 55%),
        0 0 10px color-mix(in oklab, var(--glow), transparent 70%);
}


/* Moving gradient */
@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* Soft pulsing glow */
@keyframes glowPulse {

    0%,
    100% {
        text-shadow:
            0 0 8px color-mix(in oklab, var(--glow), transparent 55%),
            0 0 18px color-mix(in oklab, var(--glow), transparent 65%),
            0 0 28px color-mix(in oklab, var(--glow), transparent 75%);
        filter: drop-shadow(0 0 8px color-mix(in oklab, var(--glow), transparent 60%));
    }

    50% {
        text-shadow:
            0 0 14px color-mix(in oklab, var(--glow), transparent 35%),
            0 0 30px color-mix(in oklab, var(--glow), transparent 45%),
            0 0 50px color-mix(in oklab, var(--glow), transparent 55%);
        filter: drop-shadow(0 0 14px color-mix(in oklab, var(--glow), transparent 40%));
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gradient-glow {
        animation: none;
    }
}


.glow-text {
    /* richer metallic gradient */
    background: linear-gradient(180.91deg, #FFFFFF 35.94%, #999999 72.88%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

    filter: url(#glow);

    animation: glowPulse 5s ease-in-out infinite;
}

@keyframes glowPulse {

    0%,
    100% {
        text-shadow:
            0 0 1px rgba(255, 255, 255, 0.4),
            0 0 2px rgba(200, 200, 200, 0.3),
            0 0 3px rgba(150, 150, 150, 0.2);
    }

    50% {
        text-shadow:
            0 0 2px rgba(255, 255, 255, 0.336),
            0 0 3px rgba(200, 200, 200, 0.301),
            0 0 4px rgba(150, 150, 150, 0.2);
    }
}


html {
    scroll-padding-top: 80px;
    /* height of your navbar */
}

.form-control:focus {
    color: #fff !important;
}