@charset "UTF-8";
/* CSS Document */


body {background-color:#FFF;}                                  

#header {
    height: 115px;
    background-color: #FF0000;
    background-image: url(../img/tcd-logo-new.svg);
    background-position: 8px 10px;
    background-size: auto 82px;
    background-repeat: no-repeat;
}



.menu_bar {background-color: #444; background-image: none; margin-top:100px; height:37px; border-top: 0px;}

#telephone {background: url(../img/phone-white.svg) top left no-repeat #F00; background-size: auto 21px; background-position: 8px 4px; top:7px;}
                                  
a.pricepromise {right: 188px; top: 14px;}
                                  
#loginOptions {right:278px; top: 20px;}
                                  
#container {padding: 0px; background-color:transparent;}   
                    
ul#primaryNav {top:105px;}
                                  
#newlanguages {top:105px;}
                                  
a.headermail {font-size: 15px; background-position: 0px 3px; background-size: auto 12px; top: 65px;}
                                  
.searchBox1 {top:26px; left: 170px;}
                                  
#q {width:276px;}
                                  

                                  
                                  
                                  
.flag-dropdown {position: relative; display: inline-block; font-size: 0.9rem; float:right;}
                                  
.flag-dropbtn {    
    border: none;
    
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    padding: 4px 5px 9px 0px;
    background: none;
    
}
                                  

.flag-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: 200px;
    right: 0;

}

/* Links inside the dropdown */
.flag-dropdown-content a {
    color: black;
    padding: 10px 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    
}

.flag-dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown menu on hover */
.flag-dropdown:hover .flag-dropdown-content {
    display: block;
}
    
    .country-name {
        color: #fff;
        padding-right: 5px;
        
    }                                   
                                  
 .flag-icon {
    width: 22px;
    margin-right: 10px;
    width: 25px; 
    border: 1px solid white;">
}   
                                  
.red-band-top {width: 100%; background-color: #F00; height: 100px; position: absolute; z-index: -2;}
                                  
.grey-band-top {width: 100%;  background-color: #444; height: 137px; position: absolute; z-index: -3;}  
                                  
.grey-band-bottom {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 585px;
    background-color: #f0f0f0; /* Adjust color as needed */
    z-index: -1; /* Places it behind other content */
margin-top: -585px;
}                       
                                  
                                  
                                  
.new-quote {display: block; font-size: 15px; color: #FFF; letter-spacing: 0.02em; position: absolute; right: 490px; top: 26px; line-height: 12px; transform: scale(1); /* Initial scale */    transform-origin: center; /* Scale from the center */    transition: transform 0.3s ease-in-out; /* Smooth scaling */}
                                  

@media screen and (max-width: 1380px) {
    .new-quote {right: 460px;}

}                                  
                                  
                 
                                  
@media screen and (max-width: 1310px) {
    .new-quote {transform: scale(0.75); /* Scale down at smaller screen sizes */ right: 375px; font-size:1.45em; top: 23px;}

}
                                  
@media screen and (max-width: 1220px) {
    .new-quote {display:none;}

}                                  
                                  
                                  
@media screen and (max-width: 931px) {
    a.pricepromise {display:none;}
    #loginOptions {right:153px;}                             
    #newlanguages {display:none;}
}                                   
                                  
                                  
@media screen and (max-width: 768px) {
    .red-band-top {display: none;}
    .grey-band-top {display: none;}
    .grey-band-bottom {display: none;}
    #header {height:138px; margin-top: 30px;}
    .searchBox1 {width:250px !important;}
    a.headermail {background: none; top: 34px;}
    #q {padding-bottom: 2px;}
    .logintest {color: #FFF;}
    #loginOptions {position: absolute; top: -30px; display: inline; width: 99%; text-align: left; background-image: none; padding-left: 4px;
    padding-top: 8px; background-color: #444; height: 22px; right: 0px;}
    .mobnav {top: 15px;}
                                  
                               
}   
                                  
 @media screen and (max-width: 480px) {
     #header {background-image: url(../img/header_4.png); background-position: 8px 0px; height: 145px;} 
    .searchBox1 {top: 72px; left: 10px;}                              
    .mobnav {top: 4px;} 
    a.headermail {top: 26px;}                            
    #content {margin-left: 0px;}      
                                  
                                  
                                  
}                                  
                                  
                                  
                                  
                                  
                                  


 /* NEW FOOTER */        
/* Wrapper for the grey background */
.footer-wrapper {
    background-color: #f0f0f0;
    width: 100%;
    padding: 20px 0;
}                                
                                  
  /* Main footer content area */
.footer-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    position: relative; /* Allows positioning of third column */
    padding-top: 20px;
                                  
}

/* Footer columns */
.footer-column {
    padding: 10px 0px 10px 0px;
    box-sizing: border-box;
}

/* First column */
.footer-info {
    width: 30%; /* Reduced width for the first column */
    display: flex;
    gap: 20px;
}

.footer-info .sub-column {
    
}

.footer-info h3,
.footer-contact h3,
.footer-hours h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
}

/* Second column - Contact Form */
.footer-contact {
    width: 40%;
}

.footer-contact form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-contact input,
.footer-contact textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.footer-contact button {
    padding: 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.footer-contact button:hover {
    background-color: #555;
}

/* Third column - address details */
.footer-hours {
    width: 25%;
    margin-left: auto;
}
        
/* New row below the footer columns */
.footer-bottom-row {
    width: 95%;
    max-width: 1420px;
    margin: 20px auto 0;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #ccc; /* Optional: add a border to separate the rows visually */
    font-size: 1.0em;
    color: #666;
    line-height: 17px;
}
        
.footer-column .section-title {
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 10px; /* Adjust space below */
    display: block;
}     

.sub-column a {
    font-size: 13px;
    color: #333;
    text-decoration: none;
    line-height: 20px;
}        

.sub-column a:hover {
    text-decoration: underline;
} 
        
.privacy-checkbox {
    display: flex;
    align-items: center; /* Vertically center the checkbox with the label */
    margin: 10px 0;
    font-size: 0.9em;
}

.privacy-checkbox input {
    margin-right: 5px; /* Space between checkbox and label */
}
        
        .privacy-checkbox input[type="checkbox"] {
    width: auto; /* Resets the width for checkboxes */
    margin-right: 5px;
}

.privacy-checkbox a {
    
}
        
        .mob-address {margin-top: 20px;}
        
        .mob-address a {font-size: 13px; text-decoration: none; line-height: 20px;}
        

/* Responsive Layout */
@media (max-width: 768px) {
    .footer-info {display: none;}
    
    .footer-contact, .footer-hours {
        width: 100%; /* Stack columns */
    }
    .footer-content {padding: 15px; background-color: #f0f0f0; width: auto;}                              
                                  
}

@media screen and (max-width: 570px) {
    .mob-address {
        display: block; /* or your desired display property */
    }
}

@media screen and (min-width: 769px) {
    .mob-address {
        display: none;
    }
}

@media (max-width: 768px) {
    .footer-hours {
        display: none; /* Hide third column on mobile */
    }  
}
                                  
                                  
.btn {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: #fff;
    background-color: #444;
    border: 1px solid #444;
    border-radius: 4px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.btn:hover {
    background-color: #666;
    border-color: #666;
}