/* =======================================================
* Project Name: BGL
* Project URL: https://ballore.tz/
* Author: Silvanux | ballore | FinestUx
* License: GNU/
======================================================== */

@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lato:wght@300;400;900&display=swap);

html,img {
width:100%}

*,img {
padding:0}

body,h1 {
font-family:Lato,sans-serif}

.navbar,.why_left {
align-content:center}

.left_about,.why_right {
grid-template-rows:1fr 1fr}

.about_front p,.tailor_item p,p {
font-weight:350}

.footer li,nav li {
list-style-type:none}

.ballore,.btn,.footer li a,.slogan,.top_tools,body,nav a:hover,nav li:active {
color:var(--white)}

.ballore a,.footer li a,nav a {
text-decoration:none}

.footer_title,.policy h1 {
font-family:lato,sans-serif;
text-underline-offset:6px}

.abt_grid,.contacts_grid,.services_grid {
grid-template-columns:1fr 1fr;
max-width:1080px;
row-gap:0;
column-gap:0}

.about_front p,.map,p {
text-align:justify}

:root {
--blue_dark:#000729;
--blue_dark2:#000F5C;
--blue_dark3:#006AB5;
--blue_dark4:#17256A;
--blue_light:#2C94F4;
--black:#000000;
--maroon:#870036;
--darkmaroon: #4C001E;
--darkmaroon2: #20000D;
--gold: #FF8A00;
--apple: #009113;
--black: #000000;
--white: #fff;
--gray: #bfbfbf; }

::-webkit-scrollbar {
display:none}

html {
overflow:auto;
scrollbar-width:none;
overflow-x:hidden}

* {
box-sizing:border-box;
margin:0}

img {
bottom:0}

body {
background-color:#eee;
overflow-x:hidden;
line-height:1.3;
background-repeat:repeat;
background-size:auto;
max-width:100%}

.container {
max-width:1080px;
margin:0 auto;
overflow:auto;
padding:0;
box-shadow:0 0 6px rgba(0,0,0,.5);
background-color:var(--white);
overflow-x:hidden}

p {
font-size:2rem;
line-height:1.4;
text-justify:inter-word}

h1 {
font-size:clamp(20px, 6vw, 64px);
font-weight:900}

h3 {
    font-family:lato,sans-serif;
    font-size:clamp(14px, 20px);
    font-weight:100;
    margin-top: 10px;}

.btn {
display:inline-block;
padding:5px 20px;
margin:20px;
background-color:transparent;
outline:var(--white);
border-radius:15px;
border-style:solid;
border-width:1.3px;
border-color:var(--white)}

.btn:hover {
transform:scale(.95)}

.top_blue {
display:flex;
flex-direction:column;
height:10px;
background-color:var(--maroon)}

.one,.top_tools {
flex-direction:row;
display:flex}

.top_tools {
align-items:space-between;
background-color: var(--maroon);
height:25px}

.one {
justify-content:space-between;
width:85%}

.two {
display:flex;
flex-direction:row;
justify-content:space-between;
align-items:flex-end;
width:15%;
padding-right:20px}

.materials-icons {
padding:3px}

.material-icons.md-20 {
font-size:20px;
margin-bottom:3px;
margin-top:3px}

.material-icons.md-24 {
font-size:24px}

.material-icons.md-36 {
font-size:36px}

.material-icons.md-48 {
font-size:48px}

.line_top {
background-color:var(--apple);
display:flex;
flex-direction:column;
height:.01rem}

.navbar,nav {
flex-direction:row;
display:flex}

.down_strip {
background-color:var(--apple);
height:4px;
opacity:.9}

.navbar {
justify-content:space-between;
margin:2px 10px;
width:100%;
align-items:center;
justify-items:center;
font-weight:400;
background-color: var(--white);}

.logo img {
height:auto;
width:200px;
margin-top: 5px;
margin-bottom: 5px;
padding:.2rem}

nav {
margin-right:25px;
justify-content:space-between;
gap:40px;
color:var(--blue_light)}

nav li {
top:40px}

nav a {
top:20px;
color:var(--maroon)}

nav li:hover {
color:  var(--apple);
transform:scale(.88)}

nav a:hover {
color: var(--apple);
border-bottom:1.5px var(--apple) solid}

#toggle,label {
display:none}

/* collar */
.collar {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60px;
    background-color: var(--maroon);
}

.left_collar {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: 20%;
    background-color: var(--maroon);
}

.right_collar {
    display: flex;
    flex-direction: column;
    width: 80%;
    padding: 1px;
}

.left_collar h1 {
    font-size:clamp(10px, 6vw, 20px);
    font-weight:400
}

.line_collar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 2px;
    background-color: var(--white);
    width: 100%;
}

.collar_down {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60px;
    background-image: url(ballore_logistics.jpeg);
    object-fit: cover;
}

/* slider */
/* section */
.showcase {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

/* Slideshow container */
.slideshow-container {
    width: 100%;
    position: relative;
    margin: auto;
    height: 100%;
}

.mySlides {display: none;}

.mySlides img {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

.active, .dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

    /* Number text (1/3 etc) */
.oppa {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 8%;
    background-color: rgba(0,0,0,0.3);
    height: 100%;
    width: 40%;
}

.oppa h1 {
    font-size: clamp(10px, 4vw, 50px);
}

.chat_bot img {
    width: 40px;
    height: 40px;
    position: -webkit-sticky; /* Safari */
    position: fixed;
    bottom: 20%;
    right: 14%;
}
    
@-webkit-keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4} 
to {opacity: 1}
}
          
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}

.about_front {
display:flex;
flex-direction:row;
justify-content:space-between;
background:var(--maroon);
height:auto}

.left_about {
display:grid;
grid-template-columns:1fr 1fr;
margin:clamp(5px,4vw,15px);
gap:clamp(5px,4vw,10px);
width:96%}

.content_a,.right_about,.tailor_made,.what_we_do,.why_inner,.why_left,.why_us {
display:flex}

.about_front p {
font-family:lato,sans-serif;
font-size:1rem}

.about_front img {
width:100%;
height:100%;
border-radius:0 25px;
border:2px solid;
object-fit:cover}

.right_about {
flex-direction:column;
align-items:center;
justify-content:center;
padding:2rem;
width:96%;
gap: 60px;
background-color:var(--maroon)}

.right_about p {
font-family:lato,sans-serif;
font-size:clamp(12px, 3vw, 15px)}

.right_about h1 {
font-size:clamp(23px, 6vw, 64px);
margin-bottom:25px}

.what_we_do h1,.why_us h1 {
font-size:clamp(28px, 6vw, 64px)}

.what_we_do {
flex-direction:column;
align-items:center;
background-color:var(--blue_dark2)}

.what_we_do h1 {
margin-top:20px}

.content_a {
flex-direction:row;
justify-content:space-between;
width:100%}

.left_comb,.right_comb {
width:96%;
margin:1.5rem}

.why_us {
flex-direction:column;
align-items:center;
background-color:var(--maroon);
padding:1.5rem}

.why_us h1 {
font-family:lato,sans-serif;
margin-bottom:25px}

.why_inner {
flex-direction:row;
justify-content:space-between;
gap:1rem}

.why_left {
flex-direction:column;
align-items:center;
justify-content:center;
width:70%}

.why_left h2 {
font-family:lato,sans-serif;
font-size:clamp(13px, 3vw, 35px);
margin-bottom:1rem}

.item_content h2,.tailor_item p,.why_left p,.why_right p {
font-size:clamp(12px, 3vw, 15px)}

.why_left p,.why_right p {
font-family:lato,sans-serif;
font-weight:350}

.why_right {
display:grid;
grid-template-columns:1fr 1fr;
margin:clamp(5px,4vw,15px);
gap:clamp(5px,4vw,10px);
width:30%}

.tailor_made,.why_right img {
width:100%;
background-color:var(--white)}

.why_right img {
height:100%;
border-radius: 0 20px;
border:2px solid var(--gold);
object-fit:cover}

/* Services_Front */
.serv_ballore {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: var(--gold);
}

.serv_ball_right {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    width: 50%;
    padding: .5em;
}

.serv_ball_right img {
    border-radius: 0 20px;
    border: solid var(--white);
    width: 100%;
}

.serv_ball_left {
    display: flex;
    flex-direction: column;
    width: 50%;
}

.serv_ballore h2 {
    color: var(--white);
    font-size: clamp(12px, 3vw, 15px);
    font-weight: 900;
}

.serv_ballore p {
    color: var(--white);
    font-size: clamp(12px, 3vw, 15px);
    margin-bottom: 20px;
}

/* another why  */
.why_us2 {
    flex-direction:row;
    align-content: space-between;
    background-color:var(--maroon);
    padding:1.5rem }
    
    .why_us2 h1 {
    font-family:lato,sans-serif;
    margin-bottom:25px}
    
    .why_inner2 {
    display: flex;
    flex-direction:row;
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-content:space-between;
    gap:1rem}
    
    .why_left2 {
    flex-direction:column;
    align-items:center;
    align-content: center;
    justify-items: center;
    justify-content:center;
    width:60%}
    
    .why_left2 h2 {
    font-family:lato,sans-serif;
    font-size:clamp(13px, 3vw, 20px);
    margin-bottom: 0.5rem}
    
    .item_content2 h2,.tailor_item2 p,.why_left2 p,.why_right2 p {
    font-size:clamp(12px, 3vw, 13px)}
    
    .why_left2 p,.why_right2 p {
    font-family:lato,sans-serif;
    margin-bottom: 20px;
    font-weight:300}
    
    .why_right2 {
    display:grid;
    grid-template-columns:1fr;
    margin:clamp(5px,4vw,15px);
    gap:clamp(5px,4vw,10px);
    width:40%}
    
    .tailor_made2,.why_right2 img {
    width:100%;
    background-color:var(--white)}
    
    .why_right2 img {
    height:100%;
    border-radius: 0 30px;
    border:1px solid var(--white);
    object-fit:cover}

    .btn_join {
        padding: 2px;
        padding-left: 4px;
        padding-right: 4px;
        background-color: var(--maroon);
        color: var(--white);
        border-radius: 4px;
    }
/*  SERVICES PAGE */
.services_ongrid {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
        "a b c"
        "d e f";
    height: auto;
    background-color: var(--maroon);
    gap: 20px;
    padding: 15px;
}

.a, .b, .c, .d, .e, .f{
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
    text-justify: none;
}

/* On TABLET screens */


/* On smaller screens, decrease text size */
@media only screen and (max-width: 660px) and (min-width: 366px) {
    .services_ongrid {
        display: grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
            "a b"
            "c d"
            "e f";
        height: auto;
        background-color: var(--maroon);
        gap: 20px;
        padding: 15px;}

        .chat_bot img {
            width: 30px;
            height: 30px;
            position: -webkit-sticky; /* Safari */
            position: fixed;
            bottom: 20%;
            right: 5%;
        }

        .line_upper {
            display: flex;
            flex-direction: column;
            height: 0.8rem;
            background-color: var(--maroon);
            grid-area: zz;
        }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 1181) and (min-width: 661px) {
        .chat_bot img {
            width: 30px;
            height: 30px;
            position: -webkit-sticky; /* Safari */
            position: fixed;
            bottom: 20%;
            right: 2%;
        }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 365px) and (min-width: 20px) {
    .services_ongrid {
        grid-template-rows: repeat(6, auto);
        grid-template-areas: "a" "b" "c" "d" "e" "f";
    }
    .chat_bot img {
        width: 30px;
        height: 30px;
        position: -webkit-sticky; /* Safari */
        position: fixed;
        bottom: 3%;
        right: 7%;
    }

    .line_upper {
        display: flex;
        flex-direction: column;
        height: 0.8rem;
        background-color: var(--maroon);
        grid-area: zz;
    }
}

.services_ongrid p {
    margin-top: 8px;
    font-size:clamp(12px, 3vw, 15px)
}

.services_ongrid img {
    border-radius: 0 15px;
    border: 1.5px solid var(--white);
    width: 100%;
    height: auto;
}

.port_img img {
    border-radius: 50%;
    border: 1.5px solid var(--white);
    width: 35%;
    height: auto;
}

.tailor_made {
flex-direction:row;
justify-content:space-around}

.tailor_left,.tailor_right {
display:flex;
flex-direction:column}

.tailor_left {
align-content:flex-start;
width:50%;
padding:1rem}

.item_content {
margin-left:1.5rem}

.item_content h2 {
padding-bottom:.25rem;
color:var(--blue_dark3)}

.tailor_item {
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
padding:.2rem}

.tailor_item img {
background-color:var(--gold);
max-width:100px;
max-height:100px;
border-radius:50%;
box-shadow:0 1.5px 5px var(--blue_dark2)}

.tailor_item p {
font-family:lato,sans-serif;
color:var(--blue_dark)}

.footer h2,.footer_title,.slogan h2 {
font-size:clamp(10px, 3vw, 20px);
font-weight:400}

.tailor_right {
align-items:center;
justify-content:center;
align-content:center}

.footer_innovation,.slogan {
display:flex;
flex-direction:column}

.news_letter {
    background-color: var(--gray);
    color: var(--darkmaroon2);
    border: 2px solid var(--white);
    padding: 1.5px;
    border-radius: 4px;
    margin: 15px;
    
}

.footer {
display:flex;
flex-direction:row;
justify-content:space-between;
background-color: var(--darkmaroon2);
height:auto;
padding:1.5rem}

.footer h2 {
font-family:lato,sans-serif}

.footer li a,.footer p {
font-size:clamp(12px, 2vw, 15px)}

.footer_title {
text-decoration:underline 1px var(--gold)}

.footer p {
font-family:lato,sans-serif;
font-weight:350;
padding-top:6px}

.footer li {
font-size:clamp(8px, 3vw, 10px);
padding-top:6px}

.footer_innovation {
width:40%}

.abt_seg_left,.line_footer {
display:flex;
flex-direction:column}

.line_footer {
background-color:var(--white);
height: 0.02rem}

.middle_footer {
display:flex;
flex-direction:row;
align-content:flex-start;
align-items:flex-start;
justify-content:space-around;
width:30%}

.ballore {
display:flex;
flex-direction:row;
justify-content:space-between;
font-size:x-small;
background-color:var(--black);
min-height:25px;
border-top:.01em var(--icon) solid;
padding:1.5rem}

.ballore p {
font-size:.9rem}

.ballore a {
color:var(--gold)}

.abt_grid {
display:grid;
grid-template-rows:1fr 1fr;
grid-template-areas: "z z" "a b" "c d";
height:auto}

.abt_us {
    background-color: var(--apple);
    grid-area: z;
}

.abt_us p {
    color: var(--white);
    margin-top: 8px;
    margin-bottom: 2px;
    font-size:clamp(12px, 3vw, 15px);
    padding: 20px;
}

.abt_seg_left {
background-color: var(--maroon);
align-items:center;
align-content:center;
place-content:center;
place-items:center;
padding: 20px;
width:100%;
height:auto;
grid-area:a}

.abt_seg_right {
display:flex;
flex-direction:column;
align-content:center;
place-content:center;
place-items:center;
background-color:var(--gold);
padding:20px;
height:auto}

.visio_left {
    display:flex;
    flex-direction:column;
    align-content:center;
    place-content:center;
    place-items:center;
    background-color:var(--gold);
    padding:20px;
    height:auto}

.abt_seg_left img,.address_left img,.agribusiness_right img,.desktop_left img,.logistics_left img,.mining_right img,.missio_left img,.software_right img,.tourism_left img,.valu_right img {
width:100%;
height:100%;
object-fit:cover}

.visio_right img {
    border-radius: 0 30px;
    border: solid var(--white);
    width: 80%;
}

.abt_seg_right {
align-items:center;
justify-content:space-evenly;
width:100%;
grid-area:b}

.abt_seg_right img {
    border-radius: 0 30px;
    border: solid var(--white);
    width: 80%;
}

.abt_seg_right h1,.address_right h1,.agribusiness_left h1,.desktop_right h1,.logistics_right h1,.mining_left h1,.missio_right h1,.sendmsg_left h1,.sendmsg_right h1,.software_left h1,.tourism_right h1,.valu_left h1,.visio_left h1, .abt_seg_left h1 {
font-family:lato,sans-serif;
font-size:clamp(13px, 3vw, 35px);
font-weight:400;
margin-bottom:1rem}

.abt_seg_right p,.address_right p,.agribusiness_left p,.desktop_right p,.logistics_right p,.mining_left p,.missio_right p,.policy p,.policy_corruption,.sendmsg_left p,.sendmsg_right p,.software_left p,.tourism_right p,.valu_left p,.visio_left p, .abt_seg_left p {
font-size:clamp(12px, 2vw, 15px)}

.visio_left {
align-items:center;
justify-content:space-evenly;
width:100%;
grid-area:c}

.missio_left,.visio_right {
display:flex;
flex-direction:column;
align-content:center;
place-content:center;
place-items:center;
width:100%}

.visio_right {
background-color: var(--maroon);
align-items:center;
padding: 20px;
justify-content:space-evenly;
grid-area:d}

.visio_right img {
    width: 80%;
}

.missio_left {
align-items:center;
justify-content:space-evenly;
padding:0;
margin:0;
grid-area:e}

.missio_right,.valu_left {
display:flex;
flex-direction:column;
background-color:var(--blue_dark2);
align-content:center;
place-content:center;
place-items:center}

.missio_right {
align-items:center;
justify-content:space-evenly;
width:100%;
height:auto;
padding:20px;
grid-area:f}

.valu_left {
align-items:center;
justify-content:space-evenly;
width:100%;
padding:20px;
grid-area:g}

.policy,.valu_right {
display:flex;
flex-direction:column;
width:100%}

.valu_right {
align-items:center;
align-content:center;
place-content:center;
place-items:center;
justify-content:space-evenly;
grid-area:h}

.policy {
align-items:center;
background-image:linear-gradient(var(--blue_dark),var(--blue_dark))}

.desktop_left,.policy_corruption {
display:flex;
flex-direction:column}

.policy h1 {
font-size:clamp(13px, 3vw, 35px);
font-weight:100;
margin-bottom:.35rem;
text-decoration:underline 1px var(--gold)}

.policy_corruption {
align-items:center;
padding:20px}

.desktop_left {
align-items:center;
align-content:center;
place-content:center;
place-items:center;
justify-content:space-evenly;
width:100%;
background-color:var(--blue_dark2);
grid-area:boo}

.desktop_right,.software_left {
display:flex;
flex-direction:column;
align-content:center;
place-content:center;
place-items:center;
padding:20px;
width:100%;
background-color:var(--blue_dark2)}

.desktop_right {
align-items:center;
justify-content:space-evenly;
grid-area:bob}

.software_left {
align-items:center;
justify-content:space-evenly;
grid-area:bo1}

.logistics_left,.software_right {
display:flex;
flex-direction:column;
align-content:center;
place-content:center;
place-items:center}

.software_right {
align-items:center;
justify-content:space-evenly;
width:100%;
background-color:var(--blue_dark2);
grid-area:bo2}

.logistics_left {
align-items:center;
justify-content:space-evenly;
width:100%;
background-color:var(--blue_dark2);
grid-area:bo3}

.logistics_right,.mining_left {
display:flex;
flex-direction:column;
align-content:center;
place-content:center;
place-items:center;
padding:20px;
width:100%;
background-color:var(--blue_dark2)}

.logistics_right {
align-items:center;
justify-content:space-evenly;
grid-area:bo4}

.mining_left {
align-items:center;
justify-content:space-evenly;
grid-area:bo5}

.mining_right,.tourism_left {
display:flex;
flex-direction:column;
align-content:center;
place-content:center;
place-items:center}

.mining_right {
align-items:center;
justify-content:space-evenly;
width:100%;
background-color:var(--blue_dark2);
grid-area:bo6}

.tourism_left {
align-items:center;
justify-content:space-evenly;
width:100%;
background-color:var(--blue_dark2);
grid-area:bo7}

.agribusiness_left,.tourism_right {
flex-direction:column;
padding:20px;
display:flex;
align-content:center;
place-content:center;
place-items:center;
background-color:var(--blue_dark2);
width:100%}

.tourism_right {
align-items:center;
justify-content:space-evenly;
grid-area:bo8}

.agribusiness_left {
align-items:center;
justify-content:space-evenly;
grid-area:bo9}

.agribusiness_right {
display:flex;
flex-direction:column;
align-items:center;
align-content:center;
place-content:center;
place-items:center;
justify-content:space-evenly;
width:100%;
background-color:var(--blue_dark2);
grid-area:bo0}

.contacts_grid {
display:grid;
grid-template-rows:1fr;
grid-template-areas: "za zz";
height:auto}

.address_left,.address_right {
display:flex;
flex-direction:column;
align-content:center;
place-content:center;
place-items:center;
background-color:var(--blue_dark2)}

.address_left {
align-items:center;
justify-content:space-evenly;
width:100%;
grid-area:xa}

.address_right {
align-items:center;
justify-content:space-evenly;
width:100%;
padding:20px;
grid-area:xx}

.sendmsg_left,.sendmsg_right {
flex-direction:column;
place-content:center;
place-items:center;
width:100%;
font-size:clamp(12px, 2vw, 15px);
padding:20px;
display:flex;
align-content:center}

.sendmsg_left {
align-items:center;
justify-content:space-evenly;
background-color:var(--maroon);
grid-area:za}

.sendmsg_right {
display: flex;
flex-direction: column;
align-items:center;
background-color:var(--gold);
grid-area:zz}

.map {
display:flex;
flex-direction:column;
align-items:center;
align-content:center;
background-color:#fff;
box-shadow:0 3px 10px rgb(0 0 0 / 20%);
animation:1s ease-in slideInFromBottom}

@media (max-width:575.98px) {
.one,.top_tools {
flex-direction:row}

.btn,.footer li a,.top_tools {
color:var(--white)}

.ballore p,.footer p,.footer_title,.why_right p {
font-family:lato,sans-serif}

.navbar,.tailor_item,.top_tools,.two {
align-content:center}

.menu-btn,label {
position:absolute}

#toggle,nav {
display:none}

.footer li,nav {
list-style-type:none}

.footer li a,nav a {
text-decoration:none}

.top_blue {
height:6px;
background-color:var(--blue_light)}

.top_tools {
display:flex;
align-items:space-between;
justify-content:center;
background-color:var(--maroon);
height:10px}

.footer,.logo,.logo img,.menu {
height:auto}

.btn {
font-size:10px;
display:inline-block;
padding:3px 10px;
margin:10px;
background-color:transparent;
outline:var(--white);
border-radius:15px;
border-style:solid;
border-width:1px;
border-color:var(--white)}

.content_a,.one,.two {
display:flex}

.one {
justify-content:space-between;
width:70%}

.two {
flex-direction:row;
justify-content:space-between;
align-items:flex-end;
width:30%;
padding-right:20px}

.material-icons.md-20 {
font-size:15px;
padding-top:3px}

.about_front,.footer_innovation,.tailor_made,.what_we_do {
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
width:100%}

.right_about,nav li {
width:100%}

.content_a {
flex-direction:column;
align-items:center;
justify-content:center;
width:98%}

.why_inner,.why_us {
flex-direction:column;
display:flex;
width:100%}

.why_us {
align-items:center;
justify-items:center;
justify-content:center}

.why_us2 {
    display: flex;
    flex-direction:column;
    align-content: center;
    background-color:var(--maroon);
    padding:1.5rem }

.why_inner2 {
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:0}

.why_inner {
align-items:center;
justify-content:center;
margin:0;
padding:0}

.serv_ballore {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: var(--gold);
}

.serv_ball_left {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.serv_ball_right {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.why_right2 img {
    height:100%;
    border-radius: 0 30px;
    border:1.5px solid var(--white);
    object-fit:cover;
}

.why_left2 {
    flex-direction:column;
    align-items:center;
    align-content: center;
    justify-items: center;
    justify-content:center;
    width:100%;
}

   
.why_right2 {
    display:grid;
    grid-template-columns:1fr;
    margin:clamp(5px,4vw,15px);
    gap:clamp(5px,4vw,10px);
    width:100%;
}

.footer_socials {
    display: none;
}

.footer address,.why_left {
display:flex;
flex-direction:column;
width:100%}

.why_right p {
font-size:.5rem}

.why_right {
display:grid;
grid-template-columns:1fr 1fr;
grid-template-rows:1fr 1fr;
margin:clamp(5px,4vw,15px);
gap:clamp(5px,4vw,10px);
width:100%}

.item_content,.tailor_item,.tailor_left {
display:flex;
flex-direction:column;
width:100%}

.item_content,.tailor_left {
align-items:center;
justify-content:center;
padding:0;
margin:0}

.tailor_item {
align-items:center;
justify-items:center;
justify-content:center}

.tailor_item p {
padding-left:15px;
padding-right:15px}

.item_content h2 {
font-size:clamp(13px, 3vw, 15px);
padding:.5rem;
color:var(--blue_dark3)}

.footer li,.footer li a,.footer p {
font-size:clamp(12px, 3vw, 15px)}

.tailor_item img {
background-color:var(--gold);
max-width:85px;
max-height:85px;
border-radius:50%;
box-shadow:0 1.5px 5px var(--blue_dark2);
margin:1rem}

.gallery {
--s:80px;
--g:5px;
display:grid;
margin:calc(var(--s) + var(--g))}

.ballore,.footer,.menu-btn,.navbar {
display:flex}

.gallery>img {
grid-area:1/1;
width:var(--s);
aspect-ratio:1.15;
object-fit:cover;
clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0 50%);
transform:translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
cursor:pointer;
transition:.2s linear}

.gallery>img:hover {
filter:grayscale(0);
z-index:1;
--_t:1.2}

.gallery>img:first-child {
--_y:calc(-100% - var(--g))}

.gallery>img:nth-child(7) {
--_y:calc( 100% + var(--g))}

.gallery>img:nth-child(3),.gallery>img:nth-child(5) {
--_x:calc(-75% - .87*var(--g))}

.gallery>img:nth-child(4),.gallery>img:nth-child(6) {
--_x:calc( 75% + .87*var(--g))}

.gallery>img:nth-child(3),.gallery>img:nth-child(4) {
--_y:calc(-50% - .5*var(--g))}

.gallery>img:nth-child(5),.gallery>img:nth-child(6) {
--_y:calc( 50% + .5*var(--g))}

.footer {
flex-direction:column;
align-items:center;
width:100%;
background-color:var(--darkmaroon2);
padding:20px}

.footer_title {
font-size:clamp(18px, 3vw, 15px);
margin-bottom:.1rem}

.middle_footer {
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-around;
width:100%;
padding:25px}

.footer p {
font-weight:350;
padding-top:3px}

.ballore {
flex-direction:column;
align-items:center;
background-color: var(--black);
justify-content:center}

.ballore p {
font-size:clamp(10px, 3vw, 15px)}

.finest {
color:#2c94f4}

.navbar {
flex-direction:row;
align-items:center;
justify-items:center;
justify-content:space-between;
margin:2px 5px;
top:2px }

.logo {
z-index:2}

.logo img {
width: 100px; }

label {
margin-top:10px;
color:red;
right:0;
width:50px}

nav {
position:relative;
margin-top:0;
margin-right:60px;
width:clamp(40px,8vw,400px);
z-index:10}

nav li:hover {
transform:scale(1);
color:#fff;
background-color:rgba(0,0,0,.1)}

nav a {
font-size:small;
color:var(--maroon);
margin-left:10px}

nav a:hover {
color:var(--gold)}

#toggle:checked~nav {
display:block}

.menu-btn {
margin-right:20px;
flex-direction:column;
justify-content:center;
align-items:center;
width:10px;
height:2px;
cursor:pointer;
transition:.5s ease-in-out}

.burger,.burger::after,.burger::before {
position:absolute;
width:15px;
height:2px;
border-radius:1px;
transition:.5s ease-in-out}

.burger {
color:#fff;
background-color:var(--maroon);
margin-bottom:15px}

.abt_grid,.contacts_grid,.services_grid {
grid-template-columns:1fr;
width:100%;
row-gap:0;
height:auto;
display:grid}

.burger::after,.burger::before {
content:'';
color:#000;
background-color:red;
background-color:var(--maroon)}

.burger::before {
transform:translateY(-5px)}

.burger::after {
transform:translateY(5px)}

.menu-btn.open .burger {
transform:translateX(-50px);
background:0 0;
margin-top:20px}

.menu-btn.open .burger::before {
transform:rotate(45deg) translate(35px,-35px)}

.menu-btn.open .burger::after {
transform:rotate(-45deg) translate(35px,35px)}

.abt_grid {
grid-template-rows:repeat(8,auto);
grid-template-areas:"zz" "z" "a" "b" "c" "d"}

.abt_seg_left {
display:grid;
grid-area:a}

.abt_seg_right {
display:grid;
grid-area:b}

.visio_left {
display:grid;
background-color: var(--apple);
grid-area:c}

.visio_right {
display:grid;
grid-area:d}

.missio_left {
display:grid;
grid-area:e}

.missio_right {
display:grid;
grid-area:f}

.valu_left {
display:grid;
grid-area:g}

.valu_right {
display:grid;
grid-area:h}

.missio_left img,.valu_right img {
width:100%;
height:100%;
object-fit:cover}

.visio_right img {
    width: 80%;
}

.services_grid {
grid-template-rows:repeat(12,auto);
grid-template-areas:"boo" "bob" "bo1" "bo2" "bo3" "bo4" "bo6" "bo5" "bo7" "bo8" "bo0" "bo9"}

.desktop_left {
display:grid;
grid-area:boo}

.desktop_right {
display:grid;
grid-area:bob}

.contacts_grid {
grid-template-rows:repeat(4,auto);
grid-template-areas:"xa" "xx" "zz" "za"}

.address_right {
border-bottom:.1px solid wheat}

.software_left {
display:grid;
grid-area:bo2}

.software_right {
display:grid;
grid-area:bo1}
}


/* FORM FOR CONTACT US */

.fomu_fomu {
    display: flex;
    flex-direction: column;
}
.inner_form {
    border-radius: 20px;
    width: auto;
}

.inner_form input {
    width: 100%;
    margin: 5px;
    height: 15px;
    padding: 10px;
    border-radius: 10px;
}

.andiko textarea {
    width: 100%;
    margin: 5px;
    height: 105px;
    padding: 10px;
    border-radius: 10px;
}

@media all and (min-width: 575.98px) {
    .collar {display:flex;}
    .down_collar {display: flex;}
}

@media all and (max-width: 575.98px) {
    .collar, .collar_down {display:none;}
    .down_collar, .collar_down {display: none;}
}