@charset "UTF-8";
/* CSS Document */
/* Apply Open Sans font to the body and default text */
        body {
            font-family: 'Open Sans', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f2f5; /* A subtle background for the overall page */
            font-size: 1rem; /* Explicitly set body font size to 1rem */
        }
        html {
            -webkit-font-smoothing: antialiased;
            }
        /* H1 specific font */
        h1, h2 {
            font-family: 'Oswald', sans-serif;
			text-transform: uppercase;
        }

        /* H3 specific font */
        h3 {
            font-family: 'Open Sans', sans-serif;
        }

		/* Responsive image overright */
		.responsive-image {
			width:100%;
			height:auto;
		}

        /* Utility class for max-width and centering content */
        .container-max-width {
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem; /* px-4 */
            padding-right: 1rem; /* px-4 */
        }

        /* Base button styles - Re-applying from previous iteration */
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem 1rem;
            font-weight: 700;
            font-size: 16px;
            line-height: 24px;
            cursor: pointer;
            text-decoration: none;
            border: 1px solid transparent;
            white-space: nowrap;
            border-radius: 4px;
        }
      .logo {
        width:240px;
        height:auto;
      }

        .leading-tight{
            line-height: 1.2 !important;
        }

		 /* Focus state for buttons */
        .btn:focus {
            outline: 3px dashed #086ea1; /* Border color #086ea1, weight 3, dashed */
            outline-offset: -2px; /* 2px gap, aligned inside */
			border:0;
        }

        /* Primary Button */
        .btn-primary {
            background-color: #086ea1;
            color: #FFFFFF;
            border-color: #086ea1;
            transition: 300ms ease-in;
        }

        .btn-primary:hover {
            background-color: #054C70;
            border-color: #054C70;
            transition: 300ms ease-in;
        }
		.btn-primary:active {
            background-color: #003359;
            border-color: #003359;
        }

        /* Secondary Button */
        .btn-secondary {
            background-color: transparent;
            color: #086ea1;
            border-color: #086ea1;
            transition: 300ms ease-in;
        }

        .btn-secondary:hover {
			background-color: #054C70;
            border-color: #054C70;
            color: #FFFFFF;
            transition: 300ms ease-in;
        }
		.btn-secondary:active {
            background-color: #003359;
            border-color: #003359;
        }

        /* Video Button */
        .btn-video {
            /*background-color: #FFFFFF;*/
            color: #09C;
            border-color: #09C;
        }

        .feature-plan-li::marker{
            font-size: 0.8em;
            font-weight: bold;
            color: #333;
        }

        .btn-video .play-icon {
            fill: #09C;
            margin-left: 0.5rem;
            transition: 300ms ease-in;
        }

        .btn-video:hover .play-icon {
            transform: translateX(5px);
            transition: 300ms ease-in;
        }

        .btn-video:hover {
            background-color: #003359;
            border-color: #0099CC;
            color: #FFFFFF;
        }

        .btn-video:hover .play-icon {
            fill: #FFFFFF;
        }
		/* Bullet list styling for hanging indentation */
        .indented-list {
            list-style-position: outside; /* Ensure bullet is outside content block */
            padding-left: 1.4em; /* Space for the bullet and initial indent */
            /* Removed text-indent and margin-left from li rule */
        }

        .bold-weight{
            font-weight: 700 !important;
        }

        .normal-weight{
            font-weight: 400 !important;
        }
        .seminormal-weight{
            font-weight: 500 !important;
        }

        .narrow-letter{
            letter-spacing: -1.2px;
        }

        /* Specific styles for the Quote Section gradient */
        .quote-gradient-text {
            background: linear-gradient(to right, #0098C7, #009382);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: transparent; /* Fallback for browsers that don't support text-fill-color */
            text-transform: uppercase; /* Make text all caps */
            font-family: 'Oswald', sans-serif; /* Apply Oswald font */
            font-size: 1.875rem; /* Default for mobile (text-3xl equivalent) */
            line-height: 1.25; /* Default for mobile (leading-tight equivalent) */
        }

        /* Custom styles for navigation hover */
        .nav-link:hover {
            text-decoration: underline;
        }
		
		.footer-border-right{
			border-right: 1px solid #FFFFFF;
		}

	 	/* New CSS for all text links */
        a {
            color: #086ea1; /* Set default link color */
        }

        /* Override specific nav-link colors for header and footer */
        header .nav-link {
            color: #000000;
            font-size: 14px;
            font-weight: 400;
        }
        header .nav-link:hover {
            color: #000; /* Change hover color for header nav links */
        }

        footer .nav-link {
            color: #FFFFFF; /* Keep footer nav links white on black background */
        }
        footer .nav-link:hover {
            text-decoration: underline; /* Adds underline to hover */
        }

        /* Specific border for ethical companies paragraph */
        .ethical-companies-text {
            border-top: 1px solid #FFFFFF;
            border-bottom: 1px solid #FFFFFF;
            padding-top: 1rem;
            padding-bottom: 1rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }

		/* Modal styles */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color:rgba(13, 52, 89, 0.95); /* Dark blue background */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000; /* Ensure it's on top of everything */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            position: relative;
            background-color: transparent; /* No background for content itself */
            padding: 20px;
            max-width: 1280px; /* Same max width as page content */
            width: 90%; /* Responsive width */
            box-sizing: border-box;
        }

        .modal-close {
            position: absolute;
            top: -20px;
            right: 20px;
            font-size: 2rem;
            color: #FFFFFF;
            cursor: pointer;
            z-index: 1010; /* Ensure close button is above video */
        }

        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
            height: 0;
            overflow: hidden;
            max-width: 100%;
            background: #000;
        }

        .video-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

		@media (orientation: landscape) and (max-width: 767px) {
            .modal-content {
                width: 95%; /* Use more width in landscape */
                height: 90%; /* Constrain height */
                padding: 10px; /* Reduce padding to save space */
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }

            .video-container {
                width: 100%;
                height: 100%;
                padding-bottom: 0; /* Remove padding-bottom trick */
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .video-container iframe {
                max-width: 100%;
                max-height: 100%;
                width: auto;
                height: auto;
                object-fit: contain; /* Ensure video fits within bounds */
                position: static; /* Remove absolute positioning to allow auto sizing */
            }

            .modal-close {
                top: 5px; /* Adjust close button position */
                right: 5px;
                font-size: 1.5rem; /* Smaller close button */
            }
        }

		 /* Media queries for responsive design */
        @media (min-width: 768px) { /* md breakpoint */
            /* Header specific adjustments for md breakpoint */
            header nav {
                display: block; /* Show navigation on medium and larger screens */
            }
            header .container-max-width {
                justify-content: space-between; /* Align logo left, nav right */
                flex-direction: row;
            }

            /* Quote specific adjustments for md breakpoint */
            .quote-gradient-text {
                font-size: 54px; /* Specific size for larger screens */
                line-height: 1.2; /* Specific line height for larger screens */
            }
        }

        /* Language grid for footer */
        .language-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr)); /* Default to 1 column on mobile */
            gap: 0.5rem 1rem; /* Row gap, column gap */
        }

        @media (min-width: 640px) { /* sm breakpoint */
            .language-grid {
                grid-template-columns: repeat(6, minmax(0, 1fr)); /* 2 columns on small screens */
            }
        }