@font-face {
    font-family: "socialico";
    src: url("fonts/Socialico/Socialico.eot");
    src: url("fonts/Socialico/Socialico.eot?#iefix") format("embedded-opentype"), url("fonts/Socialico/Socialico.woff2") format("woff2"), url("fonts/Socialico/Socialico.woff") format("woff"), url("fonts/Socialico/Socialico.ttf") format("truetype"), url("fonts/Socialico/Socialico.svg") format("svg");
}

@font-face {
    font-family: 'Palanquin Dark';
    src: url('fonts/PalaquinDark/PalanquinDark-Regular.eot');
    src: url('fonts/PalaquinDark/PalanquinDark-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/PalaquinDark/PalanquinDark-Regular.woff2') format('woff2'),
        url('fonts/PalaquinDark/PalanquinDark-Regular.woff') format('woff'),
        url('fonts/PalaquinDark/PalanquinDark-Regular.ttf') format('truetype'),
        url('fonts/PalaquinDark/PalanquinDark-Regular.svg#PalanquinDark-Regular') format('svg');
}


* { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }

.suspension-contain {max-height: 980px;overflow:hidden;position: relative;}
html.suspended {background: rgba(0,0,0,0.6);}
body {max-width: 100%;margin: 0 auto;text-align: center;}
a {color:inherit;text-decoration: none}
a:hover {text-decoration: none;color:inherit;}
h1,h2,h3,h4,h5,h6,p{ padding:0; margin:0; }

.row {max-width: 1170px; width: 100%; padding:0 15px; margin: 0 auto}

/*display-inline*/
.inbM { display: inline-block; vertical-align: middle; box-sizing: border-box; }
.inbT { display: inline-block; vertical-align: top;	box-sizing: border-box; }

/*flex*/

.fw { flex-wrap: wrap; }
.rr { flex-direction: row-reverse; } 
.flexs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; }
.flexc { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.flexe { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }



/*button*/
.btn { max-width: 200px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; z-index: 1; display: inline-block; background: #4CB7D7; font-weight: 700; font-size: 18px; text-align: center; letter-spacing: 0; line-height: 120%; color: #000; padding: 15px 0; box-sizing: border-box; font-family: 'Onest',sans-serif; }
.btn a { color: #FFFFFF!important; }
.btn:hover {color: #FFF !important; -webkit-box-shadow: 0px 10px 20px -10px #000; box-shadow: 0px 10px 20px -10px #000;  }
.btn::after {content: ""; background: #01131D; -webkit-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; position: absolute;  height: 100%; width: 100%;z-index: -1;left: 0; top: 0; }
.btn:hover::after {-webkit-transform: scaleX(1);-ms-transform: scaleX(1);transform: scaleX(1);}

/*floats*/
.fl {float:left;}
.fr {float:right;}

/*socials*/
.socials a { font-family: 'socialico'; font-size: 40px; color: #FFFFFF; display: inline-block; }
.socials a:last-of-type { margin-bottom: 0; }

/*typography*/
.text-primary{ color: #B11414; }
.text-bold{ font-weight: 700; }
.text-uppercase{ text-transform: uppercase }
.text-center{ text-align: center !important; }
.text-left{ text-align: left; }

/*clearings*/
.clear{ clear:both;}
.clearfix:after {content:"."; display:block; height:0; clear:both;visibility:hidden;font-size: 0;}
.clearfix {display:block;}

/*cookie*/
.cc-animate.cc-revoke.cc-bottom{font-size: 14px; padding: 5px 10px; position: fixed; display: block!important; transform: none!important; bottom: 0!important; left: 20px!important;}

/*call to action*/
.destroy-on-load, .cta {display: none;}

/*contact form messages*/
form .messages p {display: none;font-family: Arial !important;font-weight: 400 !important;letter-spacing: 0 !important;font-size: 16px !important;}
form .loading {display: none;}
form .alert {padding: 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;}
form .alert-success {color: #3c763d;background-color: #dff0d8;border-color: #d6e9c6;}
form .alert-danger {color: #a94442;background-color: #f2dede;border-color: #ebccd1;}
form [type="submit"] {margin:20px auto}

/*contact form*/
.ctc-form {margin: 0 auto;text-align: center;}
.ctc-form input[type="text"],.ctc-form textarea {font-family:Arial;font-size: 16px;color:#000;height:45px;display: block;width: 100%;border:1px solid #ddd;border-radius: 3px;padding: 5px 10px;box-sizing: border-box;margin: 0 auto 8px}
.ctc-form textarea {height: 120px;padding-top:10px;}
/*.ctc-form input[type="text"] {font-family:'Montserrat', sans-serif; font-size: 16px;color:#333333;height:63px;display: inline-block;width: 32%;border: none!important;border-radius: none!important;padding: 15px 20px;box-sizing: border-box;margin: 0 6px 16px;; background: #EEEEEE; font-weight: 500; }
.ctc-form textarea {font-family:'Montserrat', sans-serif; font-size: 16px;color:#333333;height:134px;display: inline-block;width: 98.5%;border: none!important;border-radius: none!important;padding: 15px 20px;box-sizing: border-box;margin: 0 auto 10px; background: #EEEEEE; font-weight: 500; }*/
.ctc-form button {display: block;}
.ctc-form .recap {display: inline-block;}
.ctc-form .g-recaptcha div {margin: 0 auto 10px;}
.ctc-form .ctc-hide {display: none;}
::-webkit-input-placeholder { /* Edge */ color: #111111; }
:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #111111; }
::placeholder { color: #111111; }
/*gallery*/
#content .gallery-container {text-align: center;}
#content .gallery {list-style-type: none;margin: 0;padding: 0;}
#content .gallery li {display: inline-block;}
#content .thumbnail {background-color: #fff;border: 1px solid #ddd;border-radius: 4px;display: block;line-height: .42857; margin-bottom: 20px;padding: 4px;transition: border 0.5s ease-in-out 0s;}
#content .thumbnail:hover {transform: scale(1.02);}
#content .page_navigation {display: inline-block;}
#content .page_link,#content .previous_link,#content .next_link,#content  .first_link,#content  .last_link, #content .ellipse {background-color: #fff;border: 1px solid #ddd;color:  #0275d8;display: inline-block;line-height: 1.25;margin-left: -1px;padding: 0.5rem 0.75rem;position: relative;}
#content .page_navigation > a:hover , .page_navigation > a.active_page {background-color: #eceeef;border-color: #ddd;color: #014c8c;text-decoration: none;}

.fontw { color:#fff; }
.fontb { color: #012B46; }

.tr { text-align:right; }
.tl { text-align:left; }

h1, h2 { font-size:80px; font-family:'DM Serif Display',sans-serif; font-weight:400; letter-spacing:-0.02em; line-height:100%; }
h3 { font-size:25px; font-family:'Onest',sans-serif; font-weight:700; line-height:120%; }
h4 { font-size:18px; font-family:'Onest',sans-serif; font-weight:700; line-height:120%; }
h5 { font-size:16px; font-family:'Onest',sans-serif; font-weight:400; line-height:200%; }
h6 { font-size:15px; font-family:'Onest',sans-serif; font-weight:400; line-height:120%; color:#4CB7D7; }
p, ul li { font-size:18px; font-family:'Onest',sans-serif; font-weight:400; letter-spacing:0.02em; line-height:160% }

ul { padding: 0 0 0 25px; margin: 0; }

.r { margin:20px 0; }

/*header*/
#header {background: #fff; padding: 10px 0; z-index: 999; width: 100%;}
/*#header { position: absolute; padding: 0; min-width: 1200px; z-index: 2; width: 100%; }*/
#header .row { max-width:1820px; width:100%; margin:0 auto; padding:0 15px; }
#header nav a#pull {display: none}
#header nav ul {margin: 0;padding: 0; gap: 40px; display: flex; justify-content: center;}
#header nav ul li {display: inline-block;vertical-align: middle;}
#header nav ul li a { position: relative; font-weight: 400; font-size: 18px; line-height: 120%; display: inline-block; font-family:'Onest',sans-serif; }
/*#header nav ul li a::before { content: ""; background: #2A755E; width: 100%; max-width: 100%; height: 100%; border-radius: 50px; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; transition: all .3s linear; transform: scaleX(0); z-index: -1;}*/
#header nav ul li a:hover::before,
#header nav ul li.active-menu a::before {transform: scaleX(1);}
#header nav ul li.active-menu a, #header nav ul li a:hover {color:#000; font-weight: 700;}
nav {
    position: relative !important;
}
nav ul li.dropdown { position: static; !important; }

/* 1ST LEVEL DROPDOWN (SERVICES)      */
nav ul li.dropdown:hover .accordion-icon { transform: rotate(180deg); transition: transform 0.3s ease;}
nav ul li.dropdown > ul { position: absolute !important; top: 100% !important; left: 120px !important; width:150% !important; max-width: 810px !important; background-color: #00223D !important; /* Dark Navy */ gap:0 20px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important; display: none !important; z-index: 9999 !important;}
nav ul li.dropdown:hover > ul { display: grid !important; grid-template-columns: repeat(2, 1fr);}
nav ul li.dropdown > ul > li { display: block !important; width: 100% !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important;}
nav ul li.dropdown > ul > li > a { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 12px 18px !important; color: #ffffff !important; font-size: 13px !important; text-decoration: none !important; transition: background 0.2s ease !important; text-transform: uppercase;}
nav ul li.dropdown > ul > li:hover > a { background-color: #246B95 !important;}
nav ul li.dropdown > ul > li.has-sub { position: relative !important;}
nav ul li.has-sub:hover > a .accordion-icon { transform: rotate(0deg); transition: transform 0.3s ease; }
nav ul li.has-sub > a .accordion-icon {color: #fff;}
nav ul li.dropdown > ul > li.has-sub > ul { position: absolute !important; top: 0 !important; right: 100% !important; width: 501px !important; max-width: 90vw !important; background-color: #00223D !important; min-width: 220px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important; display: none !important; z-index: 10000 !important; gap:0 20px !important;}
nav ul li.dropdown > ul > li.has-sub:hover > ul { display: grid !important; grid-template-columns: repeat(2, 1fr); }
nav ul li.dropdown > ul > li.has-sub > ul > li { display: block !important; width: 100% !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;}
nav ul li.dropdown > ul > li.has-sub > ul > li > a { display: block !important; padding: 10px 16px !important; color: #ffffff !important; font-size: 13px !important; text-decoration: none !important;}
nav ul li.dropdown > ul > li.has-sub > ul > li > a:hover { background-color: #246B95 !important; font-weight: 400 !important}


.header-container { gap:10px }
.header-left { width:25%; }
.header-logo img { max-width:334px; width:100%; margin:0 auto; }
.header-mid { width: 40%;}
.header-right { width:25%; }
.header-right .tel a { font-size:25px; font-family:'DM Serif Display',sans-serif; font-weight:400; line-height:120%; }
.header-right .tel a::before { content: '\f095'; font-family: 'FontAwesome'; font-size: 17px; color:#4CB7D7; margin: 0 10px 0 0; }
.header-right .mail a { font-size:18px; font-family:'Onest',sans-serif; font-weight:400; line-height:120%; }
.header-right .mail a::before { content: '\f0e0'; font-family: 'FontAwesome'; font-size: 17px; color:#4CB7D7; margin: 0 10px 0 0; }


/*banner*/
/*#banner {background: #6497B1;padding: 40px 0}*/
#banner { background:linear-gradient(rgba(1, 19, 29, 0.2)), url(../images/content/banner-bg.jpg)no-repeat center center; height: 100vh; background-size:cover; position: relative; box-sizing: border-box; z-index: 1; align-items: center; display: flex; justify-content: center; padding: 50px 0;}
.banner-container { max-width: 420px; width: 100%; margin:0 auto;}
.banner-text h1 { margin:0 0 25px; }
.banner-text h3 { margin:40px 0 30px; }
.banner-text p { margin: 0 0 30px; }

/*welcome*/
#welcome { padding:115px 0 145px; }
#welcome .row { max-width:1440px; width:100%; margin:0 auto; }
.welcome-container { padding:105px 150px 145px; background:#F0F0F0; box-shadow:30px 30px 30px rgba(0, 0, 0, 0.1); align-items:flex-start; border-radius:50px; position:relative; z-index:1; gap:20px; }
.welcome-left { max-width:500px; width:100%; }
.welcome-left p { margin:35px 0 50px; }
.welcome-right { max-width:483px; width:100% }
.welcome-right img.w { max-width:483px; width:100%; margin: 0 0 -145px; position:relative; z-index:3; border-radius:25px; box-shadow:0 0 20px rgba(0, 0, 0, 0.5); }
.welcome-right img.dp { max-width: 880px; width: 100%; position:absolute; bottom: -148px; right:0;z-index:2; }

/*service*/

#service { padding:125px 0; }
.service-top h2 { max-width:722px; width:100%; margin:0 auto;  }
.service-top p { max-width:500px; width:100%;  margin:40px auto 70px; }
.service-bot { gap:25px; }
.service-left, .service-right { width:50%; }

.accordion-item { margin-bottom: 15px; border-radius: 10px; background: #ffffff; border: 1px solid #e0e5e5; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); overflow: hidden;}
.accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; cursor: pointer; background: linear-gradient(180deg, #ffffff 0%, #F0F0F0 100%); transition: background 0.3s ease, color 0.3s ease;}
.accordion-icon { font-size: 14px; color: #0b1a28; transition: transform 0.3s ease, color 0.3s ease;}
.accordion-content { max-height: 0; overflow: hidden; padding: 0 24px; transition: max-height 0.3s ease, padding 0.3s ease;}
.accordion-content p.m { margin:0 0 35px; }
.accordion-item.active .accordion-header { background: #00131D;}
.accordion-item.active .accordion-title,
.accordion-item.active .accordion-icon { color: #ffffff;}
.accordion-item.active .accordion-icon { transform: rotate(180deg);}
.accordion-item.active .accordion-content { max-height: 500px; padding: 18px 24px;}

/*choose*/
#choose { background:/*linear-gradient(),*/ url(../images/content/choose-bg.jpg)no-repeat center center; background-size:cover; padding:100px 0; }
#choose .row { max-width:1470px; width:100%; padding:0 15px; margin:0 auto; }
.choose-container { background: linear-gradient(to bottom, rgb(255 255 255 / 50%) 42%, rgb(255 255 255 / 10%));
    border: 1px solid rgb(247 247 247 / 50%); border-radius:50px; box-shadow:5px 5px 20px rgba(1, 19, 29, 0.5); padding:65px 0 60px;  }
.choose-top { max-width:500px; width:100%; margin:0 auto; }
.choose-top p { margin:45px 0; }
.choose-bot { max-width: 1100px; width: 100%; margin:0 auto; display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.choose-item { max-width:230px; width:100%; margin:0 auto; }
.choose-item img { max-width:50px; width:100%; height:50px; object-fit:contain; filter: invert(68%) sepia(51%) saturate(541%) hue-rotate(152deg) brightness(96%) contrast(90%); }
.choose-item h3 { margin:20px 0; }

#images { padding:20px 0;  }
#images .images-container { display: flex; flex-wrap: nowrap; gap: 20px; height: 100%; width: 100%;}
.images1, .images2, .images3, .images4 { height: 100%; display: flex; flex-direction: column;}
.images1 { flex: 1; }
.images2 { flex: 1.7; }
.images3 { flex: 1.3; }
.images4 { flex: 1; }
#images img { width: 100%; object-fit: cover; display: block;}
.images1 img { border-radius: 0 20px 20px 0; }
.images3 img { border-radius: 20px; }
.images4 img { border-radius: 20px 0 0 20px; }
.images2 { gap: 20px; }
.images2 img { height: calc(50% - 10px); border-radius: 20px;}

#areas { padding:110px 0 70px; }
.areas-text { width:70%; }
.areas-btn { width:25%; justify-content:flex-end; }
.areas-bot-header h4 { margin:50px 0; }
.areas-left, .areas-right { width:50%; }
.areas-bot { gap:20px; }
.areas-bot ul { display:grid; grid-template-columns:repeat(2, 1fr); margin:0; padding:0; list-style-type:none; }

/*contact us*/
#contact-top { background:linear-gradient(rgba(76, 183, 215, 0.5)), url('../images/content/contact-bg1.jpg') no-repeat center center; background-size:cover; padding:110px 0 130px; }
.contactus-top h3 { font-weight: 400; }
.contactus-top h2 { margin: 40px 0 100px; }

#contact-bot { background:linear-gradient(rgba(0, 0, 0, 0.2)), url('../images/content/contact-bg2.jpg') no-repeat center center; background-size:cover; padding: 0 0 270px}
.contactus-bot { display: flex; justify-content: flex-end;}
.contactus-text { max-width: 640px; width: 100%; background: linear-gradient(to top, rgba(231, 236, 230, 0), rgba(225, 225, 225, 0.5)); border-radius:30px; box-shadow:5px 5px 20px rgba(1, 19, 29, 0.5); padding: 90px 70px 55px; margin:-30px 0 0; }
.contactus-text p { margin:0 0 30px; }

/*footer*/
#footer {background: #01131D; padding:90px 0 20px }
.footer-top { padding: 0 0 100px; border-bottom: 1px solid #1E6989; gap:20px;  }
.footer-cta { max-width:350px; width:100%; margin:0 auto;  }
.footer-cta h6 { margin:0 0 20px; }
.footer-cta .tel a { font-size:25px; font-family:'DM Serif Display',sans-serif; font-weight:400; line-height:120%; }
.footer-cta .tel a::before { content: '\f095'; font-family: 'FontAwesome'; font-size: 17px; color:#4CB7D7; margin: 0 10px 0 0; }
.footer-cta .mail { margin:20px 0; }
.footer-cta .mail a { font-size:18px; font-family:'Onest',sans-serif; font-weight:400; line-height:120%; }
.footer-cta .mail a::before { content: '\f0e0'; font-family: 'FontAwesome'; font-size: 17px; color:#4CB7D7; margin: 0 10px 0 0; }
.footer-cta .address a { font-size:18px; font-family:'Onest',sans-serif; font-weight:400; line-height:120%; display:flex; gap:10px }
.footer-cta .address a::before { content: '\f3c5'; font-family: 'FontAwesome'; font-size: 17px; color:#4CB7D7; }
.footer-service { max-width:600px; width:100%; margin:0 auto; }
.footer-service h6 { margin:0 0 20px; }
.footer-service h4 { font-weight:400; }
.footer-service ul { list-style: none; padding: 0; margin: 0; display:grid; grid-template-columns:60% 35%; gap:10px 40px }

.footer-bot { margin: 35px 0 0;}
.footer-logo img { max-width:446px; width:100%; margin:0 auto;  }

#footer .copy, #footer .silver { margin: 0 auto; box-sizing: border-box; max-width:310px; width:100%;  } 
#footer .silver img {display: inline-block;vertical-align: middle;max-width: 50px}

/*content*/
#content {padding: 40px 0; }

.inner #content {min-height: 400px;padding: 40px 0}

/*about-page */

.inner.about-page h2 { font-size:40px;s }

#about { padding: 50px 0; }
.about-container { gap:20px; }
.about-left, .about-right { width:50%; }
.about-left img { max-width:500px; width:100%;  }
.about-right p { margin:15px 0; }

.about-text { padding:30px 0; }

#about-contact{ padding: 50px 0; }
.about-contact-container { border:1px solid; border-radius:50px; padding:50px; }
.about-contact-container p { margin:15px 0; }


/*inner-services*/
#inner-serivce { padding:125px 0 145px; }
.inner-service-top { max-width: 960px; width: 100%; margin: 0 auto; padding: 0 0 95px;}
.inner-service-top h3 { font-weight:400; margin:25px 0 45px; }

.inner-service-bot { gap:20px; align-items: stretch;width: 100% }
.inner-service-bot img { width: 100%; object-fit: cover; display: block; border-radius: 20px;}
.inner-service-left { display:flex; flex-direction:column; gap: 20px; }
.inner-service-left img { max-width:640px; width:100%;  }
.inner-service-right img { max-width:480px; width:100%; height:100%; object-fit: cover; }

/*automatic*/

#automatic { padding:0 0 140px }
.automatic-text { max-width:960px; width:100%; margin:0 auto; padding:0 0 50px; }
.automatic-content { gap:20px; align-items:stretch; }
.automatic-left, .automatic-right { max-width:560px; width:100%; margin:0 auto; padding:40px; border-radius:20px; background: linear-gradient(to top, #e7ece6, #eaf1ef, #f1f6f7, #f9fafc, #ffffff);     box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2); }
.automatic-left h3, .automatic-right h3 { margin:0 0 30px; }

/*glass*/
#glass { background:linear-gradient(rgba(0, 0, 0, 0.5)), url(../images/content/glass-bg.jpg)no-repeat center center; background-size:cover; padding:115px 0; }
#glass .row { max-width:1470px; width:100%; margin:0 auto; padding:0 15px; }
.glass-container { background: linear-gradient(to top, rgba(231, 236, 230, 0), rgba(225, 225, 225, 0.5)); border-radius:50px; box-shadow:5px 5px 20px rgba(1, 19, 29, 0.5); padding:100px 160px 60px; }
.glass-top { max-width:960px; width:100%; margin:0 auto 60px; }
.glass-bot { gap:20px; align-items: stretch; }
.glass-item { max-width:230px; width:100%; margin:0 auto;  }
.glass-item h3 { margin:0 0 20px; }
.glass-item h3::before { content: '\f058'; font-family: 'FontAwesome'; font-size: 25px; color:#4CB7D7;  display:block; padding:0 0 20px;  }

/*repair*/


#repair { padding: 100px 0 200px;  }

.repair-content { gap:20px; }
.repair-text { margin:0 0 60px; }
/*.repair-item { max-width: 366px; width: 100%; margin: 0 auto;}*/
.repair-item { width: 33.33%; margin: 0 auto;}

.repair-item h3 { margin:20px 0; }
.repair-bot { padding: 190px 0 0; gap:20px; }
/*.repair-left { max-width:540px; width:100%; }*/
.repair-left p.l { margin:20px 0; }
.repair-right { margin:0 auto; padding:40px; border-radius:20px; background: linear-gradient(to top, #e7ece6, #eaf1ef, #f1f6f7, #f9fafc, #ffffff);     box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.2);  }
.repair-right h4 { margin:30px 0 20px; border-bottom:1px solid; padding:0 0 20px; }
.repair-right h4::before { content: '\f3c5'; font-family: 'FontAwesome'; font-size: 17px; color:#4CB7D7; padding: 0 10px 0 0; }



/*gallery*/

img.img-responsive { max-width: 200px; width: 100%; height: 200px;}

/*contact page*/

.inner.automatic-magnetic-lock-repair-page .inner-service-left img, .inner.glass-table-tops-page .inner-service-left img, .inner.mirror-repair-page .inner-service-left img, .inner.center-casma-lock-repair-page .inner-service-left img, .inner.door-closers-repair-page .inner-service-left img, .inner.dorma-closer-repair-page .inner-service-left img, .inner.glass-door-and-hardware-repair-page .inner-service-left img, .inner.panic-hardware-repair-page .inner-service-left img, .inner.patch-hardware-repair-page .inner-service-left img, .inner.standard-bottom-locks-repair-page .inner-service-left img { width:100%; }
.inner.automatic-magnetic-lock-repair-page .inner-service-left, .inner.glass-table-tops-page .inner-service-left, .inner.mirror-repair-page .inner-service-left, .inner.center-casma-lock-repair-page .inner-service-left, .inner.door-closers-repair-page .inner-service-left, .inner.dorma-closer-repair-page .inner-service-left, .inner.glass-door-and-hardware-repair-page .inner-service-left, .inner.panic-hardware-repair-page .inner-service-left, .inner.patch-hardware-repair-page .inner-service-left, .inner.standard-bottom-locks-repair-page .inner-service-left { margin:0 auto; }


.inner.mirror-repair-page .repair-bot, .inner.glass-table-tops-page .repair-bot { padding: 0 !important; }


.inner.contact-page #contact { padding:30px 0; }
.ctc-form {margin: 0 auto; text-align: center;gap: 10px;display: flex;flex-direction: column;width: 100%; align-items: center;}
.formcal { display: flex;  width: 100%;  max-width: 1366px;  box-sizing: border-box;  gap: 10px;}
label.mes {  display: block;  flex: 1;  width: 100%;}
.message-box { max-width:1366px; width:100%; }


/*frameless*/

.inner.frameless-glass-shower-door-installation-page .inner-service-left { flex-direction:row; align-items: stretch; margin: 0 auto; }
.inner.frameless-glass-shower-door-installation-page .inner-service-left img { max-width:500px; width:100%; margin:0 auto; }

/*privacy policy*/
.inPrivacyBox {max-width: 850px; margin: 0 auto;}
.inPrivacyBox p {text-align: justify!important;}



/** Responsive
-------------------------------------------------------*/

@media screen and (max-width: 1500px){

    nav ul li.dropdown > ul {  }
}

@media screen and (max-width: 1300px){
    .header-mid {width: 40%;}
    .header-right, .header-left { width:30%; }

    nav ul li.dropdown > ul { }
}

@media screen and (max-width: 1300px){
    .header-container { flex-direction:column; }
    .header-right, .header-left { width:100%; display:flex; justify-content: center; gap: 20px; align-items: center; text-align:center; }

    .header-logo img { max-width: 250px; width: 100%; }
    .header-left { width: 20%; }
    .header-mid { width: 45%;}

    #welcome { padding:100px 0; }

    #contactus { padding: 100px 0; }

    /*service page*/
    #inner-serivce { padding:100px 0; }

    #automatic { padding: 0 0 100px; }

    #repair { padding: 100px 0; }
    .repair-bot { padding:100px 0 0; }

    #expert { padding: 80px 0 100px; }
    .expert-top h2 { margin:20px 0 50px }

    #contact-bot { padding:0 0 100px }

    .column-wrap { align-items: flex-start !important; }

    nav ul li.dropdown:hover > ul { display: grid !important; grid-template-columns: repeat(1, 1fr);}
    nav ul li.dropdown > ul { left: 300px !important; width: 100% !important; max-width: 380px !important; }

    nav ul li.dropdown > ul > li.has-sub:hover > ul { display: grid !important; grid-template-columns: repeat(1, 1fr);}
    nav ul li.dropdown > ul > li.has-sub > ul {width: 250px !important;}

}

@media screen and (max-width: 1200px){

    h1, h2 { font-size:70px; }
    h3 { font-size:20px; }

    .header-container { flex-direction:column; }
    .header-right, .header-left { width:100%; display:flex; justify-content: center; gap: 20px; align-items: center; text-align:center; }
    .header-mid { width: 100%;}

    .welcome-container { flex-direction: column; align-items: center; }
    .welcome-left { text-align: center; }

    #welcome { padding:50px 0; }
    .welcome-right img.dp { transform: translateY(-50%); right: 0; left: 0; margin: 0 auto;}

    #service { padding:50px 0; }
    .inner-service-top { padding:0 0 50px; }

    #areas { padding: 50px 0 }

    #contact-top { padding: 50px 0; }
    .contactus-top h2 {margin: 40px 0 50px;}

    #contact-bot { padding:0 0 50px }

    #choose { padding:50px 0; }


    /*service page*/


    .glass-container { padding:100px 100px 60px; }
    .glass-bot { display:grid; grid-template-columns:repeat(2, 1fr); }


    /*frameless */

    .inner.frameless-glass-shower-door-installation-page .inner-service-left img { max-width: 400px; width: 100%; margin: 0 auto; }
}

@media screen and (max-width: 1024px){

    h1, h2 { font-size:60px; }
    h3 { font-size:15px; }

    .choose-bot { grid-template-columns:repeat(2, 1fr); }

    #images .images-container { display: flex; flex-wrap: wrap; gap: 15px; height: auto;}
    .images1, .images2, .images3, .images4 { flex: 0 0 calc(50% - 7.5px); box-sizing: border-box; margin: 0 auto;}
    .images1 { order: 1; }
    .images4 { order: 2; }
    .images2 { order: 3; }
    .images3 { order: 4; }
    .images1 img, .images3 img, .images4 img { height: 300px; width: 100%; object-fit: cover; border-radius: 0; }
    .images2 { display: flex; flex-direction: column; gap: 15px; }
    .images2 img { height: 142.5px; width: 100%; object-fit: cover; border-radius:0;}

    .areas-bot { flex-direction: column;  }
    .areas-left, .areas-right { width:100%; }

    .footer-top { flex-direction: column; }

    /*service page*/

    #inner-serivce { padding:50px 0; }

    #automatic { padding: 0 0 50px; }

    #repair { padding: 50px 0; }
    .repair-bot { padding: 50px 0 0; }

    #expert { padding: 50px 0; }

    .contactus-text { padding:50px 20px; }

    #glass { padding:50px 0; }
    .glass-container { padding:50px; }

    /*frameless */

    .inner.frameless-glass-shower-door-installation-page .inner-service-left img { max-width: 300px; width: 100%; margin: 0 auto; }


}

@media screen and (max-width: 800px){

    h1, h2 { font-size:50px; }
    h3 { font-size:20px; }

	#header {padding: 0}
    #header, #header * { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
	#header .row {width: 100%; padding: 0; }
	#header nav {display:block; height: auto; width: 100%;}
  	#header nav ul { width: 100%; display: none; height: auto;border-bottom:5px solid #000; padding: 0;}
  	#header nav ul li { width: 100%;position: relative; margin: 0; }
  	#header nav ul li a { display: block; float:none; padding: 10px 0;}
  	#header nav a {text-align: left; width: 100%;}
	#header nav a strong {position: absolute; top: 50%; transform: translateY(-50%); left: 15px;}
	#header nav a#pull {display: block; color: #fff; background-color: #fff; height: 60px;padding: 10px 0; width: 100%; position: relative;}
	#header nav a#pull:after { content:""; background: url('../images/nav-icon.png') no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); filter: invert(65%) sepia(43%) saturate(738%) hue-rotate(152deg) brightness(91%) contrast(90%); }

    #header nav ul li.active-menu { padding: 0; width: 100%; }
    #header nav ul li.active-menu a, #header nav ul li a:hover { width: 100%; background: #4CB7D7; padding: 10px 15px; }
    #header nav ul li { background: #fff; padding: 0; }
    #header nav ul li a { padding: 10px 15px; max-width: 100%; }

    .header-mid { width:100%; }
    .header-nav #pull img { max-width:150px; width:100%; }
    .header-right, .header-left { display:none; }

    nav ul li.dropdown > ul { position: static !important; !important; width: 100% !important; max-width: 100% !important;}
    nav ul li.dropdown > ul > li > a { color: #000 !important; }
    nav ul li.dropdown > ul > li.has-sub > ul { position: static !important; max-width:100% !important; width:100% !important; }
    nav ul li.has-sub > a .accordion-icon { color: #000; }

    nav ul li.dropdown > ul > li.has-sub > ul { right: 10% !important; }
    nav ul li.dropdown > ul > li.has-sub > ul > li > a { color: #000 !important; }

    .banner-container { text-align:center; }
    .banner-text h3 { margin: 15px 0; }
    .banner-text p { margin: 0 0 15px; }

    #welcome { padding:30px 0; }
    .welcome-container { padding: 30px 50px 150px; }
    .welcome-left p { margin: 15px 0; }

    #service { padding:50px 0 30px; }
    .service-bot { flex-direction:column; gap:0; }
    .service-right, .service-left { width:100% }
    .service-top p { margin:15px auto; }

    #choose { padding:30px 0; }
    .choose-container { padding:30px 0; }
    .choose-top p { margin: 15px 0; }
    .choose-item h3 { margin:15px 0; }

    #images {}
    
    #areas { padding: 30px 0; }
    .areas-top { flex-direction:column; }
    .areas-text, .areas-btn { width:100%; text-align:center; }
    .areas-text h2 { margin:0 0 30px; }
    .areas-bot-header h4 { margin:30px 0; text-align:center; }

    #contact-top { padding: 30px 0 40px; }
    .contactus-text { padding: 30px;}
    .contactus-top h2 {margin: 30px 0;}
    .contactus-bot { text-align:center; }

    #contact-bot { padding:0 0 30px }

	.cta{background: #4CB7D7  url("../images/common/phonecall.png") no-repeat center center;border-bottom-left-radius: 40px;border-top: 2px solid #4CB7D7 ;border-top-left-radius: 40px;bottom: 1%;display: block;height: 80px;position: fixed;right: 0;text-decoration: none; text-indent: -9999em;width: 100px;z-index: 999;}


	#footer { padding: 30px 0 !important; margin: 0 auto; text-align: center;}
    #footer nav ul li {display: block; width: 100%; margin: 0 auto; padding: 10px 0!important; }
    #footer nav ul li.active-menu a, #footer nav ul li a:hover { border: none; }
    #footer nav ul li.active-menu, #footer nav ul li:hover { background: #535353; }

    .footer-top { padding: 0 0 30px; }
    .footer-bot { flex-direction:column; }
    #footer .copy { max-width:700px; margin:30px 0 0;  }

    /*about-page */

    .inner.about-page h2 { font-size:30px; }
    .about-container { flex-direction: column-reverse; }
    .about-right,.about-left { width:100%; }
    .about-right { text-align:center; }


    /*serivce page */

    #inner-serivce { padding:30px 0; }
    .inner-service-top { padding:0 0 30px; }

    #automatic { padding: 0 0 30px; }
    .automatic-content { flex-direction:column; }
    .automatic-left, .automatic-right { max-width:100%; }

    #glass { padding: 30px 0; }
    .glass-container { padding:30px; }
    .glass-bot { display:grid; grid-template-columns:repeat(1, 1fr); }
    .glass-item { max-width:100%; }

    #repair { padding: 30px 0; }
    .repair-bot { padding:30px 0 0; }

    .repair-content { flex-direction:column; }
    .repair-item { max-width:100%; }
    .repair-bot { flex-direction: column; }
    .repair-left { text-align:center; }

    #expert { padding: 30px 0; }
    .expert-top h2 { margin:20px 0 30px }

    /*frameless */

    .inner.frameless-glass-shower-door-installation-page .inner-service-left  { flex-direction:column; }
    .inner.frameless-glass-shower-door-installation-page .inner-service-left img { max-width: 100%; width: 100%; margin: 0 auto; }



    /*contact*/
    .formcal { flex-direction: column;}
}

@media screen and (max-width: 700px){

    .welcome-right img.dp { bottom: -120px; }

.footer-cta { text-align:center; }
.footer-service { text-align:center; }
.footer-service ul { gap:10px; grid-template-columns: repeat(1, 1fr);  }
    
}

@media screen and (max-width: 500px){

/*    h1 { font-size:50px; }
    h3 { font-size:15px; }*/

    .welcome-right img.dp { bottom:-75px; }

    .choose-bot { grid-template-columns:repeat(1, 1fr); }

    .contactus-text { padding: 30px;}

    #images .images-container { flex-direction: column; }
    #images img { height:100%; }

    .areas-left, .areas-right { text-align: center; }
    .areas-bot ul { grid-template-columns: repeat(1, 1fr);}

}

@media screen and (max-width: 400px){

    /*h2 { font-size:40px; }*/

    .footer-cta .mail a, .footer-cta .address a {font-size: 16px;}
}


/* INNER PAGES */

.inner h2 { color:#012B46; }

.inner #banner { position: relative; background: url('../images/content/inner-banner.jpg')no-repeat center center; background-size: cover; height: 420px; object-fit: cover; }
.inner #banner::after { content: ''; background: rgb( 76 183 215 / 50% ); width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; }
.inner-banner-text { position: relative; z-index: 2; }
.inner-banner-text h1 { color: #FFFFFF; }
.inner-banner-text h3 { font-weight: 400; letter-spacing: 0.1em; line-height: 1.2em; margin: 0 0 10px; }

/*CONTENT*/

.inner-service-top h3 { margin: 20px 0 50px; }
.inner-service-top p { margin: 30px 0 0; }

.automatic-left, .automatic-right { box-shadow: 14px 14px 40px rgba(0, 0, 0, 0.1) !important;  }

#glass { position: relative; }
#glass .row { position: relative; z-index: 2; }
#glass::after { content: ''; background: rgb( 1 19 29 / 25% ); width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; }
.glass-container { position: relative; padding: 105px 15px 65px; background: linear-gradient(to bottom, rgb(255 255 255 / 50%) 42%, rgb(255 255 255 / 10%)); border: 1px solid rgb( 247 247 247 / 50% ); }
.glass-container .wrap { position: relative; max-width: 1100px; width: 100%; margin: 0 auto; }
.glass-top h2 { color: #FFFFFF; }
.glass-top p { margin: 30px 0 0; }
.glass-item h3::before { font-size: 25px; padding: 0; margin: 0 0 10px; }

.repair-content { position: relative; }
.repair-content::after { content: ''; background: #F0F0F0; max-width: 70%; width: 100%; height: 3px; margin: 0 auto; position: absolute; top: 25px; left: 0; right: 0; z-index: -1; }
.repair-item img { background: #FFFFFF; padding: 0 18px; }
.repair-left { width: 68%;}
.repair-left .content-text { max-width: 540px; width: 100%; }
.repair-left .content-text h2 { margin: 0 0 30px; }
.repair-right { width: 32%; padding: 25px 35px; background: linear-gradient( to bottom, #FFFFFF, #E7ECE6 ); box-shadow: 14px 14px 40px rgba(0, 0, 0, 0.1) !important; }
.repair-right h4 { margin: 0; padding: 23px 0; border-bottom: 1px solid rgb( 2 43 70 / 20% ); }
.repair-text h2, .repair-text p { max-width: 960px; width: 100%; margin: auto; }
.repair-text p { margin: 30px auto 0; }


.repair-content.col-2 { margin: 30px 0 0; }
.repair-content.col-2 .repair-item { width: 50%; }
.repair-content.col-2::after { max-width: 50%; }

/*expert*/

#expert { position: relative; padding: 0; }
#expert .row { max-width: 100%; width: 100%; padding: 0; }
.expert-top { position: relative; background: linear-gradient( to bottom, #A8EAF8, #2492BA); padding: 90px 15px 110px; z-index: 2; }
.expert-top .content-text { max-width: 960px; width: 100%; margin: 0 auto; }
.expert-top .content-text h2, .expert-top .content-text h3 { color: #FFFFFF; } 
.expert-top .content-text h3 { font-weight: 400; letter-spacing: 0.1em; margin: 0 0 20px; }

.expert-bot { position: relative; background: url('../images/content/contact-bottom-background.jpg')no-repeat center center; background-size: cover; padding: 0 15px 165px; }
.expert-bot::after { content: ''; background: rgb( 1 19 29 / 25% ); width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; }
/*.expert-bot { max-width:640px; width:100%; margin:0 auto; background: linear-gradient(to top, rgba(231, 236, 230, 0), rgba(225, 225, 225, 0.5)); border-radius:50px; box-shadow:5px 5px 20px rgba(1, 19, 29, 0.5); padding: 90px 30px 75px; }*/

.expert-content { position: relative; max-width: 640px; width: 100%; margin: -30px auto 0; background: linear-gradient(to bottom, rgb(255 255 255 / 50%) 42%, rgb(255 255 255 / 10%)); border: 1px solid rgb( 247 247 247 / 50% ); padding: 90px 70px 70px; border-radius: 30px; z-index: 3; box-shadow: 14px 14px 40px rgba(0, 0, 0, 0.1) !important; }
.expert-content p.l { margin:30px 0 40px; }


/*NEW SECTION*/

#column { position: relative; background: #FFFFFF; padding: 115px 15px; }
#column.dark {  background: linear-gradient(to bottom, #A8EAF8, #2492BA); }
#column .row { max-width: 1440px; width: 100%; margin: 0 auto; }

.column-wrap { gap: 0 30px; }
.column-left { width: 55%; }
.column-left .content-text { text-align: left; }
.column-left .content-text h2 { margin: 0 0 50px; }
.column-right { width: 40%; }
.column-right img { border-radius: 30px; width: 100%; height: 100%: object-fit cover; }

#column.dark .column-left .content-text h2, #column.dark .column-left .content-text { color: #FFFFFF; }

.column-left .content-text ul li { margin: 0 0 15px; }
.column-left .content-text ul li:last-of-type { margin: 0; }




@media screen and (max-width: 800px){

    body { min-width: 320px !important; }

    h1, h2 { font-size: 40px; }

    .inner #banner { height: 300px; }

    .inner-service-top h3 { margin: 15px 0; }

    .automatic-text { padding: 0 0 20px; }

    .automatic-left, .automatic-right { padding: 30px 15px; }
    .automatic-left p, .automatic-right p { text-align: center; }
    .automatic-left h3, .automatic-right h3 { margin: 0 0 15px; text-align: center; }

    .glass-container { padding: 30px 15px; border-radius: 20px; }
    .glass-top { max-width: 100%; margin: 0 auto 30px; }
    .glass-item h3 { margin: 0 0 15px; }

    .repair-content::after { display: none; } 
    .repair-item { width: 100% !important; }
    .repair-item img { padding: 0; }
    .repair-item h3 { margin: 15px 0; }
    .repair-left, .repair-right { width: 100%; }
    .repair-text { margin: 0 auto 30px; }
    .repair-left .content-text { max-width: 100%; width: 100%; }
    .repair-left p.l { margin: 15px 0; }
    .repair-right h4 { text-align: center; }

    #column { padding: 30px 15px; }
    #column .row { padding: 0; }
    .column-wrap { flex-wrap: wrap; gap: 20px; }
    .column-left, .column-right { width: 100%; }
    .column-left .content-text h2 { margin: 0 0 30px; text-align: center; }

    .expert-content { margin: 0; }
    .expert-top, .expert-bot { padding: 30px 15px; }
    .expert-top h2 { margin: 15px 0 0; }

    .expert-content { max-width: 100%; width: 100%; padding: 30px 15px; border-radius: 20px; }
    .expert-content p, .expert-btn { text-align: center; }
    .expert-content h3 { text-align:center; }
    .expert-content p.l { margin: 15px 0; }

    .repair-text p, .inner-service-top p, .glass-top p { margin: 15px 0 0; }


}