/***** Product Showcase / Coming Soon *****/

/* styles.css */

.blog {
    margin: 0 auto;
    background: white;
   margin-top: 10px;
}



.blog-pattern {
    margin: 0 auto;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
}



.blog-background {
    margin-top: 10px;
    padding-bottom: 100px;
    background: #2d2d2d; /* browsers that don't support rgba */
    background: rgba(45,45,45,.3);
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    -webkit-border-top-left-radius: 89px;
    -webkit-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 89px;
    border-bottom-left-radius: 89px;
}






.blog-background h1 {
    margin-top: 250px;
    padding-left: 50px;
    padding-right: 40px;
    font-size: 30px;
    font-weight: 400;
    color: #FFFF00;
    line-height: 58px;
    text-shadow: 0 1px 7px rgba(0,0,0,.2);
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}

@keyframes shine {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 200px 0;
    }
}

.product-description {
    margin-top: 35px;
    padding-left: 50px;
    padding-right: 40px;
    color: black;
    line-height: 20px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    overflow: hidden;
    background-color: white;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    -webkit-border-top-left-radius: 89px;
    -webkit-border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 89px; 
  animation-name: slidedown;
    animation-duration: 5s;
}


@keyframes slidedown {
    from {
 margin-top: 30%;
        
    }
    to {

 margin-bottom: 11%; 
    }
}















.product-description-right {
    margin-top: 10%;
    padding-left: 0;
    
}

.subscribe-button {
    background-color: darkgreen; /* Change 'green' to any color you desire */
    color: white; /* This sets the text color */
    padding: 10px 10px; /* Adjust padding as needed */
    border: none; /* Removes default button border */
    border-radius: 5px; /* Optional: Adds rounded corners */
    cursor: pointer; /* Optional: Changes cursor to pointer on hover */
}

.subscribe-button:hover {
    background-color: blue; /* Change to a darker shade for hover effect */
}

.privacy-text {
    font-size: 8px; /* Adjust the font size to your preference */
}


.timer {
    margin-top: 10px;
    padding-bottom: 30px;
}

.timer span {
    font-size: 30px;
    font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
}





/***** Footer *****/

footer {
    margin-top: 60px;
    padding: 30px 0;
  
    -moz-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
    -webkit-box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.3) inset;
    color: #aaa;
}




   .email{

        padding-left:20%;
        margin-top: 10%;
        font-size:200%;
        animation-duration:6s;
        animation-name: rotate;
        border-radius: 100%
            
        
    }

    @keyframes rotate {
        from {
            transform: rotate(200deg);
        }
        to {
            transform: rotate(360deg);
        }

    }
    
    /* controls the roundness of the email button*/

    input{
        font-size:100%;
        border-radius:500%;
        border-color:dodgerblue;
        cursor: pointer;
        animation-duration:10s;
        animation-name: rotate;
    }
    

    
    
    
    .icon {
    height: 5px;
    background-color:whitesmoke;
    width: 90%;
    margin: auto;
    overflow: auto;
    /*box-shadow: 0px 5px 5px 2px rgba(55, 55, 55, 0.1);*/
    /*box-shadow: 0px 0px 0px  0px rgba(00, 00, 00, 0.0);*/
    position:static;
    border-radius:100%;
    margin-top: 11%;
}

    
    
 
    
    
    
.copyright {
    margin-top: 20px;
    text-align: center;
}



/***** Media Queries *****/
/* Mobile Devices - Portrait and Landscape */
@media only screen and (max-width: 480px) {
    /* Styles for mobile devices */
    body {
        font-size: 16px;
    }
    .container {
        padding: 10px;
    }
    .header, .footer {
        font-size: 14px;
    }
}

/* Small Devices (Tablets) */
@media only screen and (min-width: 481px) and (max-width: 768px) {
    /* Styles for small devices */
    body {
        font-size: 18px;
    }
    .container {
        padding: 15px;
    }
    .header, .footer {
        font-size: 16px;
    }
}

/* Medium Devices (Tablets in Landscape) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    /* Styles for medium devices */
    body {
        font-size: 20px;
    }
    .container {
        padding: 20px;
    }
    .header, .footer {
        font-size: 18px;
    }
}

/* Large Devices (Laptops and Desktops) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Styles for large devices */
    body {
        font-size: 22px;
    }
    .container {
        padding: 25px;
    }
    .header, .footer {
        font-size: 20px;
    }
}

/* Extra Large Devices (Large Desktops and Monitors) */
@media only screen and (min-width: 1201px) {
    /* Styles for extra large devices */
    body {
        font-size: 24px;
    }
    .container {
        padding: 30px;
    }
    .header, .footer {
        font-size: 22px;
    }
}

@media only screen and (min-width: 1440px) {
    /* Styles for extra large devices */
    body {
        font-size: 24px;
    }
    .container {
        padding: 30px;
    }
    .header, .footer {
        font-size: 22px;
    }
    
}