.trading-banner {width: 100%;overflow: hidden;padding: 54px 0px;position: relative;background: #eef8fc;min-height:400px;}
/* LEFT SIDE */

.banner-left {position: relative;z-index: 2;}
.small-title {color: #1670a5;font-size: 17px;font-weight: 700;letter-spacing: 4px;margin-bottom: 10px;}
.banner-title {color: #07345d;font-size: 46px;line-height: 1.12;font-weight: 700;max-width: 610px;margin-bottom: 20px;}
.banner-description {color: #173f67;font-size: 16px;line-height: 1.5;font-weight: 500;margin: 0;}
    
/* RIGHT SIDE */

.banner-right{position: absolute;top: 0px;max-width: 620px;right: 0px;}
.banner-right img{max-width: 100%;}

/* Card Container */
.card {border-radius: 16px;overflow: hidden;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);position: relative;}

   
/* Header Image Container */
.card-header-img {width: 100%;height: 210px;object-fit: cover;display: block;}

/* Circular Green Icon Badge */
.icon-badge {width: 76px;height: 76px; border: 4px solid #ffffff;border-radius: 50%;display: flex;justify-content: center;align-items: center;position: absolute;top: 118px;left: 20px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);}
.green-color{ background: linear-gradient(135deg, #28a745, #1e7e34);}
.orange-color{ background: linear-gradient(135deg, #c8a143, #c8a143);}
.blue-color{ background: linear-gradient(135deg, #10273f, #10273f);}
.seagreen-color{ background: linear-gradient(135deg, #6943ac, #6943ac);}
.card-color1{background: linear-gradient(180deg, #ffffff 0%, #edf8f6 100%);}
.card-color2{background: linear-gradient(180deg, #ffffff 0%, #fff6e1 100%);}
.card-color3{background: linear-gradient(180deg, #ffffff 0%, #edf6ff 100%);}
.card-color4{background: linear-gradient(180deg, #ffffff 0%, #f4eeff 100%);}
.outers-colors{background: #d9c3ff;padding: 10px;border-radius: 10px;color:#140a24 ;} 
.icon-badge i {color: #ffffff;font-size: 34px;}

/* Card Body Content */
.card-body {padding: 15px;padding-bottom: 0px;min-height: auto;}
.card-title {font-size:16px;font-weight: 600;color: #162b48;margin-bottom: 14px;}
.card-text {font-size: 0.92rem;line-height: 1.55;color: #2c496e;margin-bottom: 18px; }

/* Green Divider Line */
.divider {width: 45px;height: 3px;background-color: #3bb54a;border-radius: 2px;margin: 18px 0;}
.trading-support {width: 100%;padding: 60px 0px;background: #eef8fd;}
.support-grid {display: grid;grid-template-columns: 1.45fr 1fr 1fr 1fr;}

/* Intro */

.support-intro {padding: 0 35px 25px 15px;border-right: 1px solid #c9e0eb;}
.support-intro h3 {font-size: 18px;line-height: 1.3;color: #174c7d;margin-bottom: 25px;font-weight: 700;}
.support-intro h3 span {margin-right: 7px;}
.support-intro p {max-width: 380px;font-size: 16px;line-height: 1.45;color: #174c7d;}


/* Individual Item */

.support-item {min-height: 165px;padding: 0 14px 21px;display: flex;gap: 14px;border-right: 1px solid #d2e5ed;}
.support-item:nth-child(2),
.support-item:nth-child(3),
.support-item:nth-child(4) {border-bottom: 1px solid #d2e5ed;}
.support-item:nth-child(5) {border-right: 1px solid #c9e0eb;}
.icon-2 {min-width: 64px;width: 64px;height: 64px;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 28px;flex-shrink: 0;}
.icon.blue {background: #008bc5;}
.icon.green {background: #45ad45;}
.icon.purple {background: #7650aa;}
.icon.orange {background: #ff8a00;}
.icon.teal {background: #079b9e;}
.icon.red {background: #df3150;}
/* Content */
.content {padding-top: 5px;}
.content h4 {color: #103e6e;font-size: 17px;line-height: 1.3;font-weight: 800;margin-bottom: 8px;}
.content p {color: #174c7d;font-size: 14px;line-height: 1.45;}
/* Second Row */
.support-item:nth-child(n+5) {padding-top: 25px;border-bottom: none;}





/* =========================
   HOW WE WORK
========================= */

.how-work {padding: 10px 40px 30px;background: #fff;}

/* =========================
   HEADING
========================= */

.section-heading2 {margin-bottom: 25px;}
.section-heading2 h3 {font-size: 18px;line-height: 1.3;color: #174c7d;margin-bottom: 25px;font-weight: 700;}
.section-heading2 h3 span {font-size: 25px;margin-right: 8px;}

/* =========================
   WORK STEPS
========================= */

.work-steps {display: grid;grid-template-columns: repeat(5, 1fr);}

/* =========================
   SINGLE STEP
========================= */

.work-step {position: relative;padding: 0 22px 0 15px;min-height: 225px;border-right: 2px solid #e1eaf0;}
.work-step:last-child {border-right: none;}

/* =========================
   TOP BOX
========================= */

.step-top {position: relative;height: 105px;display: flex;align-items: center;}

/* Number Circle */

.number {position: absolute;left: -14px;top: -2px;width: 68px;height: 68px;border-radius: 50%;background: #3769a8;color: #fff;border: 4px solid #fff;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: 800;z-index: 3;}

/* Number Colors */

.green-number {background: #4caf50;}
.orange-number {background: #f58b17;}
.teal-number {background: #0b999b;}
.purple-number {background: #7350a8;}


/* =========================
   COLOR STEP BOX
========================= */

.step-box {width: 82%;height: 84px;margin-left: 15px;display: flex;align-items: center;justify-content: center;color: #fff;font-size: 38px;clip-path: polygon(0 0,82% 0,100% 50%,82% 100%,0 100% );}


/* Colors */

.blue {background: #3973b7;}
.green {background: #4caf50;}
.orange {background: #f7941d;}
.teal {background: #0aa1a3;}
.purple {background: #7753aa;}


/* =========================
   ARROW BETWEEN STEPS
========================= */

.arrow {position: absolute;right: -3px;top: 44px;width: 18px;height: 18px;border-top: 2px solid #2475a3;border-right: 2px solid #2475a3;transform: rotate(45deg);background: #fff;z-index: 4;}


/* =========================
   CONTENT
========================= */

.step-content {
    padding: 8px 5px 0;
}

.step-content h4 {font-size: 19px;line-height: 1.3;color: #103d6d;font-weight: 800;margin-bottom: 7px;}

.step-content p {font-size: 15px;line-height: 1.45;color: #174a78;max-width: 240px;}


         .about-section {padding: 80px 0;position: relative;background-image: radial-gradient(#e0e0e0 1px, transparent 1px);background-size: 20px 20px;}

        /* Top Yellow Accent Line */
        .accent-line {width: 40px;height: 3px;background-color: #d4a340;position: relative;margin-bottom: 15px;}
        .accent-line::after {content: '';position: absolute;right: -4px;top: -2px;width: 0;height: 0;border-top: 3.5px solid transparent;border-bottom: 3.5px solid transparent;border-left: 6px solid #d4a340;}

        /* Heading Style */
        .main-heading {font-size: 2.3rem;font-weight: 700;color: #12304d;margin-bottom: 20px;}
        .main-heading span {color: #c89531;}

        /* Text Style */
        .description-text {color: #55606d;font-size: 0.98rem;line-height: 1.7;font-weight: 400;}

        /* Image Wrapper */
        .img-wrapper {position: relative;}
        .main-img {border-radius: 20px;width: 100%;height: auto;object-fit: cover;box-shadow: 0 10px 30px rgba(0,0,0,0.08);}

        /* Gold Badge Overlay */
        .gold-badge {position: absolute;left: -35px;top: 50%;transform: translateY(-50%);background: linear-gradient(135deg, #cfa043 0%, #b88628 100%);color: #ffffff;padding: 25px 20px;border-radius: 20px;border: 3px solid #ffffff;width: 200px;box-shadow: 0 8px 20px rgba(0,0,0,0.15);text-align: left;z-index: 2;}
        .gold-badge .icon {font-size: 2.2rem;margin-bottom: 8px;display: inline-block;}
        .gold-badge .badge-title {font-size: 0.75rem;line-height: 1.2;font-weight: 500;opacity: 0.9;margin-bottom: 5px;}
        .gold-badge .badge-stat {font-size: 2.2rem;font-weight: 700;line-height: 1;margin-bottom: 5px;}
        .gold-badge .badge-subtitle {font-size: 0.75rem;line-height: 1.2;opacity: 0.9;}


        /* we trade offer section start */

        .services-section {padding: 60px 0;background:#eef8fd;}

        /* Service Card Styling */
        .service-card {background: #ffffff;border-radius: 16px;padding: 16px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);border: 1px solid rgba(0, 0, 0, 0.03);height: 100%;transition: transform 0.3s ease, box-shadow 0.3s ease;}
        .service-card:hover {transform: translateY(-5px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);}
        /* Image Styling */
        .service-img {width: 100%;height: 180px;object-fit: cover;border-radius: 12px;}

        /* Numbers and Icon Badges */
        .badge-number {background-color: #c89531;color: #ffffff;font-weight: 600;font-size: 0.85rem;padding: 4px 10px;border-radius: 50px;display: inline-block;}
        .badge-icon {background-color: #c89531;color: #ffffff;width: 32px;height: 32px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;font-size: 0.9rem;}

        /* Typography */
        .service-title {color: #12304d;font-size: 1.2rem;font-weight: 700;margin-top: 12px;margin-bottom: 8px;}
        .service-desc {color: #6c757d;font-size: 0.88rem;line-height: 1.6;margin-bottom: 0;}
        .why-choose-section {padding: 70px 0;}

        /* Heading Styling */
        .section-heading-wrapper {display: flex;align-items: center;justify-content: center;gap: 15px;margin-bottom: 50px;}
        .heading-line {width: 35px;height: 2px;background-color: #d4a340;position: relative;}
        .heading-line.left::before {content: '';position: absolute;right: 0;top: -2.5px;width: 0;height: 0;border-top: 3.5px solid transparent;border-bottom: 3.5px solid transparent;border-left: 6px solid #d4a340;}
        .heading-line.right::after {content: '';position: absolute;right: 0;top: -2.5px;width: 0;height: 0;border-top: 3.5px solid transparent;border-bottom: 3.5px solid transparent;border-left: 6px solid #d4a340;}
        .section-heading {font-size: 2.2rem;font-weight: 700;color: #12304d;margin: 0;text-align: center;}
        .section-heading span {color: #c89531;}

        /* Feature Card Styling */
        .feature-card {background: #ffffff;border-radius: 16px;padding: 24px 20px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04);border: 1px solid rgba(0, 0, 0, 0.03);display: flex;align-items: flex-start;gap: 18px;height: 100%;transition: transform 0.3s ease, box-shadow 0.3s ease;}
        .feature-card:hover {transform: translateY(-4px);box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);}

        /* Gold Icon Box */
        .icon-boxi {width: 48px;height: 48px;background: linear-gradient(135deg, #d4a340 0%, #b88628 100%);color: #ffffff;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 1.25rem;flex-shrink: 0;}

        /* Card Content */
        .feature-title {color: #12304d;font-size: 1.05rem;font-weight: 700;margin-bottom: 6px;line-height: 1.3;}
        .feature-desc {color: #6c757d;font-size: 0.88rem;line-height: 1.5;margin: 0;}

        /* we trade offer section end */
        /* Responsive Adjustments */ 
        /* cta banner section start */
        .cta-banner-section {padding: 0px 0;margin-bottom: 50px;background-color: #ffffff;position: relative;/* background-image: radial-gradient(#e0e0e0 1px, transparent 1px); */background-image: url("../../images/resources/bg-bulding.jpg");/* background-size: 20px 20px; */background-repeat: no-repeat;background-size: 100%;}

        /* Slanted Image Gallery Container */
        .slanted-gallery {display: flex;height: 100%;min-height: 380px;overflow: hidden;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);}
        .slanted-img-item {flex: 1;position: relative;margin-right: -25px;clip-path: polygon(25px 0%, 100% 0%, calc(100% - 25px) 100%, 0% 100%);transition: flex 0.4s ease;}
        .slanted-img-item:first-child {clip-path: polygon(0 0, 100% 0, calc(100% - 25px) 100%, 0% 100%);}
        .slanted-img-item:last-child {margin-right: 0;clip-path: polygon(25px 0, 100% 0, 100% 100%, 0% 100%);}
        .slanted-img-item img {width: 100%;height: 100%;object-fit: cover;display: block;}
        /* Hover Effect for Gallery */
        .slanted-img-item:hover {flex: 1.3;}
        /* Content Typography */
        .content-heading {font-size: 2.2rem;font-weight: 700;color: #12304d;line-height: 1.25;margin-bottom: 20px;}
        .content-heading span {color: #c89531;display: block;}
        .content-desc-main {color: #4a5568;font-size: 1.02rem;font-weight: 500;line-height: 1.6;margin-bottom: 18px;}
        .content-desc-main strong {color: #12304d;}
        .content-desc-sub {color: #6c757d;font-size: 0.92rem;line-height: 1.7;margin-bottom: 30px;}

     
       
        /* cta banner section end */
        
       
/*============================
    Responsive  
 ========================== */

@media (max-width: 1100px) {
    .banner-title {font-size: 38px;}
    .banner-left {padding-left: 30px;}
    .small-title {font-size: 14px;}
    .support-grid {grid-template-columns: 1fr 1fr;}
    .support-intro {grid-column: span 2;border-right: none;border-bottom: 1px solid #c9e0eb;padding-bottom: 25px;margin-bottom: 0;}
    .support-item:nth-child(5) {border-right: none;}
    .how-work {padding: 30px 25px;}
    .work-steps {grid-template-columns: repeat(2, 1fr);row-gap: 30px;}
    .work-step {border-right: 1px solid #e1eaf0;}
    .work-step:nth-child(2),
    .work-step:nth-child(4) {border-right: none;}
    .last-step {border-right: none !important;}
}

 @media (max-width: 991px) {
    .gold-badge {position: relative;left: 0;top: 0;transform: none;margin-bottom: -40px;margin-left: 20px;}
     .slanted-gallery { min-height: 280px; margin-bottom: 30px; }
     .content-heading { font-size: 1.8rem; }
}


/* =========================
   TABLET
========================= */


@media (max-width: 768px) {

   .trading-banner,
   .trading-content {min-height: auto;}
   .trading-content {display: block;}
   .banner-left {width: 100%;padding: 35px 25px;}
   .banner-left::after {display: none;}
   .banner-right {width: 100%;height: 300px;min-height: 300px;background-size: auto 300px;}
   .banner-title {font-size: 34px;}
   .banner-description {font-size: 15px;}
   .section-heading {font-size: 1.6rem;}
}

@media (max-width: 700px) {

    .trading-support {padding: 30px 20px;}
    .support-grid {grid-template-columns: 1fr;}
    .support-intro {grid-column: span 1;padding: 0 0 25px;}
    .support-intro h2 {font-size: 25px;}
    .support-intro h3 {font-size: 16px;}
    .support-item {padding: 25px 0;min-height: auto;border-bottom: 1px solid #c9e0eb !important;}
    .support-item:nth-child(n+5) {padding-top: 25px;}
    .icon {width: 55px;min-width: 55px;height: 55px;font-size: 23px;}
    .content h4 {font-size: 16px;}
    .content p {font-size: 14px;}
    .how-work {padding: 30px 18px;}
    .section-heading2 h2 {font-size: 28px;}
    .section-heading2 h3 {font-size: 16px;}
    .work-steps {grid-template-columns: 1fr;gap: 25px;}
    .work-step {min-height: auto;padding: 0 0 25px;border-right: none;border-bottom: 1px solid #dce7ed;}
    .work-step:last-child {border-bottom: none;}
    .step-top {height: 95px;}
    .number {width: 58px;height: 58px;left: -3px;font-size: 17px;}
    .step-box {height: 75px;width: 85%;margin-left: 25px;font-size: 32px;}
    .arrow {display: none;}
    .step-content {padding-left: 25px;}
    .step-content h4 {font-size: 18px;}
    .step-content p {font-size: 14px;max-width: 100%;}
}

/* =========================
   MOBILE
========================= */

@media (max-width: 480px) {
    .logo-box {transform: scale(.85);transform-origin: left center;margin-bottom: 0;}
    .small-title {font-size: 12px;letter-spacing: 2px;}
    .banner-title {font-size: 30px;}
    .banner-right {width: 100%;height: 257px;min-height: 255px;background-size: auto 300px;}
    .banner-right {position: relative;bottom: 0px;max-width: 620px;right: 0px;}
    .trading-banner {width: 100%;padding: 1px 0px;padding-bottom: 0px;}
    .card-body {min-height: 100%; }
    .support-item{border-right: none;}

}