/* Global Resets: Essential for removing default browser spacing at the top and ensuring consistent box model */
html, body {
    margin: 0 !important;          /* Removes default browser outer spacing */
    padding: 0 !important;         /* Removes default browser inner spacing */
    width: 100%;        /* Ensures html and body take full width */
    height: auto;       /* Allows height to adjust to content */
    overflow-x: hidden; /* Prevents horizontal scroll if content overflows */
    font-family: 'Inter', sans-serif !important; /* Applies the desired font across the page */
    box-sizing: border-box; /* Ensures padding and border are included in element's total width and height */
    color: #333; /* Suggested default text color for general body content */
    line-height: 1.6; /* Suggested default line height for readability */
    font-size: 16px; /* Suggested base font size for the body */
}

/* Video Banner Container Styles */
.video-banner-container {
    width: 100%;                /* Make the container span the full width */
    min-height: 250px;          /* Minimum height to ensure visibility on all devices */
    height: 400px;              /* Fixed height for desktop, adjust for responsiveness below */
    position: relative;         /* Crucial for absolute positioning of the .Intro text */
    overflow: hidden;           /* Clips video content if it overflows its container */
    border-radius: 8px;         /* Adds slightly rounded corners for a modern look */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow for depth */
    margin-top: 0;              /* Explicitly removes any top margin, pushing it to the very top */
    display: block;             /* Ensures it behaves as a block element */
}

/* Common Styles for Both Video Elements */
.video-banner {
    width: 100%;                /* Videos fill the width of their container */
    height: 100%;               /* Videos fill the height of their container */
    display: block;             /* Ensures no extra space below the video */
    object-fit: cover;          /* Crucial: Scales video to cover the container while maintaining aspect ratio, cropping if necessary */
}

/* Default: Show desktop video, hide mobile video */
.desktop-video {
    display: block;
}

.mobile-video {
    display: none;
}

/* Styles for the floating Intro text (Default - for Desktop) */
.Intro {
    position: absolute;       /* Position relative to .video-banner-container */
    left: 38%;                /* Start at the horizontal center */
    width: 50%;               /* Take up the right half of the container */
    top: 50%;                 /* Start at the vertical center */
    transform: translateY(-50%); /* Adjust upwards by half its height for perfect vertical centering */
    z-index: 10;              /* Ensure it's above the video */
    color: white;             /* Suggested text color for contrast against video */
    padding: 0 25px;          /* Padding on left/right for spacing from edges */
    text-align: left;         /* Align text to the left */
    font-size: 1.8em;         /* Suggested larger font size for desktop readability */
    font-weight: bold;        /* Make the text bold */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8); /* Stronger shadow for better readability over video */
    line-height: 1.4;         /* Improve line spacing */
    box-sizing: border-box;   /* Include padding in the width calculation */
}

/* Styles for the .Cnt container (your main content wrapper) */
.Cnt {
    max-width: 1200px; /* Suggested maximum width for your content, adjust as needed */
    margin: 20px auto;  /* Centers the container horizontally with 20px top/bottom margin */
    padding: 0 15px;    /* Adds horizontal padding on the sides for content, adjust as needed */
    box-sizing: border-box; /* Include padding in the width */
}

/* Suggested styles for headings within the .Cnt container */
.Cnt h1, .Cnt h2, .Cnt h3, .Cnt h4, .Cnt h5, .Cnt h6 {
    color: #2c3e50; /* Suggested darker color for headings */  margin-top: 1.0em; /* Space above headings */
    margin-bottom: 0.5em; /* Space below headings */   line-height: 1.0;
}

.Cnt h1 {
    font-size: 1.5em; /* Suggested size for h1 */
    font-weight: bold; /* Ensure h1 is bold */
}

/* New style for the subtitle text within h1 */
.Cnt h1 .subtitle-text {
    font-size: 0.7em; white-space: nowrap; /* Keep the text on a single line */
    display: inline-block; /* Allows for vertical-align and other properties */
    vertical-align: middle; /* Helps align it vertically with the main h1 text */
    margin-left: 0.5em; /* Small space between bold text and subtitle */
}

/* Suggested styles for links within the .Cnt container */

.Cnt a {
    color: #2020f0; /* blue color for links */
    font-size: 0.8em; text-decoration: none; font-weight: normal; 
}

.Cnt h2 {
    font-size: 2.2em; /* Suggested size for h2 */
}

/* Suggested styles for paragraphs within the .Cnt container */
.Cnt p {
    color: #555; /* Suggested slightly lighter color for paragraphs */
    margin-bottom: 1em; /* Space below paragraphs */
}

.Cnt a:hover {
    text-decoration: underline; /* Add underline on hover */
}

div.Cnt2 {position:relative; top:0 ; left:0 ; width:100%; height:auto; 
		  padding-top:0 ; padding-bottom:0 ;  padding-left: 2% ; padding-right: 2%; 
		  display:flex; flex;flex-wrap:wrap; }
div.body {width:100%; height:auto; padding-left:50px; padding-right:50px; padding-top:3%; padding-bottom:2%; 
		  font-size:22px; color:#303030;font-weight:normal;font-style:standard;font-family: "Arial", "Helvetica", "sans-serif"; }
		  
div.Lft {width:50%; height:auto; padding-left:50px; padding-right:25px; padding-top:0; padding-bottom:0;  
          font-size:20px; color:#303030;font-weight:norml;font-family: "Arial", "Helvetica", "sans-serif";}
div.Rgt {width:50%; height:auto; padding-left:25px; padding-right:50px; padding-top:0; padding-bottom:0;  
          font-size:20px;color:#303030;font-weight:normal;font-family: "Arial", "Helvetica", "sans-serif";}
img.Abt {width:100%; height:auto; }

font.Co-hd  {font-size:22px; color:#303030;font-weight:bold;font-style:standard;font-family: "Arial", "Helvetica", "sans-serif"; }
font.BdyB  {font-size:26px; color:#202080;font-weight:bold;font-style:standard;font-family: "Arial", "Helvetica", "sans-serif"; }

div.Gotop {width:100%; height:auto; padding-top:1%; padding-bottom:1.5%; 
          font-size:20px;color:#0000C0;font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif"; }

img.chat {width: 20%; height:auto; }

a.eml {font-size:17px;color:#818080; text-decoration:underline; font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif";}
a.eml:active {color:#818080;}
a.eml:visited {color:#818080;}
a.eml:hover{color:#818080; }

div.foot {width:100%;height:auto; 
          text-decoration:none;font-size:16px;color:#303030;font-family:"arial","Helvetica", "sans-serif";font-weight:normal;}



/* mobile MOBILE  MOBILE mobile Begin */
/* Media Query for Mobile Devices (max-width: 580px) */
@media only screen and (max-width: 580px) {
    /* Reinforce global resets *within* the media query for stubborn mobile issues */
    html, body {
        margin: 0 !important; /* Ensure no margin is pushing content down */
        padding: 0 !important; /* Ensure no padding is pushing content down */
        display: block !important; /* Ensure they behave as block elements */
        min-height: 0 !important; /* Prevent any implicit min-height */
        line-height: 1 !important; /* Aggressively reset line-height */
    }

    .video-banner-container {
        height: 250px; /* Adjusted height for mobile screens */
        min-height: unset; /* Remove min-height for mobile if desired */
        position: relative !important; /* IMPORTANT: Ensure this container is the positioning context for .Intro */
        top: -10px !important; /* Explicitly stick to the top within its parent */
        margin-top: 0 !important; /* Explicitly remove any top margin */
        border-radius: 0; /* Remove rounded corners on mobile for a full-bleed banner effect */
        box-shadow: none; /* Remove shadow on mobile for performance/simplicity */
    }

    .desktop-video {
        display: none; /* Hide desktop video on screens 580px or smaller */
    }

    .mobile-video {
        display: block; /* Show mobile video on screens 580px or smaller */
    }

    .Intro {
        display: block; position: absolute !important; width: 95%; 
		left: 15%;     /* Adjusted horizontally */ top: 35%;    /* Adjusted vertically */
        transform: translate(0%, -10%); /* Adjust for horizontal and vertical centering */
        text-align: left; font-size: 0.8em;  line-height: 1.2; 
        padding: 0 5px;           /* Reduced horizontal padding for mobile */
        color: white; /* Keep white for mobile video contrast */
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Slightly softer shadow for mobile */
        box-sizing: border-box; /* Ensure padding/border are included in width */
        white-space: normal; /* Allow text to wrap normally */
        z-index: 100; /* Ensure it's definitely on top of the video */
    }
	
.Cnt h1 {
    font-size: 1.2em; /* Suggested size for h1 */
    font-weight: bold; /* Ensure h1 is bold */
}
.Cnt h1 .subtitle-text {
    font-size: 0.6em; white-space: nowrap; /* Keep the text on a single line */
    display: inline-block; /* Allows for vertical-align and other properties */
    vertical-align: middle; /* Helps align it vertically with the main h1 text */
    margin-left: 0.5em; /* Small space between bold text and subtitle */
}
.Cnt a {
    color: #202080; /* blue color for links */
    font-size:0.5em; text-decoration: none; font-weight: normal; 
}


div.Cnt2 {position:relative;top:0 ; left:0 ; width:100%; height:auto; 
		  padding-top:20px; padding-bottom:0 ;  padding-left: 1% ; padding-right: 1%; 
		  display:flex; flex;flex-wrap:wrap; }
div.body {position:relative; top:20px; left:0; width:100%; height:auto; 
          padding-left:2%; padding-right:2%; padding-top:3%; padding-bottom:2%;  
		  font-size:11px;color:#303030;font-weight:normal; font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }
		  
div.Lft {width:100%; height:auto; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; 
      font-size:10px;color:#303030;font-weight:normal; font-family: "Arial", "Helvetica", "sans-serif";}
div.Rgt {width:100%; height:auto; padding-left:0; padding-right:0; padding-top:0; padding-bottom:0; 
      font-size:10px;color:#303030;font-weight:normal; font-family: "Arial", "Helvetica", "sans-serif";}
img.Abt {width:100%; height:auto; }
img.chat {width: 40%; height:auto; left:0; }

font.Co-hd  {font-size:12px; color:#303030;font-weight:bold;font-style:standard;font-family: "Arial", "Helvetica", "sans-serif"; }
font.BdyB  {font-size:11px; color:#303030;font-weight:bold;font-style:standard;font-family: "Arial", "Helvetica", "sans-serif"; }

div.Gotop {width:100%; height:auto; padding-top:3%; padding-bottom:0.5%; 
			font-size:11px;color:#0000C0;font-weight:bold;font-style:italic; font-family: "Arial", "Helvetica", "sans-serif"; }

a.eml {font-size:10px;color:#818080; text-decoration:underline; font-weight:bold;font-style:italic;font-family: "Arial", "Helvetica", "sans-serif";}
a.eml:active {color:#818080;}
a.eml:visited {color:#818080;}
a.eml:hover{color:#818080; }

div.foot {width:100%;height:auto; font-size:5px; text-decoration:none; font-weight:bold; color:#303030; 
		  font-family:"arial""Helvetica", "sans-serif";}

	
}

/*  Mobile ended    Mobile ended    Mobile ended    Mobile ended  */