/* --- 1. CORE LAYOUT & RESET --- */
html {
    scroll-padding-top: 100px; /* Adjust this to match your tallest logo height */
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* --- Scrolling Wrapper --- */
.content-scroll-wrapper {
    position: relative; /* Required for z-index to work */
    z-index: 10;        /* Higher than the background-layer (-1) */
    width: 100%; 
    margin-top: 110px;  
    min-height: 100vh;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.1); /* Adds a nice shadow to the 'edge' of the sheet */
}


/* --------------------------------------- */

/* --- 2. SIDEBAR MENU LOGIC --- */

/* Hide the checkbox toggle */
#menu-toggle {
    display: none;
}

/* The 'O' Toggle Button (Fixed Top Left) */
.menu-button {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001; /* Above the side-menu */
    font-size: 36px;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    color: #333;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    transition: background 0.3s;
}




.menu-button:hover {
    background: #555;
}

/* The Slide-out Side Drawer */
.side-menu {
    position: fixed;
    top: 0;
    left: -250px; /* Start hidden off-screen */
    width: 250px;
    height: 100vh;
    background: #FFFFFF;
    z-index: 1000;
    transition: left 0.4s ease-in-out;
    padding-top: 80px; /* Space for the 'O' button */
	
    overflow-y: auto;  /* Adds vertical scroll ONLY when needed */
    overflow-x: hidden; /* Prevents awkward horizontal shaking/scrolling */
}

/* Menu List Styling */
.side-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu ul li a {
    display: block;
    padding: 15px 25px;
    color: #000000;
    text-decoration: none;
    transition: all 0.3s;
    border-left: 4px solid transparent;
}

/* Vertical List Hover Highlight */
.side-menu ul li a:hover {
    color: #333;
    background: #FFF;
    border-left: 4px solid #007bff; /* Blue accent highlight */
}

/* Toggle Logic: When checkbox is checked, slide menu in */
#menu-toggle:checked ~ .side-menu {
    left: 0;
}

.menu-link-row {
	color: #333;
    background: #FFF;
    border-left: 4px solid transparent; /* Blue accent highlight */
}

.menu-link-row:hover {
	color: #333;
    background: #FFF;
    border-left: 4px solid #007bff; /* Blue accent highlight */
}

/* 1. The Default State: Invisible and untouchable */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6); /* Dark dimming effect */
    z-index: 50; /* Make sure this is lower than your side-menu z-index */
    
    /* These two lines hide it completely */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

/* 2. The "Active" State: Triggered by your checkbox */
#menu-toggle:checked ~ .menu-overlay {
    opacity: 1;
    visibility: visible;
}

.icon-menu-holder {
	display: flex;
	align-items: center;
	gap: 5px;
}

.icon-menu-home {
	width: 40px;
	fill: #7740DE;
}

.icon-menu-our-team {
	width: 40px;
	fill: #F7408D;
}

.icon-menu-services {
	width: 40px;
	fill: #0153EC;
}

.icon-menu-telstra {
	width: 40px;
	fill: #F96449;
}

.icon-menu-cisco {
	width: 40px;
	fill: #049FD9;
}

.icon-menu-microsoft {
	width: 40px;
	fill: #FFBA08;
}

.icon-menu-navman {
	width: 40px;
	fill: #99C221;
}

.icon-menu-faq {
	width: 40px;
	fill: #FFA600;
}

.icon-menu-contact-us {
	width: 40px;
	fill: #00D0F8;
}

.icon-menu-privacy {
	width: 40px;
	fill: #15D461;
}

.icon-menu-terms {
	width: 40px;
	fill: #F24A38;
}

/* --------------------------------------- */

/* --- 3. RESPONSIVE TOP-RIGHT IMAGE --- */

/* --- The Full Width White Bar --- */
.header-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 999; /* Just below the buttons/logo but above the background image */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	height: 190px;
}


/* Container - This is what the Media Queries are resizing */
.top-right-image {
    position: fixed;
    right: 10px;
    top: 10px; /* Align to the very top of the white bar */
    z-index: 1000;
    display: flex;
    align-items: center;
}

/* The Secret Sauce: Make the picture tag fill the div */
.top-right-image picture {
    display: block;
    height: 100%;
}

/* Target the specific ID */
#main-logo {
    display: block; /* Add this to remove inline spacing */
    height: 100%;   
    width: auto;    
    object-fit: contain;
}

/* --------------------------------------- */


.typewriter-container {
    display: block;
    font-family: 'Courier New', Courier, monospace; /* Monospaced looks best for typing */
	margin-top: 50px;
	margin-left: 20px;
	font-weight: bold;
	color: white;
	/*background-color: rgba(0, 0, 0, 0.1); */
	backdrop-filter: blur(0px);
	color: white;
	/* Shadow offset-x, offset-y, blur-radius, color */
	text-shadow: 0 0 5px #aaa;
	
}

/* The color for your 4 dynamic words */
.typing-text {
    color: #0044ff; /* Change this to any color you like */
    padding: 10px;
	
}

/* The blinking cursor */
.cursor {
    color: #333;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* --------------------------------------- */

/* --- Background Layer --- */
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1; /* Sits behind everything */
}

.background-layer img {    
    height: 100%;
    object-fit: cover; /* Ensures image fills the screen without stretching */
}

/* --- Centered Content Area --- */
.content-area {
    max-width: 100%; /* Maximum width constraint */
    width: 100%;       /* Becomes browser width if window < 1000px */
    padding: 0px; /* Padding for mobile breathing room */
    box-sizing: border-box; /* Ensures padding doesn't break the 1000px width */
	display: flex;
	justify-content: center; /* Horizontal alignment */
    align-items: center; 
}

.background-top {
	display: flex;
	width: 100%;
    justify-content: center; /* Horizontal alignment */
    align-items: center;     /* Vertical alignment */
    height: 200px;           /* Requires a height to see vertical centering */
    text-align: center;      /* Optional: centers lines of text relative to each other */
	font-size: 48px;
}


.background-home {
	background-image: url("../images/background_home.jpg");
	background-position: center;
	background-repeat: no-repeat;
	display: inline-block;
	text-shadow: 0 0 5px #FFF;
}

.background-our-team {
	background-color: orange;
	color: white;
	text-shadow: 0 0 5px #000;
		
}

.background-telstra {
	background-color: #F6683C;
	color: white;
	text-shadow: 0 0 5px #000;
}

.background-cisco {
	background-color: #049FD9;
	color: white;
	text-shadow: 0 0 5px #000;
}

.background-microsoft {
	background-color: #FFC42D;
	color: white;
	text-shadow: 0 0 5px #000;
}

.background-navman {
	background-color: #A8CB42;
	color: white;
	text-shadow: 0 0 5px #000;
}

.background-contact-us {
	background-color: #049FD9;
	color: white;
	text-shadow: 0 0 5px #000;
}

.background-privacy {
	background-color: #049FD9;
	color: white;
	text-shadow: 0 0 5px #000;
}

.background-terms {
	background-color: #049FD9;
	color: white;
	text-shadow: 0 0 5px #000;
}

.background-faq {
	background-color: #279EF4;
	color: white;
	text-shadow: 0 0 5px #000;
}

.background-faq-telstra {
	background-color: #F6683C;
	
}

.background-faq-cisco {
	background-color: #049FD9;
}

.background-faq-microsoft {
	background-color: #FFC42D;
}

.background-faq-navman {
	background-color: #A8CB42;
}

.faq-box-padding {
	padding: 1px 10px 1px 10px;
	border-radius: 10px;
}

.background-our-services {
	background-color: #263F86;
	color: white;
}

.background-testimonials {
	background-color: #FF7F27;
	color: black;
}

/* --- Centered Content Area --- */
/* Home page only */
.content-area-home-secondary {
    max-width: 100%; /* Maximum width constraint */
    width: 100%;       /* Becomes browser width if window < 1000px */
    margin-top: 0px;    /* Centers the content area */
    padding: 0px 0px; /* Padding for mobile breathing room */
    box-sizing: border-box; /* Ensures padding doesn't break the 1000px width */
}

/* --- Centered Content Area --- */
.content-area-home-secondary {
    max-width: 1000px; /* Maximum width constraint */
    width: 100%;       /* Becomes browser width if window < 1000px */
    margin: 0 auto;    /* Centers the content area */
    padding: 20px 20px; /* Padding for mobile breathing room */
    box-sizing: border-box; /* Ensures padding doesn't break the 1000px width */

}

/* Home page only */
.content-area-home-bottom {
    max-width: 100%; /* Maximum width constraint */
    width: 100%;       /* Becomes browser width if window < 1000px */
    margin-top: 0px;    /* Centers the content area */
    padding: 20px 0 50px 0; /* Padding for mobile breathing room */
	background-color: white;
    box-sizing: border-box; /* Ensures padding doesn't break the 1000px width */
	
	
}

.text-column {
	font-size: 12px;
	flex: 1 1 calc(75% - 20px);
}

/* Base style for the content */
.content-wrapper {
    display: block;
}

/* --------------------------------------- */

.section-header {
	text-align: left;
}


/* --- Media Queries (The actual scaling) --- */

@media (min-width: 1580px) {
    .top-right-image {
        height: 90px;
    }
	
	.header-bar {
		height: 110px;
	}
	
	.background-layer img {
		height: 940px;
	}
	
	.content-scroll-wrapper {
        margin-top: 110px; /* Shorter gap for mobile */
    }

	.typewriter-container {
		margin-top: 30px;
		font-size: 48px;
	}
	
	.testimonial-logo {
		max-width: 500px;
		height: auto;
	}
}

@media (min-width: 1180px) and (max-width: 1580px) {
    .top-right-image {
        height: 70px;
    }
	
	.header-bar {
		height: 90px;
	}
	
	.background-layer img {
		height: 730px;
	}
	
	.content-scroll-wrapper {
        margin-top: 90px; /* Shorter gap for mobile */
    }

	.typewriter-container {
		margin-top: 50px;
		font-size: 48px;
	}
	
	.testimonial-logo {
		max-width: 250px;
		height: auto;
	}
}

@media (min-width: 880px) and (max-width: 1180px) {
    .top-right-image {
        height: 50px;
    }
	
	.header-bar {
		height: 70px;
	}
	
	.background-layer img {
		height: 550px;
	}
	
	.content-scroll-wrapper {
        margin-top: 70px; /* Shorter gap for mobile */
    }
	
	.typewriter-container {
		margin-top: 50px;
		font-size: 36px;
	}
	
	.testimonial-logo {
		max-width: 250px;
		height: auto;
	}
	
	

}

@media (max-width: 880px) {
    .top-right-image {
        height: 50px; 
        top: 5px;
        right: 5px;
    }
	
	.header-bar {
		height: 70px;
	}
	
    .background-layer img {
		height: 400px;
	}
	
	.content-scroll-wrapper {
        margin-top: 70px; /* Shorter gap for mobile */
    }
	
	.typewriter-container {
		margin-top: 50px;
		font-size: 36px;
	}
	
	.testimonial-logo {
		width: 120px;
		height: auto;
	}
	
	.background-top {
		font-size: 36px;
	}
	
}

/* --------------------------------------- */


/* 1. This container MUST have display: grid */

.main-grid-5 {
    display: grid;
    gap: clamp(2px, 5vm, 20px);
    padding: 10px;
    /* Default for smaller screens: 2 columns */
    grid-template-columns: repeat(2, 1fr);
}

.main-grid-4 {
    display: grid;
    gap: clamp(2px, 5vm, 15px);
    padding: 10px;
    /* Default for smaller screens: 2 columns */
    grid-template-columns: repeat(2, 1fr);
}

.main-grid-3 {
    display: grid;
    gap: clamp(5px, 5vm, 20px);
    padding: 10px;
    /* Default for smaller screens: 2 columns */
    grid-template-columns: repeat(2, 1fr);
}

.main-grid-2 {
    display: grid;
    gap: clamp(5px, 5vm, 20px);
    padding: 10px;
    /* Default for smaller screens: 2 columns */
    grid-template-columns: repeat(2, 1fr);
}
.main-grid-2-1 {
    display: grid;
    gap: clamp(5px, 5vm, 20px);
    padding: 10px;
    /* Default for smaller screens: 2 columns */
    grid-template-columns: repeat(1, 1fr);
}

/* 2. Style for the boxes so you can see them */
.main-grid-box {
    padding: 10px;
    text-align: left;
}

/* 3. Scale up to 5 columns when the window is large */
@media screen and (min-width: 880px) {
    .main-grid-5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* 3. Scale up to 4 columns when the window is large */
@media screen and (min-width: 880px) {
    .main-grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 3. Scale up to 3 columns when the window is large */
@media screen and (min-width: 880px) {
    .main-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 3. Scale up to 2 columns when the window is large */
@media screen and (min-width: 880px) {
    .main-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 3. Scale up to 2 columns when the window is large */
/* 3. Reduce to 1 column */
@media screen and (min-width: 880px) {
    .main-grid-2-1 {
        grid-template-columns: repeat(2, 1fr);
    }
	
	.text-column-faq {
		min-height: 170px;
	}
}

/* 4. Limit width of icon */
.icon-holder {
	width: 80px;
}

.icon-home {
	fill: #3F51BF;
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.4));
}

a, .general-link {
	color: black;
	font-weight: bold;
	text-decoration: none;
}



/* --------------------------------------- */


/* 1. This container MUST have display: grid */
.logo-grid {
    display: grid;
    gap: clamp(5px, 5vm, 20px);
    /* Default for smaller screens: 2 columns */
    grid-template-columns: repeat(2, 1fr);
	
	/* This centers the content inside each grid cell */
    justify-items: center; 
    
    /* This centers the whole grid if the parent is wider */
    justify-content: center;
	
	
}

/* 2. Style for the boxes so you can see them */
.logo-grid-box {
	display: flex;
    padding: 20px;
    text-align: centre;
	background-color: white;
	justify-content: center;
	border-radius: 10px;
	align-items: centre;
	gap: clamp(5px, 5vm, 20px);
	margin: 20px 0px 20px 0px;
	
}

/* 3. Scale up to 4 columns when the window is large */
@media screen and (min-width: 1000px) {
    .logo-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.section {
	background-color: none;
	padding: 10px;
	width: 880px;
	box-sizing: border-box;
	margin-bottom: 50px;
}

.logo_home {
	width: 130px;
	height: 118px;
}
/* --------------------------------------- */

.carousel-container {
  width: 100%;
  max-width: 100vw; 
  overflow: hidden;
 
}

.carousel-track {
  display: flex;
  padding: 0;         /* Removes default UL padding */
  margin: 0;          /* Removes default UL margin */
  list-style: none;   /* Removes bullets */
  animation: slide-peep 18s infinite;
}

.card {
  min-width: 33.333%; 
  display: flex;
  flex-direction: column; /* Stacks items vertically */
  /* Vertical alignment: flex-start pushes content to the top */
  align-items: flex-start; 
  
  /* Horizontal alignment: keep it centered or move to flex-start for top-left */
  justify-content: flex-start; 

  /* Add padding so the text doesn't touch the very top edge */
  padding: 20px;
  box-sizing: border-box;
  gap: 30px;
}

/* Colors */
.card-content {
	background: #FFFFFF;
	border: 1px solid red;
	border-radius: 20px;
	padding: 20px;
	color: black;
	font-size: 12px;
	flex-grow: 1;	
}

.card-content-logo-bg-black {
	background-color: black;
	border-radius: 10px;
}

.card-content-logo-bg-white {
	background-color: white;
}

.card-content-company {
	color: black;
	font-size: 16px;
	font-weight: bold;
}

.card-content-contact {
	color: #0000CC;
	font-size: 12px;
	font-weight: bold;
}

@keyframes slide-peep {
  /* Start: Centering 1 & 2 (16.66% offset) */
  0%, 20%     { transform: translateX(-16.66%); }  
  
  /* Step 2: Centering 2 & 3 */
  25%, 45%    { transform: translateX(-50%); }     
  
  /* Step 3: Centering 3 & 4 */
  50%, 70%    { transform: translateX(-83.33%); }  
  
  /* Step 4: Centering 4 & Clone 1 */
  75%, 95%    { transform: translateX(-116.66%); } 
  
  /* Reset: Snaps back to the start when reaching Clone 1 & 2 */
  100%        { transform: translateX(-150%); } 
}

.testimonial-logo {
	max-width: 100%;
	min-width: 130px;
	height: auto;
	max-height: 70px;
}

/* --------------------------------------- */

.footer-logo {
	height: 40px;
}

.footer-bar {
	text-align: center;
	margin-top: 30px;
	background-color: white;
}

.footer-link {
	font-size: 12px;
}

/* 1. Hide the checkbox */
.submenu-toggle {
    display: none;
}

/* 2. Layout for the top-level link and caret */
.menu-link-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
	
	padding: 15px 25px 15px 25px;
	
}

/* 3. Hide the submenu initially */
.side-menu ul li .submenu {
    display: none;
    list-style: none;
    padding-left: 30px;
}

/* 4. THE FIX: The selector must target the sibling submenu */
.submenu-toggle:checked ~ .submenu {
    display: block !important; /* Forces it to show */
}

/* 5. Rotate caret when open */

.submenu-toggle:checked ~ .menu-link-row .caret {
    /* Flip it AND nudge it up/down to stay centered */
    transform: scaleX(-2.0) scaleY(-1) translateY(10px);
}

.caret {
    display: inline-block;
    cursor: pointer;
    padding: 10px;
    transition: transform 0.3s ease;
    /* This ensures the spin happens around the exact middle of the icon */
    transform-origin: center; 
    line-height: 1; /* Forces the box to be exactly the size of the font */
	font-size: 24px;
	margin-left: 30px;
	transform: scaleX(2.0) translateY(0px); /* Makes the ^ look wider and more "open" */
}