/* =====================================================
   WEKA OFFICE WEBSITE RESPONSIVE CSS
===================================================== */



:root {

--dark-green:#1a4a2e;
--dark-green-hover:#0f2e1a;

--accent-orange:#f57c00;

--accent-yellow:#ffb300;

--bg-light:#f5f0e8;

}




/* GLOBAL */

* {

box-sizing:border-box;

}


html,body {


width:100%;

margin:0;

padding:0;

overflow-x:hidden;


}



img {


max-width:100%;

height:auto;


}





/* =====================================================
   NAVBAR
===================================================== */


.navbar {


background:#5ee21c !important;

width:100%;


box-shadow:0 2px 15px rgba(74,207,176,.3);


}



.navbar-brand {


display:flex;

align-items:center;

gap:8px;

max-width:100%;


}



.navbar-brand img {


height:45px;

width:auto;


}



.weka-brand-text {


font-family:Arial,sans-serif;

font-size:18px;

font-weight:bold;

color:#ec8e29;


}



.nav-link {


color:white!important;

font-size:14px;


}



.nav-link:hover,
.nav-link.active {


color:var(--accent-orange)!important;


}





/* =====================================================
BUTTONS
===================================================== */


.btn-primary {


background:var(--accent-orange);

border-color:var(--accent-orange);


}



.btn-success {


background:var(--dark-green);

border-color:var(--dark-green);


}





/* =====================================================
CAROUSEL
===================================================== */


.carousel-item img {


width:100%;

height:250px;

object-fit:cover;


}



.carousel-caption {


background:rgba(0,0,0,.5);

padding:20px;

border-radius:10px;


}





/* =====================================================
CARDS
===================================================== */


.card {


border:none;

background:white;

max-width:100%;


}



.card img {


max-width:100%;


}




.text-primary {


color:var(--accent-orange)!important;


}






/* =====================================================
MAIN CONTENT
===================================================== */


.main-content {


background:var(--bg-light);

min-height:60vh;

width:100%;


}





/* =====================================================
FOOTER
===================================================== */


footer {


background:#0bf927;

padding-top:25px;

padding-bottom:25px;

width:100%;

overflow:hidden;


}



footer p {


margin:0;

word-wrap:break-word;

overflow-wrap:anywhere;


}



footer a {


color:var(--accent-yellow);

text-decoration:none;


}






/* =====================================================
HEADINGS
===================================================== */


h1,h2,h3,h4,h5 {


color:var(--dark-green);


}







/* =====================================================
MOBILE DESIGN
===================================================== */


@media(max-width:768px){



.navbar-brand {


max-width:80%;


}




.navbar-brand img {


height:35px;


}




.weka-brand-text {


font-size:15px;

white-space:normal;


}




.navbar-collapse {


background:#5ee21c;

padding:10px;


}




.nav-link {


padding:10px;


}





.carousel-item img {


height:170px;


}




.carousel-caption {


padding:10px;


bottom:10px;


}



.carousel-caption h1,
.carousel-caption h2 {


font-size:20px;


}




.carousel-caption p {


font-size:13px;


}





.card {


margin-bottom:15px;


}





.btn {


max-width:100%;


}





footer {


font-size:14px;


}


}





/* SMALL PHONES */


@media(max-width:400px){


.weka-brand-text {


font-size:13px;


}



.carousel-item img {


height:150px;


}



h1 {


font-size:25px;


}


}