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

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

body{background-color: #211715; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; font-family: 'Roboto', sans-serif;}

#wrapper .container{display: flex; justify-content: center; flex-wrap: wrap; position: relative; width: 1320px;
    max-width: 100%;
    overflow: hidden;
    height: 80vh;}
#wrapper .container::before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background-image: url('../images/shpape.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;}
a{display: inline-block;}

#wrapper .container .column.first{position: relative;}
#wrapper .container .column{width: 48%;}

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

.pic{position: relative; top: 0; transition: all .3s linear;}

.pic:hover{top: -10px;}

.logo-wrap{display: flex; height: 100%; flex-direction: column; justify-content: space-between; position: absolute; inset: 0; z-index: 1; color: #fff; padding: 2rem;}

.pic-outer{position: relative; padding-top: 100%; height: 100%;}
.pic-outer img{position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.bg-gradient{background: linear-gradient(45deg,  #0a98e2 0%,#a83099 51%,#f58825 100%) !important; }

.content{color: #fff; padding: 3rem; position: relative; z-index: 1;  height: 100%; display: flex; flex-direction: column;}

.content-top{position: relative; z-index: 2;}

.column h1{ font-size: 60px; font-weight: normal; line-height: normal; }

.content .sub-text{text-transform: uppercase; font-weight: 700; font-size: 24px; letter-spacing: 0.05em; margin-bottom: 3rem;}

.content .address{}
.content .address .icon-wrap{display: flex; align-items: center; gap: 1.5rem;}
.content .address .icon{display: flex; align-items: center; gap: 0.5rem;}
.content .address .icon img{filter: brightness(0) saturate(100%) invert(100%); max-width: 24px;}

a:focus, a:active, a:hover{outline: none;}
.content .address p{margin-bottom: 1rem; }

.content .address a{color: #fff; text-decoration: none;}

.content .address a:hover{text-decoration: underline;}

.content .footer{  margin-top: auto;}
.content .content-top h2{margin-bottom: 0.5rem;}

#wrapper .container .last{order: 2;}



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

    .pic{max-width: 400px; margin: 0 auto;}

    #wrapper .container{flex-wrap: nowrap;}

    

}



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

    .pic{max-width: 300px; display: block; margin: 0 auto;}

    #wrapper .container .last{order: inherit;}

    #wrapper .container .column{width: 48%;}

    .content{padding: 20px;}

    #wrapper .container .column:last-child{width: 100%;}

}



@media only screen and (max-width: 1024px) {
    body{align-items: center;}
    .pic{max-width: 80%;}
    #wrapper .container .column.first{width: 100%;}
    #wrapper .container .column.first{display2: none;}
    #wrapper .container{height: calc(100% - 2rem); width: calc(100% - 2rem); max-width: 100%; margin: 1rem;}
    #wrapper .container::before{display: none;}
}

@media only screen and (max-width: 767px) {
    
    .content .address .icon img { max-width: 20px;}
    .content .address .icon{gap: 0.5rem;}
    .column h1{margin: 0 0 3rem 0;}
}