:root {
   --surface-color: #1b262c;
   --bg-color: #031119;
   --text-color: #ffffff;
   --accent-color: #e3a127;
   --circle-bg: #0e1117;
   --nav-color: rgba(255, 255, 255, .8);
   --nav-hover-color: #e3a127;
   --nav-dropdown-background-color: #29343a;
   --nav-dropdown-hover-color: #e3a127
 }

 * {
   box-sizing: border-box
 }

 body {
   margin: 0;
   font-family: 'Poppins', sans-serif;
   background: var(--bg-color);
   color: var(--text-color)
 }

 

 .container-custom {
   max-width: 90%;
   margin: auto
 }

 /* ---------- Navbar ---------- */
 .navbar {
   width: 90%;
   margin: auto;
   margin-top: 15px;
   background: var(--surface-color);
   border-radius: 50px;
   padding: 5px 0px;
   box-shadow: 0 2px 15px rgba(0, 0, 0, .1)
 }

 .navbar-brand img {
   height: 50px;

 }

 .nav-link {
   color: var(--nav-color);
   margin: 0 .3rem;
   font-weight: 500
 }

 .nav-link:hover,
 .nav-link:focus {
   color: var(--nav-hover-color)
 }

 .nav-link.active {
   color: var(--accent-color) !important
 }

 .navbar-toggler-icon,
 .navbar-toggler-icon::before,
 .navbar-toggler-icon::after {
   background: var(--text-color);
   width: 24px;
   height: 2px;
   display: block;
   position: relative;
   content: ""
 }

 .navbar-toggler-icon::before {
   position: absolute;
   top: -8px;
   left: 0
 }

 .navbar-toggler-icon::after {
   position: absolute;
   top: 8px;
   left: 0
 }

 .btn-login,
 .btn-close,
 .btn-register {
   border-radius: 30px;
   font-weight: 600;
   padding: .4rem 1rem
 }

 .btn-login {
   background: var(--bg-color);
   color: #fff;
   margin-right: 10px
 }

 .btn-register {
   background: var(--accent-color);
   color: #fff;
   padding: .4rem 1.5rem
 }

 .btn-register:hover {
   opacity: .9
 }

 /* ---------- Dropdowns ---------- */
 .dropdown-menu {
   background: var(--surface-color);
   border: none;
 }


 .dropdown-menu .dropdown-item {
   color: var(--text-color);
   width: 280px;

 }

 .dropdown-item:hover,
 .dropdown-item:focus {
   background: transparent;
   color: var(--nav-dropdown-hover-color)
 }

 .dropdown-submenu {
   position: relative
 }

 .dropdown-submenu>.dropdown-menu {
   top: 0;
   left: 100%;
   margin-top: -6px;
   display: none;
   border-radius: 5px
 }

 /* Hover on desktop */
 @media (min-width:992px) {
   .dropdown:hover>.dropdown-menu {
     display: block
   }

   .dropdown-submenu:hover>.dropdown-menu {
     display: block
   }
 }

 @media (max-width: 991.98px) {
   .dropdown-menu {
     position: relative !important;
     width: 100% !important;
   }

   .dropdown-submenu>.dropdown-menu {
     left: 0 !important;
     top: 0 !important;
     margin-left: 1rem;
     display: none;
   }

   .dropdown-submenu>.dropdown-menu.show {
     display: block;
   }
 }

 /* Click to toggle on mobile */
 @media (max-width:991.98px) {
   .dropdown-submenu>.dropdown-menu {
     margin-left: 1rem
   }
 }

 .dropdown-submenu>.dropdown-toggle::after {
   content: "\f105";
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   float: right;
   border-top: none;
 }

 /* ---------- Hero Section ---------- */
 .hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: 3rem 1rem;
   position: relative
 }

 .hero h1 {
   font-size: clamp(2.5rem, 5vw, 4rem);
   font-weight: 700;
   line-height: 1.2
 }

 .hero p {
   max-width: 500px;
   font-size: 1.1rem;
   margin-top: 1.5rem;
   opacity: .85
 }

 .btn-moreview {
   background: var(--surface-color);
   text-decoration: none;
   color: #fff;
   padding: .7rem 1.8rem;
   border: none;
   border-radius: 50px;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   margin-top: 2rem;
   transition: background .3s
 }

 .btn-moreview:hover {
   background: #d4901c
 }

 .hero-image {
   text-align: center;
   position: relative
 }

 .hero-image img {
   max-width: 100%;
   height: auto;
   position: relative;
   z-index: 2
 }

 .circle-bg {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90%;
   max-width: 400px;
   aspect-ratio: 1;
   border-radius: 50%;
   /* background: var(--circle-bg); */
   z-index: 1
 }

 /* ---------- Social Icons ---------- */
 .social-icons {
   position: absolute;
   right: 2.5rem;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
   z-index: 99;


 }

 .social-icons::before,
 .social-icons::after {
   content: "";
   width: 2px;
   height: 60px;
   background: #555;
   margin-left: 5px !important;


 }

 .social-icons a {
   color: rgba(255, 255, 255, .8);
   font-size: 1.1rem;
   transition: .3s;

 }

 .social-icons a:hover {
   color: var(--accent-color)
 }

 @media(max-width:1199px) {
   .social-icons {
     display: none
   }
 }

 @media(max-width:768px) {
   .hero {
     text-align: center;
     margin-top: 50px
   }

   .hero-content {
     margin-bottom: 2rem
   }
 }


 /* Join Us Popup style here  */

 /* Modal Styles */

 .form-control input {
   all: unset;
   padding: 15px;
   border-radius: 12px;
   border: 2px solid transparent;
   box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, .0.1);
   transition: border .3s ease-in-out;
 }

 .custom-modal {
   border-radius: 15px;
   box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
   border: none;
   font-family: 'Segoe UI', sans-serif;
 }

 .custom-header {
   background: linear-gradient(45deg, #007bff, #6610f2);
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   padding: 1rem 1.5rem;
 }

 /* Form Inputs */
 .modal-body .form-label {
   font-weight: 500;
   color: var(--text-color);
 }

 .modal-body .form-control:focus,
 .modal-body .form-select:focus {
   border-color: var(--accent-color);
   box-shadow: var(--nav-hover-color);
 }

 /* Buttons */
 #joinUsModal .btn-outline-primary,
 #joinUsModal .btn-outline-warning {
   transition: all 0.3s ease-in-out;
 }

 #joinUsModal .btn-outline-primary:hover {
   background-color: #0d6efd;
   color: #fff;
 }

 #joinUsModal .btn-outline-warning:hover {
   background-color: #ffc107;
   color: #000;
 }



 /* footer-style */


 .footer-section {
   background: var(--nav-dropdown-background-color);
   position: relative;
 }

 .footer-cta {
   border-bottom: 1px solid #373636;

 }

 .single-cta i {
   color: var(--accent-color);
   font-size: 30px;
   float: left;
   margin-top: 8px;
 }

 .Useful_links li a {
   text-decoration: none;
 }

 .Useful_terms li a {
   text-decoration: none;
 }

 .cta-text {
   padding-left: 15px;
   display: inline-block;
 }

 .cta-text h4 {
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 2px;
 }

 .cta-text span {
   color: #757575;
   font-size: 15px;
 }

 .footer-content {
   position: relative;
   z-index: 2;
 }

 .footer-pattern img {
   position: absolute;
   top: 0;
   left: 0;
   height: 330px;
   background-size: cover;
   background-position: 100% 100%;
 }

 .footer-logo {
   margin-bottom: 30px;
 }

 .footer-logo img {
   max-width: 200px;
 }

 .footer-text p {
   margin-bottom: 14px;
   font-size: 14px;
   color: #7e7e7e;
   line-height: 28px;
 }

 .footer-social-icon span {
   color: #fff;
   display: block;
   font-size: 20px;
   font-weight: 700;
   font-family: "Poppins", sans-serif;
   margin-bottom: 20px;
 }

 .footer-social-icon a {
   color: #fff;
   font-size: 16px;
   margin-right: 15px;
 }

 .footer-social-icon i {
   height: 40px;
   width: 40px;
   text-align: center;
   line-height: 38px;
   border-radius: 50%;
 }

 .facebook-bg {
   background: #3b5998;
 }

 .twitter-bg {
   background: #55acee;
 }

 .google-bg {
   background: #dd4b39;
 }

 .footer-widget-heading h3 {
   color: #fff;
   font-size: 20px;
   font-weight: 600;
   margin-bottom: 40px;
   position: relative;
 }

 .footer-widget-heading h3::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: -15px;
   height: 2px;
   width: 50px;
   background: var(--accent-color);
 }

 .footer-widget ul li {
   display: inline-block;
   float: left;
   width: 50%;
   margin-bottom: 12px;
 }

 .footer-widget ul li a:hover {
   color: var(--accent-color);
 }

 .footer-widget ul li a {
   color: #878787;
   text-transform: capitalize;
 }

 .subscribe-form {
   position: relative;
   overflow: hidden;
 }

 .subscribe-form input {
   width: 100%;
   padding: 14px 28px;
   background: #0e1117;
   border: 1px solid #2e2e2e;
   color: #fff;
 }

 .subscribe-form button {
   position: absolute;
   right: 0;
   background: var(--accent-color);
   padding: 13px 20px;
   border: 1px solid var(--accent-color);
   top: 0;
 }

 .subscribe-form button i {
   color: #fff;
   font-size: 22px;
   transform: rotate(-6deg);
 }

 .copyright-area {
   background: var(--bg-color);
   padding: 25px 0;
 }

 .copyright-text p {
   margin: 0;
   font-size: 14px;
   color: #878787;
 }

 .copyright-text p a {
   color: #ff5e14;
 }

 .footer-menu li {
   display: inline-block;
   margin-left: 20px;
 }

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

 .footer-menu li a {
   font-size: 14px;
   color: #878787;
 }









 /* about-sec */
 .about-section {
   background: radial-gradient(circle at top left, #1b262c 0%, #031119 100%);
 }

 .section-about {
   background-color: var(--bg-color);
   color: var(--text-color);
   padding: 80px 20px;
 }

 .section-about h2 {
   color: var(--accent-color);
   font-size: 2.8rem;
   font-weight: 700;
   margin-bottom: 20px;
 }

 .section-about p {
   color: var(--secondary-text);
   line-height: 1.7;
   font-size: 1.1rem;
 }

 img {
   max-width: 100%;
   height: auto;
 }



 .sec-title {
   position: relative;
   z-index: 1;
   margin-bottom: 60px;
 }

 .sec-title .title {
   position: relative;
   display: block;
   font-size: 18px;
   line-height: 24px;
   color: var(--nav-color);
   font-weight: 500;
   margin-bottom: 15px;
 }

 .sec-title h2 {
   position: relative;
   display: block;
   font-size: 40px;
   line-height: 1.28em;
   color: var(--accent-color);
   font-weight: 600;
   padding-bottom: 18px;
 }

 .sec-title h2:before {
   position: absolute;
   content: '';
   left: 0px;
   bottom: 0px;
   width: 50px;
   height: 3px;
   background-color: #d1d2d6;
 }

 .sec-title .text {
   position: relative;
   font-size: 16px;
   line-height: 26px;
   color: #848484;
   font-weight: 400;
   margin-top: 35px;
 }

 .sec-title.light h2 {
   color: #ffffff;
 }

 .sec-title.text-center h2:before {
   left: 50%;
   margin-left: -25px;
 }

 .list-style-one {
   position: relative;
 }

 .list-style-one li {
   position: relative;
   font-size: 16px;
   line-height: 26px;
   color: #222222;
   font-weight: 400;
   padding-left: 35px;
   margin-bottom: 12px;
 }

 .list-style-one li:before {
   content: "\f058";
   position: absolute;
   left: 0;
   top: 0px;
   display: block;
   font-size: 18px;
   padding: 0px;
   color: #ff2222;
   font-weight: 600;
   -moz-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   font-style: normal;
   font-variant: normal;
   text-rendering: auto;
   line-height: 1.6;
   font-family: "Font Awesome 5 Free";
 }

 .list-style-one li a:hover {
   color: #44bce2;
 }



 .about-section {
   position: relative;
   padding: 120px 0 70px;
 }

 .about-section .sec-title {
   margin-bottom: 45px;
 }

 .about-section .content-column {
   position: relative;
   margin-bottom: 50px;
 }

 .about-section .content-column .inner-column {
   position: relative;
   padding-left: 30px;
 }

 .about-section .text {
   margin-bottom: 20px;
   font-size: 16px;
   line-height: 26px;
   color: #848484;
   font-weight: 400;
 }

 .about-section .list-style-one {
   margin-bottom: 45px;
 }

 .about-section .btn-box {
   position: relative;
 }

 .about-section .btn-box a {
   padding: 15px 50px;
 }

 .about-section .image-column {
   position: relative;
 }

 .about-section .image-column .text-layer {
   position: absolute;
   right: -110px;
   top: 50%;
   font-size: 325px;
   line-height: 1em;
   color: #ffffff;
   margin-top: -175px;
   font-weight: 500;
 }

 .about-section .image-column .inner-column {
   position: relative;
   padding-left: 80px;
   padding-bottom: 0px;
 }

 .about-section .image-column .inner-column .author-desc {
   position: absolute;
   bottom: 16px;
   z-index: 1;
   background: orange;
   padding: 10px 15px;
   left: 96px;
   width: calc(100% - 152px);
   border-radius: 50px;
 }

 .about-section .image-column .inner-column .author-desc h2 {
   font-size: 21px;
   letter-spacing: 1px;
   text-align: center;
   color: #fff;
   margin: 0;
 }

 .about-section .image-column .inner-column .author-desc span {
   font-size: 16px;
   letter-spacing: 6px;
   text-align: center;
   color: #fff;
   display: block;
   font-weight: 400;
 }

 .about-section .image-column .inner-column:before {
   content: '';
   position: absolute;
   width: calc(50% + 80px);
   height: calc(100% + 160px);
   top: -80px;
   left: -3px;
   background: transparent;
   z-index: 0;
   border: 44px solid var(--nav-hover-color);
 }

 .about-section .image-column .image-1 {
   position: relative;
 }

 .about-section .image-column .image-2 {
   position: absolute;
   left: 0;
   bottom: 0;
 }

 .about-section .image-column .image-2 img,
 .about-section .image-column .image-1 img {
   box-shadow: 0 30px 50px rgba(8, 13, 62, .15);
   border-radius: 46px;
 }

 .about-section .image-column .video-link {
   position: absolute;
   left: 70px;
   top: 170px;
 }

 .about-section .image-column .video-link .link {
   position: relative;
   display: block;
   font-size: 22px;
   color: #191e34;
   font-weight: 400;
   text-align: center;
   height: 100px;
   width: 100px;
   line-height: 100px;
   background-color: #ffffff;
   border-radius: 50%;
   box-shadow: 0 30px 50px rgba(8, 13, 62, .15);
   -webkit-transition: all 300ms ease;
   -moz-transition: all 300ms ease;
   -ms-transition: all 300ms ease;
   -o-transition: all 300ms ease;
   transition: all 300ms ease;
 }

 .about-section .image-column .video-link .link:hover {
   background-color: #191e34;
   color: #ffff;
 }

 @media (max-width: 767.98px) {
   .custom-mt-sm {
     margin-top: 100px;
   }
 }