/* 
Index for style.css

1.  CSS Variables (Root)
2.  Reset styles and base typography
3.  Color utility classes
4.  Banner and intro styles
5.  Back to top button
6.  Header top bar and social icons
7.  Navigation bar and dropdowns
8.  Responsive navigation and dropdowns
9.  Dropdown menu for city selector
10. Logo styles
11. Download/login button styles
12. Banner backgrounds
13. Banner text and layout
14. About section and service grids
15. Stats and counters
16. Team/professors section
17. Who we are section
18. Blog section
19. Footer and copyright
20. Social icons in footer
21. Brand and background utility classes
22. Newsletter form styles
23. Testimonials section
24. Gallery and popup styles
25. Contact form and map
26. Responsive adjustments for layout and typography

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

:root {
    /* Font families */
    --font-main: 'Open Sans', sans-serif;
    --font-heading: 'Lato', sans-serif;
    --font-banner: 'Merriweather', serif;
    --font-intro: 'Roboto', sans-serif;

    /* Colors */
    --color-primary: #8BC34A;
    --color-accent: #6daf3e;
    --color-bg: #f5f5f5;
    --color-white: #fff;
    --color-black: #000;
    --color-grey: #999;
    --color-dark: #252525;
    --color-dark2: #383838;
    --color-banner: #ff3f34;
    --color-footer-link: #eee;
    --color-border: #b1b1b1;
    --color-progress1: #dc3545;
    --color-progress2: #ffc107;
    --color-progress3: #17a2b8;
}

/* Reset styles and base typography */
body {
    padding: 0;
    margin: 0;
    background: var(--color-bg);
    font-family: var(--font-main);
}

body button,
.btn,
body a {
    transition: 0.5s all;
}

.btn:hover,
body button:hover {
    opacity: .8;
    transition: 0.5s all;
}

body a:hover {
    color: var(--color-primary);
    opacity: .8;
    text-decoration: none;
    transition: 0.5s all;
}

html {
    scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-family: var(--font-heading);
}

p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    letter-spacing: 1px;
    line-height: 1.9;
    color: var(--color-grey);
    font-family: var(--font-main);
}

ul, ol {
    margin: 0;
    padding: 0;
}

/* Color utility classes */
.text-bl { color: var(--color-black); }
.text-wh { color: var(--color-white); }
.text-li { color: var(--color-bg); }
.text-colors { color: var(--color-primary); }
.bg-li { background: var(--color-bg); }
.bg-wh { background: var(--color-white); }
.bg-colors { background: var(--color-primary); }
.let-spa { letter-spacing: 1px; }

/* Banner and intro styles */
.banner-title,
.banner-content {
    font-family: var(--font-banner);
    /* font-weight: bold; */
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0px 1px 8px 1px grey;
    text-align: left;
    align-items: center;
    padding: 7px 0 7px 20px;
    border-radius: 5px;
}
.banner-content {
    font-size: 1.3rem !important;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.287);
}

.introduction h3 {
    font-size: 3rem;
    background: var(--color-primary);
    font-family: var(--font-intro);
    margin: 120px 0 50px 0;
}
.introduction p {
    word-spacing: 1.5px;
    font-size: 1.2rem;
}
#who { margin-top: 100px !important; }

/* Back to top button */
a.move-top {
    width: 34px;
    height: 34px;
    background: url(../images/move-top.png) no-repeat center var(--color-white);
    display: inline-block;
    position: fixed;
    bottom: 10%;
    right: 2%;
    z-index: 0;
    border-radius: 50%;
}

/* Header top bar and social icons */
.header-top_w3layouts { padding: 0 .5em; }
.par-so { font-size: 14px; }
.top-right-info span { color: var(--color-white); line-height: 2.2; font-size: 14px; }
.top-right-info li.soci-effe {
    width: 30px; height: 30px; text-align: center; border-radius: 4px;
    transition: 0.5s all;
}
.top-right-info li.facebook { background: #3b5998; }
.top-right-info li.twitter { background: #1da1f2; }
.top-right-info li.google-plus { background: #F44336; }
.top-right-info li.dribbble { background: #ea4c89; }
.top-right-info li { display: inline-block; }
.header-top_w3layouts p,
.header-w3layouts p,
.top-w3layouts p { font-size: 14px; }
.top-w3layouts p a:hover,
.w3l-footer ul li a:hover { opacity: .7; }
.list_of_cities {
    padding: 8px 10px;
    border: 1px solid #dee2e6;
    color: #343a40;
    font-size: 13px;
    letter-spacing: 1px;
    cursor: pointer;
}

/* Navigation bar and dropdowns */
div#home { position: relative; }
.nav_w3ls { display: flex; align-items: center; }
.toggle-2, .toggle, [id^=drop] { display: none; }
nav { margin: 0; padding: 0; }
#logo a {
    float: left;
    display: initial;
    font-size: 46px;
    color: var(--color-white);
    text-shadow: 2px 5px 3px rgba(0, 0, 0, 0.06);
    padding: 0;
}
nav:after { content: ""; display: table; clear: both; }
nav ul {
    float: right;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
nav ul li { margin: 0; float: left; }
nav ul li label {
    display: block;
    padding: 10px;
    background: #558B2F;
    color: var(--color-white);
    cursor: pointer;
    border: 5px ridge var(--color-white);
    box-shadow: -2px 0px 20px 0px var(--color-white);
}
nav ul li label:hover { background: #558B2F; }
nav a {
    margin: 0 12px;
    color: var(--color-black);
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: 400;
    text-transform: none;
}
nav a:hover { color: var(--color-black); }
nav ul ul {
    display: none;
    position: absolute;
    top: 25px;
    background: var(--color-white);
    padding: 10px;
    border-radius: 4px;
    z-index: 9;
    border: 1px solid rgba(0, 0, 0, 0.15);
}
nav ul li:hover > ul { display: inherit; }
nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
    border-radius: 4px;
    transition: 0.5s all;
}
nav ul ul li a {
    color: var(--color-black);
    display: block;
    font-size: 13px;
    letter-spacing: 1px;
    margin: 10px 0;
}
nav ul ul li a:hover {
    background-color: rgba(205, 205, 205, 0.274);
    padding: 2px;
    font-weight: bold;
}
nav ul ul ul li { position: relative; top: -60px; left: 170px; }
li > a:only-child:after { content: ''; }
a.reqe-button {
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

/* Responsive navigation and dropdowns */
@media(max-width: 1080px) {
    .nav_w3ls { margin-top: 1.5em; }
}
@media all and (max-width: 991px) {
    .nav_w3ls { margin-top: 0; }
    #logo { display: block; padding: 0; width: 80%; text-align: center; float: none; }
    nav { margin: 0; }
    .toggle + a, .menu { display: none; }
    .toggle,
    .menu .toggle {
        display: block;
        padding: 8px 14px;
        font-size: 13px;
        text-decoration: none;
        border: none;
        margin-top: 2em;
        float: right;
        background-color: var(--color-white);
        color: var(--color-black);
        font-weight: 400;
        border: 1px solid rgb(170, 161, 161);
        letter-spacing: 1px;
        cursor: pointer;
        transition: 0.5s all;
        text-transform: uppercase;
        max-width: 106px;
    }
    .toggle:hover { background-color: lightgrey !important; opacity: .7; transition: 0.5s all; }
    [id^=drop]:checked + ul {
        display: block;
        background: var(--color-white);
        padding: 15px 0;
        text-align: center;
        width: 100%;
    }
    nav ul li { display: block; width: 100%; padding: 5px 0; }
    nav a:hover, nav ul ul ul a { background-color: transparent; }
    nav ul ul { float: none; position: static; color: var(--color-white); }
    nav ul ul li:hover > ul, nav ul li:hover > ul { display: none; }
    nav ul ul li { display: block; width: 100%; padding: 0; }
    nav ul ul ul li { position: static; }
    nav ul ul li a { color: var(--color-black); font-size: 13px; padding: 0; }
}
@media all and (max-width: 440px) {
    .toggle { padding: 7px 12px; font-size: 14px; }
    #logo a { font-size: 32px; }
}
@media all and (max-width: 375px) {
    nav a, .menu .toggle { font-size: 13px; }
}

/* Dropdown menu for city selector */
#demo { margin: 10px 0 0px 0; }
#demo .wrapper { display: inline-block; position: relative; }
#demo .parent {
    width: 100%;
    display: block;
    cursor: pointer;
    line-height: 30px;
    height: 30px;
    color: var(--color-white);
    z-index: 2;
    position: relative;
    transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
    transition-delay: .8s;
    text-align: center;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 1px;
    padding-left: 0;
    padding-right: 0;
}
#demo .parent:hover,
#demo .content:hover ~ .parent { transition-delay: 0s, 0s, 0s; }
#demo .content:hover ~ .parent {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    z-index: 0;
}
#demo .content {
    position: absolute;
    top: 0;
    display: block;
    z-index: 1;
    height: 0;
    width: 150px;
    padding-top: 30px;
    transition: height .5s ease;
    transition-delay: .4s;
}
#demo .wrapper:active .content,
#demo .content:hover {
    height: 150px;
    z-index: 3;
    transition-delay: 0s;
}
#demo .content ul {
    background: var(--color-white);
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100%;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
#demo .content ul a { text-decoration: none; padding: 0; }
#demo .content li:hover { background: #f8f9fa; }
#demo .content li {
    list-style: none;
    text-align: left;
    color: var(--color-grey);
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    border-top: 1px solid #eee;
}
#demo .content li:last-of-type {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Logo styles */
a.navbar-brand {
    font-size: 34px;
    padding: 0;
    font-weight: 600;
    position: relative;
    color: var(--color-accent);
}
.navbar-light .navbar-brand { color: var(--color-accent); }
a.navbar-brand span {
    color: #333;
    font-size: 10.5px;
    letter-spacing: 3px;
    position: absolute;
    right: 0;
    bottom: 16px;
}

/* Download/login button styles */
a.login-button-2 {
    letter-spacing: 2px;
    font-size: 14px;
    font-weight: 600;
    background: #7eb540;
    padding: 20px 7px;
    display: inline-block;
    transform: scale(0.87);
    color: var(--color-white);
}
a.login-button-2:hover { transform: scale(95%); }
a.login-button-2 span { font-size: 22px; vertical-align: middle; }

/* Banner backgrounds */
.banner1 { background: url(../images/3.jpg) no-repeat center; background-size: cover; }
.banner2 { background: url(../images/2.jpg) no-repeat center; background-size: cover; }
.banner3 { background: url(../images/1.jpg) no-repeat center; background-size: cover; }

/* Banner text and layout */
.banner-info_w3ls { padding: 12vw 0 22vw; }
.banner-info_w3ls h5 { font-size: 20px; letter-spacing: 4px; }
.banner-info_w3ls h3 { font-size: 63px; letter-spacing: 1px; word-spacing: 6px; }
.banner-info_w3ls h3 span { color: var(--color-banner); }
.banner-info_w3ls p {
    color: var(--color-bg);
    letter-spacing: 2px;
    font-size: 14px;
    position: relative;
}
.banner-info_w3ls p:before {
    position: absolute;
    content: "";
    background: var(--color-white);
    width: 60px;
    height: 3px;
    bottom: -47px;
}

/* About section and service grids */
section.about-bottom {
    margin-top: -9em;
    z-index: 10;
    position: relative;
}
.bg-colors {
    box-shadow: 0 12px 60px rgba(0, 0, 0, .2);
}
.service-subgrids { position: relative; z-index: 0; }
.service-subgrids span {
    position: absolute;
    top: 16%;
    right: 7%;
    transform: rotate(-30deg);
    z-index: -1;
    color: rgba(255, 255, 255, 0.18);
    font-size: 4em;
}
.service-subgrids.bg-light span { color: rgba(45, 45, 45, 0.17); }

/* Stats and counters */
.stats-icon-w3pvt {
    background: var(--color-primary);
    width: 65px;
    height: 65px;
    border-radius: 5px;
    text-align: center;
}
.stats-icon-w3pvt span { font-size: 30px; line-height: 2.1; color: var(--color-white); }
.counter { font-size: 40px; line-height: 1.2; }

/* Team/professors section */
.teams { background: url(../images/bg3.jpg) no-repeat center; background-size: cover; }
.top-tem { margin-top: 4em; }
.team-grid {
    width: 100%;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-shadow: 0 12px 60px rgba(0, 0, 0, 0.17);
}
.team-img { position: relative; }
.team-img:after {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 34%;
    content: " ";
    position: absolute;
    background: rgba(0, 0, 0, 0);
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-img img { display: block; margin: 0 auto; text-align: center; }
.team-info {
    left: auto;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    position: absolute;
    opacity: 0;
    color: var(--color-white);
    transform: translate3d(0, 10%, 0);
    transition: opacity 0.3s;
}
.team-info h4 { font-size: 20px; letter-spacing: 1px; color: var(--color-white); }
.team-grid:hover .team-img:after {
    background: rgba(0, 0, 0, 0.82);
    transition-duration: 300ms;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.7, 1, 0.7, 1);
}
.team-grid:hover .team-info {
    transform: translate3d(0, -10%, 0);
    opacity: 1;
    transition: all 0.4s;
}
ul.social-icons li { list-style-type: none; }
ul.social-icons li {
    border: 1px solid #eee;
    width: 30px;
    height: 30px;
    margin: 0 4px;
    transition: all 0.4s;
}
ul.social-icons li a span { color: var(--color-white); line-height: 2.2; font-size: 13px; }
ul.social-icons li.effect-soc-team1 { background: #3b5998; border: 1px solid #3b5998; }
ul.social-icons li.effect-soc-team2 { background: #1da1f2; border: 1px solid #1da1f2; }
ul.social-icons li.effect-soc-team3 { background: #dd4b39; border: 1px solid #dd4b39; }
ul.social-icons li:hover { opacity: .8; transition: 0.5s all; }

/* Who we are section */
.who-left-w3pvt { padding: 0 6em !important; }
ul.who-lists li span {
    margin-right: 10px;
    transition: 0.5s all;
}
ul.who-lists li:hover span {
    margin-right: 20px;
    transition: 0.5s all;
}
h4.progress-tittle { color: #464545; font-size: 16px; margin-bottom: 12px; }
.progress-effect {
    height: 10px;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}
.progress-effect-1 { background-color: var(--color-progress1); }
.progress-effect-2 { background-color: var(--color-progress2); }
.progress-effect-3 { background-color: var(--color-progress3); }

/* Blog section */
span.post-icon {
    position: absolute;
    width: 50px;
    height: 50px;
    line-height: 41px;
    text-align: center;
    font-size: 1.2em;
    border-radius: 50%;
    bottom: -20px;
    color: var(--color-white);
    right: 10px;
    border: 5px solid rgba(234, 233, 234, 0.92);
    background: var(--color-accent);
}
.w3_testi_grid p { font-size: 13px; }
h5.blog-title { line-height: 1.3; }
h5.blog-title a:hover { color: var(--color-accent); }

/* Footer and copyright */
.footer-grid h3 {
    font-size: 22px;
    color: var(--color-white);
    letter-spacing: 1px;
    font-weight: 600;
}
.footer-grid ul li a,
.footer-grid ul li,
.address-right p,
.address-right p a {
    color: var(--color-footer-link);
    font-size: 1rem;
    letter-spacing: 1px;
}
.address-grid i { color: var(--color-white); }
p.copy-right-grids { font-size: 15px; letter-spacing: 2px; }
p.copy-right-grids a:hover { color: var(--color-black); }

/* Social icons in footer */
.w3social-icons ul li { display: inline-block; }
.w3social-icons ul li a {
    color: var(--color-black);
    font-size: 15px;
    display: block;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.44);
    width: 38px;
    height: 38px;
    text-align: center;
    line-height: 2.6;
}
.w3social-icons ul li a:hover {
    box-shadow: 0px 0px 13px 2px var(--color-accent);
}

/* Brand and background utility classes */
.main-brand { padding: 2em; }
.main-brand span { font-size: 40px; color: var(--color-white); }
.main-brand h5 { color: var(--color-white); }
.bg-black { background: var(--color-dark); }
.bg-grey { background: var(--color-black); }
.bg-dark2 { background: var(--color-dark2); }

/* Newsletter form styles */
.news-right-w3ls input[type="text"],
.news-right-w3ls input[type="email"] {
    outline: none;
    padding: 12px 15px;
    font-size: 15px;
    color: var(--color-black);
    width: 100%;
    letter-spacing: 1px;
    border: none;
}
.news-right-w3ls button {
    background: var(--color-accent);
    border: none;
    color: var(--color-white);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 13px;
}
a.button-clk { text-decoration: underline; }
h2.text-bg-click { font-size: 26px; }
h2.text-bg-click a { color: var(--color-white); }
.who-lists li { font-size: 1.2rem; word-spacing: 1.5px; }

/* Testimonials section */
.clients {
    background: url(../images/bg1.jpg) no-repeat top fixed;
    background-size: cover;
    margin-top: 80px;
}
.left-test-w3pvt { padding-right: 14em !important; }
.feedback-top p {
    position: relative;
    transform: translate(10%, 10%);
    font-size: 1.2rem;
    color: var(--color-black);
}

/* Gallery and popup styles */
.gallery-grid1 img {
    transition: 0.5s all;
    padding: 10px;
}
.gallery-grid1:hover img {
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .3);
}
.pop-overlay {
    position: fixed;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0ms;
    visibility: hidden;
    opacity: 0;
    z-index: 999;
}
.pop-overlay:target { visibility: visible; opacity: 1; }
.popup {
    background: var(--color-white);
    border-radius: 4px;
    max-width: 550px;
    position: relative;
    margin: 0.6% auto;
    padding: 3em 2em 2em;
    transform: scale(0.98);
}
.popup p {
    height: 5.7rem;
    overflow: scroll !important;
    scrollbar-width: none;
    font-size: 1rem !important;
    text-align: center;
}
.popup img { height: 60vh; width: 50vw; }
.popup .close {
    position: absolute;
    top: 5px;
    right: 15px;
    transition: all 200ms;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-black);
}
.popup .close:hover { color: #f0546a; }

/* Contact form and map */
.form-w3ls { margin-top: 2vh; }
.main_grid_contact {
    box-shadow: 0px 0px 15.69px 3.31px rgba(204, 204, 223, 0.44);
    height: 76vh;
    overflow: scroll;
    scrollbar-width: none;
}
.main_grid_contact input[type="text"],
.main_grid_contact input[type="email"],
.main_grid_contact textarea,
.n-right-w3ls input[type="email"],
.n-right-w3ls input[type="text"] {
    outline: none;
    padding: 11px 12px;
    font-size: 14px;
    color: var(--color-black);
    width: 100%;
    letter-spacing: 1px;
    background: transparent;
    border: 1px solid var(--color-border);
}
.main_grid_contact textarea { min-height: 10em; resize: none; }
.main_grid_contact .input-group1 button {
    outline: none;
    padding: 13px 10px;
    font-size: 14px;
    width: 36%;
    margin-top: 2em;
    color: var(--color-white);
    background: var(--color-accent);
    border: none;
    letter-spacing: 1px;
    cursor: pointer;
}
.map { padding: 0; }
.map iframe { border: none; width: 100%; height: 100%; }

/* Responsive adjustments for layout and typography */
@media(max-width: 1440px) {
    .banner-info_w3ls h3 { font-size: 58px; }
    .banner-info_w3ls h5 { font-size: 18px; }
}
@media(max-width: 1366px) {
    section.about-bottom { margin-top: -6em; }
    .who-left-w3pvt { padding: 0 4em !important; }
    .left-test-w3pvt { padding-right: 8em !important; }
}
@media(max-width: 1280px) {
    .banner-info_w3ls h3 { font-size: 52px; }
    .banner-info_w3ls h5 { font-size: 16px; }
}
@media(max-width: 1080px) {
    p { font-size: 15px; }
    a.navbar-brand { font-size: 30px; }
    a.navbar-brand span { font-size: 9.5px; right: 11px; bottom: 10px; }
    .navbar-light .navbar-nav .nav-link { font-size: 12px; }
    img.logo-img { width: 30%; }
    a.login-button-2 { font-size: 13px; padding: 27px 32px; }
    .banner-info_w3ls h3 { font-size: 44px; }
    .banner-info_w3ls h5 { font-size: 15px; }
    .banner-info_w3ls p { font-size: 13px; }
    .service-subgrids span { font-size: 3em; }
    .team-img:after { height: 40%; }
    .who-left-w3pvt { padding: 0 6em !important; }
    .w3_testi_grid p { font-size: 12px; }
    .dropdown-item { font-size: 13.5px; }
    .counter { font-size: 35px; }
    .stats-info p.text-colors { font-size: 13px; }
    .news-right-w3ls input[type="submit"] { padding: 13px 0; }
    .left-test-w3pvt { padding-right: 1em !important; }
    section.about-bottom { margin-top: -4em; }
}
@media(max-width: 991px) {
    .w3ls-about-grid h4 { font-size: 22px; }
    .w3ls-about-grid p { font-size: 13px; }
    .team-info h4 { font-size: 17px; }
    .team-img:after { height: 52%; }
    .newsletter_right_w3w3pvt-lau .border-right { border-right: none !important; }
    .map iframe { height: 40vw; }
    .main-brand h5 { font-size: 18px; }
    p.copy-right-grids { font-size: 14px; }
}
@media(max-width: 900px) {
    .footer-grid ul li a,
    .footer-grid ul li,
    .address-right p,
    .address-right p a { font-size: 13px; }
    .header-top_w3layouts p,
    .header-w3layouts p,
    .top-w3layouts p { font-size: 13px; }
}
@media(max-width: 800px) {
    .banner-info_w3ls h3 { font-size: 36px; }
    .banner-info_w3ls h5 { font-size: 14px; }
    section.about-bottom { margin-top: -3em; }
    .main-brand { padding: 1.5em 1em; }
    .main-brand span { font-size: 32px; }
    .main-brand h5 { font-size: 16px; }
    .who-left-w3pvt { padding: 0 4em !important; }
}
@media(max-width: 736px) {
    .par-so { font-size: 13px; }
    a.navbar-brand { font-size: 28px; }
    a.navbar-brand span { font-size: 9px; letter-spacing: 2px; }
    .team-info h4 { font-size: 19px; }
    .team-img:after { height: 36%; }
    .popup { margin: 5em auto; }
}
@media(max-width: 640px) {
    .banner-info_w3ls h3 { font-size: 30px; }
    .banner-info_w3ls h5 { font-size: 13px; letter-spacing: 3px; }
    .banner-info_w3ls p:before { bottom: -28px; }
    .counter { font-size: 32px; }
}
@media(max-width: 568px) {
    section.about-bottom { padding: 0 2em; }
    .team-grid { width: 54%; margin: 0 auto; }
    p { font-size: 14px; }
    .popup { margin: 5em 1em; }
    h2.text-bg-click { font-size: 24px; }
}
@media(max-width: 480px) {
    .banner-info_w3ls { padding: 14vw 0 26vw; }
    .top-w3layouts, .socila-brek { flex: 0 0 100%; max-width: 100%; }
    .socila-brek { margin-top: 1em; }
    .counter { font-size: 30px; }
}
@media(max-width: 414px) {
    .footer-grid h3 { font-size: 20px; }
    .w3social-icons ul li a { font-size: 13px; width: 32px; height: 32px; }
    .who-left-w3pvt { padding: 0 2em !important; }
    .team-grid { width: 60%; }
    .team-img:after { height: 41%; }
}
@media(max-width: 375px) {
    .team-grid { width: 70%; }
    h2.text-bg-click { font-size: 20px; }
}
@media(max-width: 384px) {
    p.copy-right-grids { font-size: 13px; letter-spacing: 1px; }
    .main_grid_contact .input-group1 input[type="submit"] { width: 55%; }
    ul.list-unstyled.who-lists { margin-left: 1em !important; }
    .banner-info_w3ls { padding: 4em 0 8em; }
}
@media(max-width: 320px) {
    .header-top_w3layouts p,
    .header-w3layouts p,
    .top-w3layouts p { font-size: 12px; }
    a.login-button-2 { font-size: 12px; padding: 24px 22px; }
    .form-w3ls { padding: 1.5em .5em !important; }
    .form-w3ls h4 { font-size: 21px; }
    .team-grid { width: 80%; }
}

/* === HEADER === */
.site-header .top-bar {
    background: linear-gradient(90deg, #8BC34A 0%, #7eb540 60%, #6daf3e 100%);
    color: #fff;
    font-size: 1rem;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    height: 2.4rem;
}

/* === MAIN MENU === */
.main-menu {
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}
.main-menu .navbar-brand img {
    height: 48px;
    width: auto;
}
.menu-modal {
    /* Add modal styles here if needed */
}
.menu-modal-content {
    /* Add modal content styles here if needed */
}
.menu-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
}

/* === FOOTER === */
.site-footer {
    background: #252525;
    color: #fff;
}
.site-footer a {
    color: var(--color-footer-link);
}
.site-footer a:hover {
    color: var(--color-primary);
}
.footer-row {
    font-size: 0.9rem;
    font-weight: 500;
}
.footer-contact h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}
.footer-contact address {
    font-style: normal;
    line-height: 1.5;
}

/* === COPYRIGHT BAR === */
.copyright-bar {
    background: #222;
    color: #fff;
    font-size: 0.95rem;
    padding: 0.5rem 0;
}
.copyright-bar .social-link {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 32px;
    font-size: 1.1rem;
    margin: 0 2px;
    background: #444;
    color: #fff;
    transition: background 0.2s;
}
.copyright-bar .social-link.facebook { background: #316FF6; }
.copyright-bar .social-link.twitter { background: #1DA1F2; }
.copyright-bar .social-link.linkedin { background: #0077b5; }
.copyright-bar .social-link:hover { opacity: 0.8; }

/* === GENERAL UTILITY === */
.text-bl { color: #252525; }
.text-colors { color: #8BC34A; }
.bg-colors { background: #8BC34A; color: #fff; }

/* Additional styles */
.who-img {
    height: 80vh;
    border: 5px double black;
}
.gallery-spacing {
    margin-top: 100px;
    margin-bottom: 100px;
}
.contact-form-border {
    border: 2px solid lightgrey;
    border-radius: 5%;
}
.map-iframe {
    border: 0;
    height: 400px;
}
.btn-subscribe {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.pl-40 {
    padding-left: 40px;
}

/* Removed temporary Bootstrap-4 compatibility helpers (mr-*/.ml-*) — templates now use Bootstrap 5 utilities */
.form-w3ls h3.sec-title-w3 {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 1.5rem;
  margin-top: 0;
  text-align: center;
  letter-spacing: 0.5px;
  line-height: 1.2;
  word-break: break-word;
  white-space: normal;
  padding: 0 8px;
  max-width: 100%;
}
@media (max-width: 575.98px) {
  .form-w3ls h3.sec-title-w3 {
    font-size: 1.2rem;
    padding: 0 2px;
  }
}

/* Full-bleed helper: lets an element span the full viewport width
   even when placed inside a centered container. Useful for
   edge-to-edge hero backgrounds while keeping inner content
   constrained by a `.container`. */
.full-bleed {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    box-sizing: border-box;
}