* {
    margin: 0;
    padding: 0;
    box-sizing: none;
}

body {
    height: 100vh;
    background: url('images/cadflow_background.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow: hidden;
}

.splash-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;  /* This will take the full height of the viewport */
}

.logo {
    margin-bottom: 20px;  /* Add some spacing between the logo and the countdown */
}
/* Regular styles remain unchanged */

/* For tablets (general) */
@media only screen and (max-width: 1024px) and (min-width: 769px) {
    .logo {
        width: 80%;  /* Adjust this as per your requirement */
    }
}

/* Specifically for iPad Air in portrait mode */
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: portrait) {
    .logo {
        width: 60%; /* Adjust based on your needs for portrait */
    }
}

/* Specifically for iPad Air in landscape mode */
@media only screen and (min-device-width: 2048px) and (max-device-width: 1536px) and (orientation: landscape) {
    .logo {
        width: 50%; /* Adjust based on your needs for landscape */
    }
}

/* For mobile devices */
@media only screen and (max-width: 480px) {
    .logo {
        width: 85%;
    }
}
/* Regular styles and other media queries remain unchanged */

/* Specifically for iPad Mini (up to 4th generation) in portrait mode */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .logo {
        width: 70%; /* Adjust based on your needs for portrait */
    }
}

/* Specifically for iPad Mini (up to 4th generation) in landscape mode */
@media only screen and (min-device-width: 1024px) and (max-device-width: 768px) and (orientation: landscape) {
    .logo {
        width: 60%; /* Adjust based on your needs for landscape */
    }
}

/* For newer iPad Mini (5th generation and later) which have the same resolution as iPad Air, you might want to adjust slightly for the physically smaller screen if required. If not, remove these. */
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation: portrait) {
    .logo {
    }
}
@media (max-width: 700px) and (device-aspect-ratio: 3/2) { 
    /* Styles for Surface Duo */
    .logo {
        width: 90%;  /* adjust this as per your requirements */
        height: auto;
    }
}
@media (max-width: 1024px) and (max-height: 600px) { 
    /* Styles for Nest Hub */
    .logo {
        width: 60%;  // or specify a fixed width, but ensure it fits
        height: 100%;  // or adjust as required
        overflow: visible;  // if the logo was being cut off due to overflow
    }
}
@media (max-width: 1280px) and (max-height: 800px) { 
    /* Styles for Nest Hub Max */
    .logo {
        width: 60%;  // Increase this value based on how large you want the logo to appear
        height: auto;  // This will maintain the logo's aspect ratio
    }
}
/* For iPhone SE 1st gen */
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) {
    .logo {
        width: 500px;  // Adjust this value based on your needs
        height: auto;  // Maintains the logo's aspect ratio
    }
}

/* For iPhone SE 2nd gen */
@media screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
    .logo {
        width: 500px;  // Adjust this value based on your needs
        height: auto;  // Maintains the logo's aspect ratio
    }
}
@media screen and (device-width: 360px) and (device-height: 740px) and (-webkit-device-pixel-ratio: 4) {
    .logo {
        width: 500px;  // Adjust to your desired size
        height: auto;  // Maintains the logo's aspect ratio
    }
}
.countdown > div {
    display: inline-block;
    justify-content: top;
    align-items: top;
    margin: 0 0px;
    font-size: 0.75em;
    background-color: rgba(0, 0, 0, 0.5);  /* Make the div background transparent */
    padding: 5px 5px;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(255, 0, 0, 0.5);  /* Gives a shadow for a glow effect */
}
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #000;  /* Change the background color to black */
    color: #ffffff;  /* Change the font color to cyan */
}



/* Add this to remove default user agent styling and make the cyan color consistent */
* {
    margin: 0;
    padding: 0;
    box-sizing: none;
}