body {
        font-family: 'PPSans', sans-serif;
        font-weight: 400;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: 'PPSans', sans-serif;
    }

    p {
        color: #333;
        font-weight: 500;
    }

    header-top-2, .header-top-area {
        border-bottom: 1px solid #169BD7;
        display: none;
    }

    .header-top-area {
        background: #222D65;
    }

    .user-icon {
        margin-right: 10px;
        color: #00bfff !important;
        transition: 0.5s;
    }

    .user-icon:hover {
        color: #FFD700 !important;
    }

    .user-area li a {
        text-transform: capitalize;
        font-weight: 600;
        color: #00bfff;
        letter-spacing: 1px;
        font-size: 12px;
        transition: 0.5s;
    }

    .user-area li a:hover {
        color: #FFD700;
    }

    .expert-menu ul li a {
        color: #00457C;
    }

    .expert-menu ul li:hover > a {
        color: #DAA520;
        text-decoration: underline;
    }

    .button, .button-contact, .button-contact1, .button-Section, .button.button-smallG {
        font-family: 'PPSans', sans-serif;
        background-image: linear-gradient(to right, #00457C 0%, #009cde 50%, #00457C 100%);
        box-shadow: 0px 1px 1px #4d4d4d;
        color: #FFF;
    }

    .button:hover, .button-contact:hover, .button-Section:hover, .button.button-smallG:hover {
        color: #FFD700;
    }

    .button:focus, .button-contact:focus, .button-Section:focus, .button.button-smallG:focus {
        color: #DAA520;
    }
    
    .btn-primary.active.focus,.btn-primary.active:focus,.btn-primary.active:hover,
    .btn-primary:active.focus,.btn-primary:active:focus,.btn-primary:active:hover,
    .open>.dropdown-toggle.btn-primary.focus,.open>.dropdown-toggle.btn-primary:focus,
    .open>.dropdown-toggle.btn-primary:hover {
        color: #DAA520;
    }
    
    .slick-slide::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }
    
    .slick-slide {
        position: relative;
        z-index: 0;
    }
    
    .slide-content {
        overflow: hidden;
        width: 100%;
        z-index: 1;
    }

    .slide-subtitle {
        font-size: 28px;
        font-weight: 600;
        letter-spacing: 2px;
        transform: scaleY(1.1);
        padding: 0 0 20px 0;
    }

    .slide-title {
        font-size: 40px;
        font-weight: 600;
        letter-spacing: 2px;
        transform: scaleY(1.1);
        padding: 0 0 30px 0;
    }

    .slide-description {
        font-size: 22px;
        font-weight: 600;
        transform: scaleY(1.1);
        letter-spacing: 1px;
    }
    
    .area-title {
    	font-size: 28px;
    }
    
    .area-heading p {
    	font-size: 18px;
    }
    
    .intro-image {
        padding:10px 0 20px 0;
    }
        
    .img-responsive {
        width: 565px; 
        border: 1px solid #eee;
        border-radius:5px; 
        box-shadow: 0px 1px 5px 1px #d9dbe4;
    }
    
    .animate-scroll {
        position: relative;
        top: -3px;
    }
    
    .intro-description p {
        font-weight: 500;
    }
    
    .intro-text {
        word-break: break-word;
    }
    
    .intro-text p {
        font-size:16px;
        font-weight: 500;
    }
    
    .area-heading::after {
        box-shadow: 10px 0px 0px 0px #008CFF !important;
        background: #008CFF;
    }
    
    .area-heading::before {
        background: #008CFF;
    }
    
    .space-top {
        padding-top: 8px;
    }
    
    .area-heading {
        width: 80%;
        margin: 0 auto 100px;
        position: relative;
    }
    
    .single-feature {
        background-image: linear-gradient(to left, #45c8ff 0%, #CAE9FF 50%, #45c8ff 100%);
        border: 0px solid #ddd;
        transition: 0.5s;
        background-size: 200% auto;
    }
    
    .single-feature:hover {
        background-position: right center; /* change the direction of the change here */
    }
    
    .icon-fa {
        color: #00457C;
    }
    
    .action-heading h3 {
        padding: 0 0 10px 0;
        font-size: 28px;
        letter-spacing: 1px;
        transform: scaleY(1.1);
    }
    
    .row-pack{
        margin-right: -15px;
        margin-left: -15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    
    
    .single-tools {
        text-align: center;
        background: rgba(255, 255, 255, 1);
        padding: 40px 0;
        box-shadow: 0 5px 35px 2px rgba(0, 0, 0, 0.13);
        border-radius: 5px;
        transition: .3s ease-in-out 0s;
        margin-bottom: 25px;
    }

    .single-tools:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 35px rgba(0, 0, 0, 0.12);
    }
    
    .single-tools h5 {
        padding: 15px 0 8px 0;
    }
    
    .single-tools p {
        color: #333;
        font-weight: 500;
        word-break: break-word;
        margin-right: 8px;
        margin-left: 8px;
    }
    
    .colored-bg, .nav-tabs > li > a::before, .process-icon::before {
        background-image: linear-gradient(to right,#002991 0%,#008CFF 50%,#5FCDFD 100%) !important;
    }
    
    .expert-img {
        background-size: cover;
        position: relative;
    }
    
    .pricing-headG {
        background-image: linear-gradient(to top, #0079C1 0%, #019CDE 50%, #0079C1 100%);
        box-shadow: 2px 1px 10px 0px #77777778;
        border-top-left-radius: .5rem;
        border-top-right-radius: .5rem;
        padding: 25px 0;
    }
    
    .pricing-title {
        font-size: 20px;
        line-height: 18px;
    }
    
    .table-content li {
        padding: 12px;
    }
    
    .pricing-value-wrapper {
        padding: 35px 10px;
    }
    
    .text-pages{
        word-break: break-word;
        margin: auto;
    }
    
    .pages{
        font-weight: 600;
        line-height: 1.8;
        text-align: center;
        letter-spacing: 0.5px;
        margin: -20px auto 20px;
    }
    
    .text-pages p {
        font-size: 16px;
        font-weight: 500;
        color: #222;
        line-height: 1.8;
        text-align: left;
        letter-spacing: 0.5px;
    }
    
    .footer-top-area {
        background-color: #012269;
        padding: 50px 0 100px;
    }
    
    .footer-widget-heading h3::before {
        width: 50%;
        height: 1px;
    }
    
    .container-pack {
        padding-right: 0;
        padding-left: 0;
        margin-right: auto;
        margin-left: auto;
    }
    
    .links a {
        color: #fff;
    }
    
    .footer-conatct-menu li a {
        color: #d5d5d5;
    }
    
    .footer-conatct-menu li a:hover {
        color: #D4AF37;
    }
    
    .footer-widget-content p {
        color: #d5d5d5;
    }
    
    .footer-bottom-area {
        background: #001435;
        border-top: 1px solid #007cba;
    }
    
    .footer-copyright-info p a {
        color: #008CFF;
        margin-left: 1px;
        text-transform: initial;
    }
    
    .footer-copyright-info p a:hover {
        color: #FFD700;
        text-decoration: none;
    }
    
    .gold-bg {
        background-image: url('../images/gold2.png');
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        padding-top: 50px;
        position: relative;
    }
    
    .forex-bg {
        background-image: url('../images/forex2.png');
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        padding-top: 50px;
        position: relative;
    }
    
    .crypto-bg {
        background-image: url('../images/crypto2.png');
        background-size: cover;
        background-attachment: fixed;
        background-repeat: no-repeat;
        padding-top: 50px;
        position: relative;
    }
    
    .price_title {
        font-weight: 700;
        margin: 50px auto;
    }

    .price_title h2{
        color: #FFF !important;
        font-size: 30px;
    }
    
    .price_description{
        width: 90%;
        margin: 10px auto 50px;
        position: relative;
    }
    
    .price_description p{
        font-size: 20px;
        color: #fff;
    }
    
    .single-price-plan {
        box-shadow: 0px 5px 10px 1px #1c1c1c;
        position: relative;
        text-align: center;
        border-radius: .4rem;
        transition: .3s ease-in-out 0s;
    }
    
    .single-price-plan:hover {
        transform: translateY(-20px);
        box-shadow: 0px 5px 11px 3px #131313;
    }
    
    .slick-prev, 
    .slick-next {
        background-image: linear-gradient(to right, #00457C 0%, #009cde 50%, #00457C 100%) !important;
    }
    .slick-prev:hover, 
    .slick-prev:focus, 
    .slick-next:hover, 
    .slick-next:focus {
        background-position: right center; /* change the direction of the change here */
    }
    
    .to-top-btn {
        background-image: linear-gradient(to top, #00457C 0%, #009cde 50%, #00457C 100%) !important;
        bottom: 20px;
        height: 45px;
        width: 45px;
        line-height: 40px;
        left: 20px;
    }
    
    /* ----------------------------- 
        Mobile menu area style
        ---------------------------- */
        
        .mean-bar .meanmenu-reveal {
          left: 2px !important; 
          right: auto !important;
          position: absolute !important;
        }
        
        .mobile-menu-area {
          margin: 0;
          padding: 0;
        }
        
        .mean-container .mean-bar {
          left: 0;
          right: auto;
          z-index: 1;
        }
    
    
    /* ----------------------------
        Telegram Chat Icon Styles
        --------------------------- */

    /* Floating icon styles */
    .tg-icon {
        width: 50px;
        height: 50px;
        scale: 1.2;
        transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        border-radius: 50%;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    }

    .tg-float-container {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999999;
        animation: float 3s ease-in-out infinite;
    }

    .tg-button {
        position: relative;
        width: 50px;
        height: 50px;
        background: #fff !important;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        cursor: pointer;
    }

    /* Tooltip modifications */
    .tooltip {
        position: absolute;
        right: 75px;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to right, #0088CC 0%, #2AABEE  51%, #0088CC 100%);
        background-size: 200% auto;
        transition: 0.5s;
        box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
        color: #fff;
        padding: 8px 15px;
        border-radius: 4px;
        font-size: 14px;
        font-family: 'Tahoma', sans-serif;
        opacity: 0;
        visibility: hidden;
        white-space: nowrap;
        cursor: pointer;
        pointer-events: auto;
    }

    .tooltip::after {
        content: '';
        position: absolute;
        right: -10px;
        top: 50%;
        transform: translateY(-50%);
        border-width: 8px 0 8px 8px;
        border-style: solid;
        border-color: transparent transparent transparent #2AABEE;
        box-shadow: transparent transparent transparent rgba(0, 0, 0, 0.2);
    }
    
    .tooltip:hover::after {
        border-color: transparent transparent transparent #0088CC;
    }
    
    /* Hover improvements */
    .tg-button:hover .tooltip,
    .tooltip:hover {
        opacity: 1 !important;
        visibility: visible !important;
        right: 70px;
        transition-delay: 0.1s;
        background-position: right center;
    }
    
    /* Hover effects for icon */
    .tg-button:hover {
        background: #fff;
        transform: scale(1.1);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }
    
    .tg-button:hover .tg-icon {
        transform: rotate(360deg);
        scale: 1.1;
    }
    
    /* Add gradient reflection effect */
    .tg-button:hover 
    .tg-icon path {
        animation: gradientReverse 0.6s forwards;
    }
    
    @keyframes gradientReverse {
      to {
        fill: url(#grad-reverse);
      }
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
    
    
    /* Default styles (for large screens) */

    /* ----------------------------- */
    /* 1. Extra Small Devices - Phones (≤ 479px) */
    /* ----------------------------- */
    @media (max-width: 479px) {
        .mobile-container {
            width: 90% !important;;
        }
        
        .container-pack {
            width: 80%;
        }
        
        .col-width {
            width: 100%;
            padding: 0 10px 30px 10px;
        }
        
        .row-space-top {
            margin-top:-20px;
        }
        
        .center-container {
           display: flex;
           justify-content: center;
           align-items: center;
        }
        
        .logo-wrapper {
           position: relative;
           z-index: 2;
           line-height: 90px;
           width: 180px;
        }
        
        .mean-bar .meanmenu-reveal {
           left: -1px !important;
        }
        
        .price_description p {
            font-size: 16px;
        }
        
        .pricing-title {
            font-size: 17px;
        }
        
        .area-heading {
            width: 100%;
            margin: 0 auto 100px;
            position: relative;
        }
        
        .action-heading h3 {
            font-size: 23px;
        }
        
        .text-pages{
            word-break: break-word;
            margin: -20px auto;
        }
        
        .text-pages p {
            font-size: 15px;
        }
            
        .tg-float-container {
            bottom: 60px;
            right: 20px;
        }
            
        .tg-button {
            width: 50px;
            height: 50px;
        }
            
        .tg-icon {
            width: 50px;
            height: 50px;
            scale: 1.1;
            transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            border-radius: 50%;
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
        }
            
        .tooltip {
            display: block;
            right: 70px;
        }
            
        .tg-button:hover .tooltip,
        .tooltip:hover {
            right: 65px;
        }
          
        .price_description p {
            font-size: 16px;
        }
        
        .slide-subtitle {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 2px;
            transform: scaleY(1.1);
            padding: 0 0 20px 0;
        }
    
        .slide-title {
            font-size: 30px;
            font-weight: 600;
            letter-spacing: 2px;
            transform: scaleY(1.1);
            padding: 0 0 30px 0;
        }
    
        .slide-description {
            font-size: 18px;
            font-weight: 600;
            transform: scaleY(1.1);
            letter-spacing: 1px;
        }
        
        .area-title {
        	font-size: 20px;
        }
        
        .pricing-title {
            font-size: 17px;
        }
        
        .mean-container a.meanmenu-reveal span {
            background: #0079C1;
        }
        
        .mean-container a.meanmenu-reveal {
            color: #0079C1;
        }
        
        .mean-container a.meanmenu-reveal {
            border: 1px solid #0079C1;
            border-radius: 5px;
        }
        
        .mean-container .mean-nav {
            background-image: linear-gradient(to right, #00457C 0%, #009cde 50%, #00457C 100%) !important;
            background-size: 200% !important;
        }
        
        .mean-container .mean-nav ul li a {
            border-top: 1px solid rgba(255, 255, 255, 0.5);
          color: #FFF;
        }
        
        .mean-container .mean-nav ul li a:hover {
            color: #DAA520;
        }
        
        .mean-container .mean-nav {
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }
    }
    
    /* ----------------------------- */
    /* 2. Small Devices - Phones (≤ 767px) */
    /* ----------------------------- */
    @media (max-width: 767px) {
        .mobile-container {
            width: 90% !important;;
        }
        
        .container-pack {
            width: 80%;
        }
        
        .col-width {
            width: 100%;
            padding: 0 10px 30px 10px;
        }
        
        .row-space-top {
            margin-top:-20px;
        }
        
        .center-container {
           display: flex;
           justify-content: center;
           align-items: center;
        }
        
        .logo-wrapper {
           position: relative;
           z-index: 2;
           line-height: 90px;
           width: 180px;
        }
        
        .mean-bar .meanmenu-reveal {
           left: -1px !important;
        }
        
        .price_description p {
            font-size: 16px;
        }
        
        .pricing-title {
            font-size: 17px;
        }
        
        .area-heading {
            width: 100%;
            margin: 0 auto 100px;
            position: relative;
        }
        
        .action-heading h3 {
            font-size: 23px;
        }
        
        .text-pages{
            word-break: break-word;
            margin: -20px auto;
        }
        
        .text-pages p {
            font-size: 15px;
        }
            
        .tg-float-container {
            bottom: 27px;
            right: 20px;
        }
            
        .tg-button {
            width: 50px;
            height: 50px;
        }
            
        .tg-icon {
            width: 50px;
            height: 50px;
            scale: 1.1;
            transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            border-radius: 50%;
            box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
        }
            
        .tooltip {
            display: block;
            right: 70px;
        }
            
        .tg-button:hover .tooltip,
        .tooltip:hover {
            right: 65px;
        }
          
        .price_description p {
            font-size: 16px;
        }
        
        .slide-subtitle {
            font-size: 20px;
            font-weight: 600;
            letter-spacing: 2px;
            transform: scaleY(1.1);
            padding: 0 0 20px 0;
        }
    
        .slide-title {
            font-size: 30px;
            font-weight: 600;
            letter-spacing: 2px;
            transform: scaleY(1.1);
            padding: 0 0 30px 0;
        }
    
        .slide-description {
            font-size: 18px;
            font-weight: 600;
            transform: scaleY(1.1);
            letter-spacing: 1px;
        }
        
        .area-title {
        	font-size: 20px;
        }
        
        .pricing-title {
            font-size: 17px;
        }
        
        .mean-container a.meanmenu-reveal span {
            background: #0079C1;
        }
        
        .mean-container a.meanmenu-reveal {
            color: #0079C1;
        }
        
        .mean-container a.meanmenu-reveal {
            border: 1px solid #0079C1;
            border-radius: 5px;
        }
        
        .mean-container .mean-nav {
            background-image: linear-gradient(to right, #00457C 0%, #009cde 50%, #00457C 100%) !important;
            background-size: 200% !important;
        }
        
        .mean-container .mean-nav ul li a {
            border-top: 1px solid rgba(255, 255, 255, 0.5);
          color: #FFF;
        }
        
        .mean-container .mean-nav ul li a:hover {
            color: #DAA520;
        }
        
        .mean-container .mean-nav {
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }
    }
    
    /* ----------------------------- */
    /* 3. Medium Devices - Tablets (768px to 991px) */
    /* ----------------------------- */
    @media (min-width: 768px) and (max-width: 991px) {
        .container-pack {
            width: 80%;
        }
        
        .col-width {
            width: 50%;
            padding: 10px 15px;
        }
        
        .center-container {
           display: flex;
           justify-content: center;
           align-items: center;
        }
        
        .logo-wrapper {
           position: relative;
           z-index: 2;
           line-height: 90px;
           width: 200px;
        }
        
        .mean-container a.meanmenu-reveal span {
            background: #0079C1;
        }
        
        .mean-container a.meanmenu-reveal {
            color: #0079C1;
        }
        
        .mean-container a.meanmenu-reveal {
            border: 1px solid #0079C1;
            border-radius: 5px;
        }
        
        .mean-container .mean-nav {
            background-image: linear-gradient(to right, #00457C 0%, #009cde 50%, #00457C 100%) !important;
            background-size: 200% !important;
        }
        
        .mean-container .mean-nav ul li a {
            border-top: 1px solid rgba(255, 255, 255, 0.5);
          color: #FFF;
        }
        
        .mean-container .mean-nav ul li a:hover {
            color: #DAA520;
        }
        
        .mean-container .mean-nav {
          border-bottom-left-radius: 5px;
          border-bottom-right-radius: 5px;
        }

        .area-heading {
            width: 100%;
        }
        
        .text-pages{
            word-break: break-word;
            margin: -20px auto;
        }
        
        .text-pages p {
            font-size: 15px;
        }
    }
    
    /* ----------------------------- */
    /* 4. Large Tablets & Small Laptops (992px to 1199px) */
    /* ----------------------------- */
    @media (min-width: 992px) and (max-width: 1199px) {
        .container-pack {
            width: 80%;
        }
        
        .col-width {
            width: 33.33%;
            padding: 10px 15px;
        }
    }
    
    /* ----------------------------- */
    /* 5. Desktops (1200px to 1399px) */
    /* ----------------------------- */
    @media (min-width: 1200px) and (max-width: 1399px) {
        .container-pack {
            width: 80%;
        }
        
        .col-width {
            width: 33.33%;
            padding: 10px 15px;
        }
    }
    
    /* ----------------------------- */
    /* 6. Extra Large Screens (≥ 1400px) */
    /* ----------------------------- */
    @media (min-width: 1400px) {
        .container-pack {
            width: 70%;
        }
        
        .col-width {
            width: 33.33%;
            padding: 10px 15px;
        }
    }