/* Custom CSS for Tradewell Website */

/* #region Universal Design */

    /* #region Main Styles */

        body {
            font-family: 'Urbanist', sans-serif;
            }

        html {
            scroll-behavior: smooth;
        }

        .fade-in-text, .fade-in-image, .fade-in-element {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        .fade-in-text-ist, .fade-in-image-ist, .fade-in-element-ist {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }

        .fade-in-active {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        .fade-in-text.is-visible, .fade-in-image.is-visible, .fade-in-element.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* Ensure images cover their container without distortion */
        .object-cover {
            object-fit: cover;
        }

        /* General container styling */
        .container {
            max-width: 1200px; /* Or adjust as needed based on design */
        }

        .custom-banner {
            height: 500px;
            position: relative;
        }

        .text-shadow {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .text-shadow-x {
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
        }

        .element-shadow {
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
        }

        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }

        .scrollbar-hide {
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }

    /* #endregion */

    /* #region Main Text Styles */
    
        .h1 {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(36px, 5vw, 98px);
            font-weight: 400;
            line-height: 32px;
            margin-bottom: 4vw; 
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
            color: #ffffff;
            text-align: center;
        }

        .h2 {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(22px, 2vw, 44px);
            font-weight: 400;
            line-height: 28px;
            padding-bottom: clamp(11.5px, 1.2vw, 23px);
            color: #374151;
            text-align: center;
        }

        .h3 {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(20px, 1.5vw, 29px);
            font-weight: 400;
            margin-bottom: clamp(4px, 0.42vw, 8px);
            color: #374151;
            text-align: center;
        }

        .h4 {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(12px, 1.3vw, 24px);
            font-weight: 150;
            font-style: italic;
            line-height: clamp(17.5px, 2vw, 35px);
            padding-bottom: clamp(6px, 0.625vw, 12px);
            margin-left: auto;  
            margin-right: auto; 
            max-width: clamp(625px, 65.1vw, 1250px); 
            color: #374151;
            text-align: left;
        }

        .h6 {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(30px, 3.125vw, 60px);;
            font-weight: 150;
            line-height: 28px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            color: #ffffff;
            text-align: center;
        }

        .p {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(12.5px, 1.5vw, 25px);
            font-weight: 150;
            line-height: clamp(17.5px, 2vw, 35px);
            padding-bottom: clamp(6px, 0.625vw, 12px);
            margin-left: auto;  
            margin-right: auto;
            margin-bottom: 16px; 
            max-width: clamp(625px, 65.1vw, 1250px); 
            color: #374151;
            text-align: justify;
        }

        .p2 {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(16px, 1.67vw, 32px);
            font-weight: 150;
            line-height: clamp(17.5px, 2vw, 35px);
            margin-left: auto;  
            margin-right: auto;
            margin-bottom: 16px; 
            max-width: clamp(625px, 65.1vw, 1250px); 
            color: #ffffff;
            text-align: center;
        }

        .text-overlay-index {
            position: absolute;
            inset: 0; /* shorthand for top, right, bottom, left: 0 */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem; 
            background-color: rgba(0, 0, 0, 0.15); 
        }

    /* #endregion */

    /* #region Header Styles */

        .socialicon-div {
            display: flex;               
            gap: 1.6vw;    
            overflow-x: auto;               /* overflow-x-auto */
            white-space: nowrap;           /* whitespace-nowrap */
            justify-content: center;       /* justify-center */

            /* Hide scrollbar (cross-browser) */
            scrollbar-width: none;         /* Firefox */
            -ms-overflow-style: none;      /* Internet Explorer and Edge */
        }

        .socialicon-div::-webkit-scrollbar {
            display: none;                 /* Chrome, Safari */
        }

        .socialicon-size {
            height: clamp(10.5px, 1.1vw, 21px);
            width: clamp(10.5px, 1.1vw, 21px);  
        }

        .socialicon-link {
            color: #6B7280;
            transition: color 300ms;
        }

        .socialicon-link:hover {
            color: #374151;
        }

        .nav-style {
            color: #374151;
            transition: color 300ms;
            font-weight: 500;
            font-size: clamp(15px, 1.2vw, 20px);
        }

        .nav-style:hover {
            color: #111827;
            border-bottom: 2px solid #111827;
            font-weight: 600;
        }

        .trade-icon {
            padding-top: clamp(2.5px, 0.25vw, 5px);
            height: clamp(30px, 3.125vw, 60px);
        }
        
    /* #endregion */ 

    /* #region Footer Styles */

        .footer {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(10px, 1vw, 20px);
            font-weight: 200;
            line-height: clamp(12.5px, 1.3vw, 25px);
            margin-left: auto;  
            margin-right: auto; 
            max-width: clamp(625px, 65.1vw, 1250px); 
            padding-bottom: clamp(2px, 0.5vw, 10px);
            color: #374151;
            text-align: center;
        }

        .footer-2 {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(10px, 1vw, 20px);
            font-weight: 200;
            margin-left: auto;  
            margin-right: auto; 
            max-width: clamp(625px, 65.1vw, 1250px);
            color: #374151;
            text-align: center;
        }

        .footer-2:hover {
            color: #111827;
            border-bottom: 1px solid #111827;
        }

    /* #endregion */

    /* #region Home Styles */

        /* Additional styling for the hero section background to ensure it covers the full height */
        .h-screen {
            height: 100vh; /* Full viewport height */
        }

        /* Specific delay for hero section text */
        .hero-text-1.is-visible {
            transition-delay: 0.2s;
        }
        .hero-text-2.is-visible {
            transition-delay: 0.4s;
        }
        .hero-button.is-visible {
            transition-delay: 0.6s;
        }

        .hero-image {
            width: 100%;
            height: 16rem; /* h-64 = 64 * 0.25rem = 16rem */
            object-fit: cover;
            transition: transform 0.5s ease-in-out;
        }

        .fom-button {
            font-family: 'Urbanist', sans-serif;
            color: #ffffff;
            font-weight: 500;
            font-size: clamp(10px, 1vw, 20px);
            display: inline-block;
            color: white;
            padding: clamp(6px, 0.625vw, 12px) clamp(16px, 1.67vw, 32px);
            border-radius: clamp(6px, 0.625vw, 12px);  
            background-color: transparent;
            border:clamp(1px, 0.1vw, 2px) solid white;
            text-shadow: 2px 2px 10px rgba(0, 0, 0, 1);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                        0 4px 6px -2px rgba(0, 0, 0, 0.05); 
            transition: all 0.8s ease; /* transition-all duration-800 */
        }

        .fom-button:hover {
            background-color: #9ca3af; /* Tailwind gray-400 */
        }

        .grid-container {
            display: grid;
            grid-template-columns: 1fr;       /* 1 column by default (small screens) */
            grid-template-rows: auto;         /* rows adjust automatically */
            gap: 28px;
            overflow: visible;
        }

        @media (min-width: 768px) {
            .grid-container {
                grid-template-columns: repeat(2, 1fr); /* 2 columns on medium+ screens */
                grid-template-rows: repeat(2, 1fr);    /* 2 rows */
            }
            }
            
        .grid-item {
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: visible;
        }


    /* #endregion */

    /* #region About Us Styles */

    .trade-values {
        display: flex;                 /* flex */
        flex-direction: column;        /* flex-col */
        align-items: center;           /* items-center */
        padding: 24px;                 /* p-6 */
        border-radius: 8px;            /* rounded-lg */
        background-color: #ffffff;     /* bg-white */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* shadow-md */
    }

    .trade-values-images {
        width: clamp(80px, 8.33vw, 160px);
        height: clamp(80px, 8.33vw, 160px);
        margin-bottom: 16px;
    }

    /* #endregion */

    /* #region Investments Styles */

        /* Accordion Animation */
        .accordion-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;
            text-align: center;
        }

        .accordion-content.open {
            opacity: 1;
        }

        .collapsed-button {
            width: 100%;
            text-align: left;
            padding: clamp(8px, 0.833vw, 16px);
            background-color: #f3f4f6; /* This will be behind the image */
            border-radius: clamp(6px, 0.625vw, 12px);
            outline: none;
            transition: background-color 0.2s;

            /* Add these properties for the background image */
            background-repeat: no-repeat;
            background-size: cover;   
            background-position: center; 
            position: relative; /* Essential for overlaying pseudo-elements or actual overlay divs */
            background-position: right center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
        } */

        .collapsed-button:hover {
            background-color: #e5e7eb;
        }


        .collapsed-button:focus {
            outline: none;
        }

        .collapsed-heading {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(22px, 2.3vw, 44px);
            font-weight: 600;
            line-height: 28px;
            padding: clamp(11.5px, 1.2vw, 23px);
            color: #374151;
            text-align: center;
            position: relative; /* Make sure the text is above the pseudo-element overlay */
            z-index: 2; /* Place the heading above the overlay */
        }

        .collapsed-para {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(12.5px, 1.5vw, 25px);
            font-weight: 150;
            line-height: clamp(17.5px, 2vw, 35px);
            padding-bottom: clamp(6px, 0.625vw, 12px);
            margin-left: auto;  
            margin-right: auto;
            max-width: clamp(625px, 65.1vw, 1250px); 
            color: #374151;
            text-align: justify;
        }

       .quote-container {
            position: relative;
            display: inline-block;
        }

        .collapsed-image {
            width: clamp(540px, 50vw, 1080px); 
            height: clamp(200px, 20vw, 400px);        
            object-fit: cover;        
            border-radius: 8px;       
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
                        0 4px 6px -4px rgba(0, 0, 0, 0.1); 
            display: block; /* Remove inline spacing */
        }

        .overlay {
            position: absolute;
            inset: 0;
            background-color: rgba(0,0,0,0.5);
            padding: 1rem;
            box-sizing: border-box;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            pointer-events: none; /* Allow clicks through overlay */
        }

        .overlay p {
            margin: 0 0 0.5rem 0;
            pointer-events: auto; /* Enable interaction on text */
        }
        
        .quote-wr {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(11px, 1.2vw, 22px);
            font-weight: 250;
            font-style: italic;
            line-height: clamp(17.5px, 2vw, 35px);
            padding-bottom: clamp(6px, 0.625vw, 12px);
            margin-left: auto;  
            margin-right: auto; 
            max-width: clamp(625px, 65.1vw, 1250px); 
            color: #ffffff;
            text-align: center;
        }

        .hover-text-grow {
            font-size: clamp(22px, 2vw, 44px);
            transition: font-size 0.25s ease;
        }

        .collapsed-button:hover .hover-text-grow {
            font-size: clamp(23px, 2.1vw, 46px); /* approx 5% increase */
        }

        /* Wrapper for aligning the text inside the button */
        .fade-text-wrapper {
            padding-left: clamp(12px, 1vw, 24px);
            display: flex;
            align-items: center;
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 2;
        }

        .fade-overlay::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.2) 15%,
                rgba(255, 255, 255, 0.5) 30%,
                rgba(255, 255, 255, 0.85) 45%,
                rgba(255, 255, 255, 1) 50%,
                rgba(255, 255, 255, 0.85) 55%,
                rgba(255, 255, 255, 0.5) 70%,
                rgba(255, 255, 255, 0.2) 85%,
                rgba(255, 255, 255, 0) 100%
            );
            border-radius: inherit;
            z-index: 1;
            pointer-events: none;
        }
            /* #endregion */

    /* #region Contact Us Styles */

        .contact-us-text {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(11px, 1.15vw, 22px);
            font-weight: 150;
            line-height: clamp(13px, 1.15vw, 22px);
            padding-bottom: clamp(4px, 0.41vw, 8px);
            margin-left: auto;  
            margin-right: auto;
            max-width: clamp(625px, 65.1vw, 1250px); 
            color: #374151;
            text-align: left;
        }

        .contact-us-heading {
            font-family: 'Urbanist', sans-serif;
            font-size: clamp(17.5px, 1.82vw, 35px);
            font-weight: 400;
            line-height: clamp(10px, 1.05vw, 20px);
            padding-bottom: clamp(11.5px, 1.2vw, 23px);
            color: #374151;
            text-align: left;
        }

    /* #endregion */

    /* #region Other Styles */

        .grow-text {
        transition: transform 0.15s ease-in-out;
        }

        .grow-text:hover {
        transform: scale(1.05); /* Increase size by 30% */
        }

        .fade-in-text {
            animation: fadeIn 1s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }
    
    /* #endregion */

/* #endregion */