/* MAIN Styles for site*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap');

* {
    box-sizing: border-box;
}

html, body {
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

h2, h3 {
    font-family: 'Montserrat', sans-serif;
    color: #1a1a1a;
    font-weight: 700;
    text-transform: capitalize;
    /*letter-spacing: 0.5px;*/
}

h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

a {
    color: #005596;
    text-decoration: none;
    transition: all 0.3s ease;
}
a:hover { color: #333; }

hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 20px 0;
}

.flex-container {
  display: flex; /* Aligns children horizontally by default */
  gap: 15px;      /* adds space between two divs */
}

.box {
  flex: 1; /* Makes both divs take up equal width */
  padding: 20px;
}


/*index page only*/
#head-above {
    height: 55px;
    margin: 0 ;
    padding: 0;
    background-color: #8aa0a2;
    border: 1px solid #8aa0a2;
}

#head-above-content {
    position: relative;
    max-width: 1200px;
    width: 95%; 
    margin: auto auto; 
    padding: 0; 
    font-size: 0.72rem; 
    color: #fff; 
    line-height: 1.9;
}

#head-above-content .social-links {
    position: absolute; 
    top: 12px; 
    left: 2px; 
    font-size: 1.1rem;
}

#head-above-content .social-links a {
    color: #fff; 
    margin-right: 20px;
}

#head-above-content .hotline-info {
    position: absolute; 
    top: 8px; 
    left: 380px;
}

#head-area .main-logo {
    width: 220px;
}

#head-area {
    position: relative;
    max-width: 1200px;
    width: 95%;
    margin: 10px auto 10px;
}

#head-under {
    height: 55px;
    background-color: #f0f0f0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #e3e3e3;
}

#head-under p {
    max-width: 1200px; 
    width: 95%;
    margin: auto auto; padding: 8px 0;
}

#head-under input[type=text] {
    width: 100%; height: 30px; border: 1px solid #CCC; background: #fafafa;
}

#head-under-carry {
    padding: 7px 0;
    background-color: #f9f9f9;
    border-bottom: 1px solid #e3e3e3;
}

#head-under-carry p {
    max-width: 1200px;
    width: 95%;
    margin: auto auto;
    padding: 20px 0; 
    font-size: smaller;
    color: #000;
}

/*navigation*/
nav {
    position: absolute;
    right: 0;
    top: 35px;
    font-weight: 600;
    color: #333;
    font-size: 0.85rem;
    text-transform: uppercase;

}

nav a {
    margin: 0 15px;
    color: #333;
}

nav .nav-phone {
    white-space: nowrap;
}

nav .nav-phone img {
    width: 30px; vertical-align: middle; margin-left: 20px;
}

nav a:hover {   
    color: #005596;
}

#container {
   max-width: 1200px;
   width: 95%;
   margin: 60px auto;
}

/* Decorative Divider Section */
#divider {
    padding: 100px 0 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.decorative-separator {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 500px;
    gap: 25px;
}

.decorative-separator .line {
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, transparent, #8aa0a2, transparent);
    opacity: 0.6;
}

.decorative-separator .diamond {
    width: 12px;
    height: 12px;
    background-color: #8aa0a2;
    transform: rotate(45deg);
    border: 1px solid #7a8e90;
    opacity: 0.5;
}

/*used for centering content outside of the conatiner ID*/
.container-width {
   max-width: 1200px;
   width: 95%;
   margin: auto;
}

footer {
    padding: 50px 0 0;
    background: #1a1a1a;
    color: #ccc;
}

footer h3 {
    color: #FFF;
    margin-bottom: 25px;
    font-size: 1.2rem;
}
footer h4 { color: #fff; font-size: 0.9rem; margin-top: 20px; }
footer p { font-size: 0.9rem; margin-bottom: 8px; }

footer section {
    max-width: 1200px;
    width: 95%;
    margin: auto auto;
}

footer .social-links i {
    margin-right: 30px;
    color: #fff;
}

#footer-image-bar {
    margin-top: 100px;
    padding: 10px 0 0;
    border-top: 1px solid #EEE;
    background: #ececec;
}

#footer-image-bar table {
    max-width: 1200px;
    width: 95%;
    margin: auto auto   ;
    border-collapse: collapse;
}

#footer-image-bar table td {
    width: 33.3%;
}

#footer-image-bar table img {
    padding: 10px 15px;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Class added by JavaScript when scrolled into view */
#footer-image-bar table img.reveal {
    opacity: 1;
    transform: translateY(0);
}

/*footer other pages*/
#footer-2 {
    margin-top: 70px;
    background: #f9f9f9;
    color: #707070;
    border-top: 1px solid #eee;
}

#footer-2 h3 {
    color: #000;
}

#footer-2 table img {
    background-color: #FFF;
}

#footer-2 .social-links i {
    margin-right: 30px;
    color: #1a1a1a;
}


.copyright {
    padding-bottom: 10px;
    border-top: 1px solid #444444;
    background-color: #212121;
    color: #FFF;
}

.copyright-2 {
    border-top: 1px solid #eee;
    background-color: 0;
    color: #707070;
}

/*HOME PAGE OUR SERVICE SECTION*/
/*------------------------------------------*/

.service-box {
    flex: 1 1 calc(50% - 15px); padding: 10px 0; /*evenly space boxes*/
}

.service-box h5 {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 15px;
    font-size: 0.8rem;
    color: #000;
    font-weight: bolder;
    text-transform: uppercase; 
}


/*WARRENTY PAGE AND CONTACT US PAGE*/
/*------------------------------------------*/
.error {
    color: red;
    font-size: 14px;
}

.mail-message {
    padding: 5px; 
    background: #fafafa; 
    color: blue; 
    border: 1px solid #2db0e3;
}

.general-message {
    padding: 5px; 
    background: #fafafa; 
    color: red; 
    border: 1px solid #D84315;
}

table[name="warranty"] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

table[name="warranty"] td {
    padding: 10px 25px 10px 0;
    margin: 0;
}

form[name="warranty"], 
form[name="contact"] {
    width: 100%;
    background: #fafafa;
}

form[name="warranty"] input[type=text], 
form[name="contact"] input[type=text]  {
    width: 100%;
    padding: 10px 5px;
    border: #CCC 1px solid;
    background: #FFF
}

form[name="warranty"] input[type=email], 
form[name="contact"] input[type=email]  {
    width: 100%;
    padding: 10px 5px;
    border: #CCC 1px solid;
    background: #FFF
}

form[name="warranty"] textarea, 
form[name="contact"] textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    font-size: 1rem;
    border: #CCC 1px solid;
    background: #FFF
}

form[name="warranty"] input[type=submit], 
form[name="contact"] input[type=submit] {
    padding: 15px 25px;
    background-color: #e18d4c;
    border: 0;
    color: #FFF;
    font-size: 16px;
    cursor: pointer;
}

/* RESPONSIVE MEDIA QUERIES */
@media screen and (max-width: 992px) {
    nav {
        position: static;
        margin-top: 20px;
        text-align: center;
    }
    
    #head-area {
        text-align: center;
    }

    #head-above-content .hotline-info {
        left: auto;
        right: 0;
    }
}

@media screen and (max-width: 768px) {
    #head-above {
        height: auto;
        padding: 10px 0;
    }
    
    #head-above-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #head-above-content .social-links, 
    #head-above-content .hotline-info {
        position: static;
    }

    nav a {
        display: inline-block;
        margin: 5px 10px;
    }

    /* Form Responsiveness */
    table[name="warranty"], 
    table[name="warranty"] tr, 
    table[name="warranty"] td {
        display: block;
        width: 100% !important;
        padding: 10px 0 !important;
    }

    .custom-upload-box {
        width: 100%;
    }

    /* About Page Images */
    main img {
        float: none !important;
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }

    .flex-container {
        flex-direction: column;
    }
    .box { width: 100%; }
    
    .gallery figure {
        width: 100% !important;
    }

    .slider-item {
        flex: 0 0 100% !important;
    }
}
/*------------------------------------------*/

/* Positioning and hover effect for the video advertisement on index page */
.video-ad-wrapper .icon-about {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.video-ad-wrapper:hover .icon-about {
    opacity: 1;
}

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


/* Title Fade Watermark Style */
.title-fade {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 60px;
    letter-spacing: 12px;
    text-transform: uppercase;
    color: #000;
    opacity: 0.07;
    display: inline-block;
    transform: scaleY(1.2);
    transform-origin: top;
    margin: 0;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    -webkit-text-stroke: 2px #000;  /*thicken outer edge of font slightly*/ 
}

@media screen and (max-width: 768px) {
    .title-fade {
        font-size: 30px;
        letter-spacing: 5px;
    }
}

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