@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins';
}

html, body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%;
}
.fw-100{
    font-weight:100 !important;
}
.fw-200{
    font-weight:200 !important;
}
.fw-300{
    font-weight:300 !important;
}
.fw-400{
    font-weight: 400 !important;
}
.fw-500{
    font-weight: 500 !important;
}
.fw-600{
    font-weight:600 !important;
}
.fw-bold{
    font-weight: 700 !important;
}
.fw-800{
    font-weight: 800 !important;
}
.color1{
    color:#090909;
}
.color2{
    color:#5F5F5F;
}
.color3{
    color: #BEBEBE;
}
.color4{
    color: #080F18;
}
.color5{
    color: #646464;
}
/* Footer Styles */
.footer {
    background:url('../images/footer_bg.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
    color: white;
    padding: 30px 0;
    border-top-right-radius: 50px !important;
    border-top-left-radius: 50px !important;
    
}

.set-color{
    background-color:#191919 !important;
    border-radius: 20px;
}

.copy_right {
    font-size: 15px;
    color: #fcfcfc;
}

/* .card.set_card {
    position: relative;
    background-color: transparent;
    padding: 4px;
    border-radius: 27px;
}

.card.set_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(164, 31, 82, 1));
    border-radius: 27px;
    z-index: -1; 
} */

/* .card.set_card {
    border-radius: 50px; 
    border: 1px solid transparent;
    background: linear-gradient(45deg,red,blue) border-box; 
    mask: 
        linear-gradient(#000 0 0) padding-box, 
        linear-gradient(#000 0 0);
    mask-composite: exclude; 
} */

/* .card.set_card {
    position: relative;
    background: transparent;
    padding: 20px 30px;
  }
.card.set_card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px; 
    padding: 1px; 
    background:linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(164, 31, 82, 1));
    mask: 
      linear-gradient(#000 0 0) content-box, 
      linear-gradient(#000 0 0);
    mask-composite: exclude; 
  } */

.same-height-row {
    display: flex;
    height: 100%;
    justify-content: space-around;
}

.set-border {
    position: relative;
    padding: 20px 30px;
    background: transparent;
}

.set-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 1px; 
    background:linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(164, 31, 82, 1));
    mask: 
      linear-gradient(#000 0 0) content-box, 
      linear-gradient(#000 0 0);
    mask-composite: exclude; 
    opacity: .5;
    pointer-events: none;
}

.set-border2 {
    position: relative;
    padding: 20px 30px;
    background: transparent;
}

.set-border2::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30px;
    padding: 1px; 
    background:linear-gradient(180deg, rgba(164, 31, 82, 1), rgba(255, 255, 255, 1));
    mask: 
      linear-gradient(#000 0 0) content-box, 
      linear-gradient(#000 0 0);
    mask-composite: exclude; 
    opacity: .5;
    pointer-events: none;
}
.logo {
    width: 160px;
}

.about h5 {
    font-size: 18px;
    font-weight: bold;
}

.about p {
    font-size: 14px;
    color: #ccc;
}

.social-icons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-icons a {
    color: white;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Adjust size */
    height:40px; /* Adjust size */
    color: white;
    font-size: 18px;
    border-radius: 50%; /* Makes it a circle */
    border:1px solid #D7D7D7;
    text-decoration:none;
    transition: 0.3s ease-in-out;
}

.social-icons a:hover {
    color: #f59227;
}

/* Bottom Footer */
.bottom-footer {
    padding-top:30px;
    background:#12040A url('../images/footer1_bg.png');
}

.bottom-footer h2{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    padding-bottom: 5px;
}

/* Underline only on the four column headings (TRADEWELL, POLICIES, EXTERNAL LINKS,
   DOWNLOADS), not on other footer h2s like "TRADEWELL SECURITIES LIMITED". */
.bottom-footer h2.footer-col-head {
    border-bottom: 1px solid #A12353;
}


.bottom-footer ul {
    list-style: none;
    padding: 0;
}

.bottom-footer ul li {
    margin-bottom: 10px;
}

.bottom-footer ul li a {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s ease;
    font-size: 15px;
}
.footer-divider {
    border: none;
    height: 2px;
    background: #fff;
    margin: 20px 0;
}

.bottom-footer ul li a:hover {
    color: #f59227;
    text-decoration: underline;
}

.footer_p {
    opacity: 0.8;
}

a.ext_link {
    color: #fff;
    text-decoration: none;
}

a.ext_link:hover {
    color: orange;
    text-decoration: underline;
}
/* Responsive adjustments */

@media screen and (min-width: 320px) and (max-width: 395px) {  
    
    .fs-12{
        font-size:7px !important;
    }
    .fs-13{
        font-size:13px !important;
    }
    .fs-15{
        font-size:13px !important;
    } 
    .fs-16{
     font-size:12px !important;
    }
    .fs-17{
        font-size:14px !important;
    }
    .fs-18{
        /* font-size: 16px !important; */
        font-size: 13px !important;
    }
    .fs-20{
        font-size:14px !important;
    }
    .fs-22{
        font-size:19px !important;
    }
    .fs-23{
        font-size:19px !important;
    }
    .fs-24{
        font-size: 17px !important;
    }
    .fs-25{
        font-size: 16px !important;
    }
    .fs-28{
        font-size: 17px !important;
    }
    .fs-30{
        font-size: 20px !important;
    }
    .fs-36{
        font-size: 30px !important;
    }
    .fs-38{
        font-size:28px !important;
    }
    .fs-40{
        font-size:20px !important;
    }
    .fs-45{
        /* font-size:30px !important; */
        font-size:25px !important;
    }
    .fs-50{
        font-size:20px !important;
    }
    .fs-55{
        font-size:20px !important;
    }
    .common-padding-nav{
        padding:0px 15px !important;          
    }   
    .common-padding{
        padding: 0px 10px !important;
    } 
    .footer {
        background:url('../images/footer_bg_mobile.png');
        background-size:cover;
        background-repeat:no-repeat;
        color: white;
        padding: 30px 0;
        border-top-right-radius: 50px !important;
        border-top-left-radius: 50px !important;
    }
    .set-padding{
        padding:0px 30px !important;
    }
    .social-icons {
        margin-top: 15px;
        display: flex;
        justify-content: left;
        gap: 10px;
    }
}
@media screen and (min-width: 396px) and (max-width: 768px) {
    .fs-12{
        font-size:7px !important;
    }
    .fs-13{
        font-size:13px !important;
    }
    .fs-15{
        font-size:15px !important;
    } 
    .fs-16{
     font-size:12px !important;
    }
    .fs-17{
        font-size:14px !important;
    }
    .fs-18{
        font-size: 16px !important;
    }
    .fs-20{
        font-size:17px !important;
    }
    .fs-22{
        font-size:22px !important;
    }
    .fs-23{
        font-size:19px !important;
    }
    .fs-24{
        font-size: 20px !important;
    }
    .fs-25{
        font-size: 16px !important;
    }
    .fs-28{
        font-size: 17px !important;
    }
    .fs-30{
        font-size: 20px !important;
    }
    .fs-36{
        font-size: 36px !important;
    }
    .fs-38{
        font-size:30px !important;
    }
    .fs-40{
        font-size:25px !important;
    }
    .fs-45{
        font-size:30px !important;
    }
    .fs-55{
        font-size:25px !important;
    }
    .fs-50{
        font-size:30px !important;
    }
    .common-padding-nav{
        padding:0px 20px !important;          
    }
    .common-padding{
        padding: 0px 10px !important;
    } 
    .footer {
        background:url('../images/footer_bg_mobile.png');
        background-size:cover;
        background-repeat:no-repeat;
        color: white;
        padding: 30px 0;
        border-top-right-radius: 50px !important;
        border-top-left-radius: 50px !important;
    }
    .set-padding{
        padding:0px 30px !important;
    }
    .social-icons {
        margin-top: 15px;
        display: flex;
        justify-content: left;
        gap: 10px;
    }
}
/* Media Queries for Responsiveness */
@media screen and (min-width: 768px) and (max-width: 992px) {
    .social-icons {
        margin-top: 15px;
        display: flex;
        justify-content: center !important;
        gap: 10px;
    }
    .common-padding-nav{
        padding: 0px 30px !important;
    }
    .fs-11{
        font-size:10px !important;
    }
    .fs-12{
        font-size:11px !important;
    }
    .fs-13{
        font-size:13px !important;
    }
    .fs-13{
        font-size:13px !important;
    }
    .fs-16{
        font-size:16px !important;
    }
    .fs-17{
        font-size:17px !important;
    }
    .fs-15{
        font-size:15px !important;
    } 
    .fs-18{
        font-size: 18px !important;
    }
    .fs-20{
        font-size:20px !important;
    }
    .fs-21{
        font-size:21px !important;
    }
    .fs-22{
        font-size:22px !important;
    }
    .fs-23{
        font-size:23px !important;
    }
    .fs-24{
        font-size: 24px !important;
    }
    .fs-28{
        font-size: 28px !important;
    }
    .fs-30{
        font-size: 30px !important;
    }
    .fs-36{
        font-size: 36px !important;
    }
    .fs-38{
        font-size:38px !important;
    }
    .fs-40{
        font-size:40px !important;
    }
    .fs-45{
        font-size:45px !important;
    }
    .fs-50{
        font-size:49px !important;
    }
    .fs-60{
        font-size:60px !important;
    }
    .common-padding{
        padding: 0px 30px !important;
    } 
    .footer {
        background:url('../images/footer_bg_mobile.png');
        background-size:cover;
        background-repeat:no-repeat;
        color: white;
        padding: 30px 0;
        border-top-right-radius: 50px !important;
        border-top-left-radius: 50px !important;
    }
    .set-padding{
        padding:0px 30px !important;
    }  
}
  
@media screen and (min-width: 993px) {

    .common-padding{
        padding: 0px 100px !important;
        max-width: 1350px;
    } 
    
    .fs-11{
        font-size:10px !important;
    }
    .fs-12{
        font-size:11px !important;
    }
    .fs-13{
        font-size:13px !important;
    }
    .fs-16{
        font-size:12px !important;
    }
    .fs-15{
        font-size:15px !important;
    } 
    .fs-17{
        font-size:14px !important;
    }
    .fs-18{
        font-size: 14px !important;
    }
    .fs-20{
        font-size:20px !important;
    }
    .fs-21{
        font-size:21px !important;
    }
    .fs-22{
        font-size:22px !important;
    }
    .fs-23{
        font-size:23px !important;
    }
    .fs-24{
        font-size: 24px !important;
    }
    .fs-28{
        font-size: 25px !important;
    }
    .fs-30{
        font-size: 30px !important;
    }
    .fs-36{
        font-size: 36px !important;
    }
    .fs-38{
        font-size:38px !important;
    }
    .fs-40{
        font-size:35px !important;
    }
    .fs-45{
        font-size:45px !important;
    }
    .fs-50{
        font-size:55px !important;
    }
    .fs-60{
        font-size:60px !important;
    }

 
}
@media screen and (min-width: 1540px) {
    .fs-16{
        font-size:18px !important;
    }
}
@media screen and (min-width: 1440px) {
    .fs-17{
        font-size:17px !important;
    }
    .fs-18{
        font-size:17px !important;
    }
    .fs-16{
        font-size:15px !important;
    }
    .fs-17{
        font-size:16px !important;
    }
    .fs-40{
        font-size:41px !important;
    }

}