@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box;}
body { font-family: 'Poppins', sans-serif; }
h1 { font-size: 45px; font-weight: 300; line-height: 65px; }
h2 { font-size: 45px; font-weight: 500; }
h3 { font-size: 30px; font-weight: 500; }
h4 { font-size: 18px; font-weight: 400; }
p { font-size: 16px; font-weight: 300; margin-top: 10px; }
.button { margin-top: 30px; display: block; float: left; padding: 15px 25px; text-decoration: none; font-weight: 500; font-size: 18px; }
.button-row { display: flex; width: 100%; justify-content: center; }
.sub-title { width: 50%; margin-top: 0px; padding-top: 10px; }
.button.active{ border-radius: 50px; transition: 0.2s; }
.container { width: 1622px; margin: auto; position: relative; }
.row { width: 100%; margin-top: 90px; overflow: hidden; }
.center-flex { display: flex; justify-content:center; }
.center { text-align: center; }
.bold { font-weight: 700; }
.animate i, .animate2 i, .animate3 i { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; margin-left: 5px; }

header { background-image:url('../img/header-background.webp'); background-repeat: no-repeat; background-size: 100% 100%; background-position: top center; width: 100%; height: 990px; padding-top: 50px; color: white; }
header .container.top { display: flex; align-items: center; justify-content: space-between; }
header .button-row { justify-content: left; }
.logo img { width: 300px; }
nav { font-size: 18px; }
.trigger-b { display: none; }
.trigger { font-size: 50px; }
nav ul { list-style-type: none; }
nav ul a { position: relative; text-decoration: none; color: white; }
nav ul a:hover, nav ul a:active { color: white; }
nav ul li { padding: 0px 25px; float: left; }
header .container.flex { display: flex; align-items: center; margin-top: 60px; }
header .column { width: 50%; }
header .column img { width: 100%; float: right; }
header h2 { font-size: 20px; font-weight: 300; margin-top: 30px; }
header .button { color: white; }
header .active { background: white; color: black; border: 1px solid white; }
header .active:hover { background: none; color: white; }
#offer { margin-top: 90px }
#offer .row.first { display: flex; justify-content: space-between; row-gap: 50px; flex-wrap: wrap; }
#offer .column { width: 31%; padding: 50px 30px; border: 1px solid #dddddd; border-radius: 40px; }
#offer .column .img-cont { width: 84px; height: 98px; margin: auto; }
.img1, .img1-hover, .img2, .img2-hover, .img3, .img3-hover, .img4, .img4-hover, .img5, .img5-hover, .img6, .img6-hover, .one, .two, .three, .four, .five, .six { transition: 0.3s; }
.img1 { background-image:url('../img/laptop-white.webp'); }
.img1-hover { background-image:url('../img/laptop-yellow.webp'); }
.img2 { background-image:url('../img/pen-white.webp'); }
.img2-hover { background-image:url('../img/pen-yellow.webp'); }
.img3 { background-image:url('../img/codding-white.webp'); }
.img3-hover { background-image:url('../img/codding-yellow.webp'); }
.img4 { background-image:url('../img/web-white.webp'); }
.img4-hover { background-image:url('../img/web-yellow.webp'); }
.img5 { background-image:url('../img/shopping-cart-white.webp'); }
.img5-hover { background-image:url('../img/shopping-cart-yellow.webp'); }
.img6 { background-image:url('../img/telephone-white.webp'); }
.img6-hover { background-image:url('../img/telephone-yellow.webp'); }
#offer .column h3 { margin-top: 20px; }
#offer .button, #about-us .button { color: black; }
#offer .button i, #about-us .button i { color: #ec6734; }
#offer .active, #about-us .active { background: #f2b232; color: white; }
#offer .active:hover, #about-us .active:hover { background: #dd9f24; }
#offer .sub-title { margin: auto; }

#about-us { padding: 90px 0px; }
#about-us .container { display: flex; align-items: center}
#about-us .column1 { width: 50%; text-align: center; }
#about-us .column1::before { content: ''; background-image:url('../img/before-about-us.png'); width: 607px; height: 605px; position: absolute; top:0px; left:-150px; z-index: 1; }
#about-us .column2 { width: 50% }
#about-us .sub-title { width: 100%; }
#about-us img { width: 70%; border-radius: 40px; position: relative; z-index: 2;}
#about-us .row { margin-top: 20px; }
#about-us .button-row { justify-content: left; }
#about-us .center-flex { justify-content:initial;}
#about-us .text { margin-top: 20px; }

#our-successes { padding: 90px 0px; }
#our-successes .row { display: flex; justify-content: space-between; flex-wrap: wrap; }
#our-successes .column { width: 23%; margin: 0px 20px 20px 0px; padding: 60px 0px; transition: 0.5s; border-radius: 80px 13px 80px 13px; }
#our-successes .column:hover { box-shadow: 10px 10px 3rem rgb(0,0,0,0.05); background: #f9f9ff; transition: 0.5s; }
#our-successes .mini-column { display: flex; justify-content: center; text-align: left; }
#our-successes .mini-column h5 { font-size: 30px; line-height: 1; color: #ec6734; }
#our-successes .mini-column p { font-size: 17px; margin: 0px; font-weight: 500; }
#our-successes .column-a { float: left; font-size: 30px; display: flex; align-items:center; justify-content: center; }
#our-successes .column-b { float: left; display: flex; flex-direction: column; justify-content: center; }
#our-successes .circle { display: flex; justify-content: center; align-items: center; width: 70px; height: 70px; border-radius: 50%; background: #f2b232; margin-right: 15px; }
#our-successes .circle i { color: white; }
#our-successes .sub-title { margin: auto; }

#opinions { background: linear-gradient(180deg, rgba(235,111,61,1) 25%, rgba(238,176,57,1) 100%); position: relative; }
#opinions .avatar { width: 100px; height: 100px; margin: auto; background-size: cover; background-position: top center; border-radius: 50%; border: 2px solid white; }
#opinions .owl-stage-outer .owl-stage .owl-item:nth-child(1) .avatar { background-image:url('../img/szymonb.jpg'); }
#opinions .owl-stage-outer .owl-stage .owl-item:nth-child(2) .avatar { background-image:url('../img/karolinas.jpg'); }
#opinions .owl-stage-outer .owl-stage .owl-item:nth-child(3) .avatar { background-image:url('../img/karolp.jpg');}

#portfolio { padding: 90px 0px 0px 0px; }
#portfolio .row { display: flex; flex-wrap: wrap; }
#portfolio .col { height: 800px; width: 33.333333333%; }
#portfolio .col a { height: 50%; width: 100%; display: block; background-size: cover; color: white; text-decoration: none;  }
#portfolio .col a .row {justify-content: center; align-items: center; flex-direction: column; margin: 0px; height: 100%; display: none; }
#portfolio .col a .row h3 { font-size: 20px; text-align: center; width: 60%; padding-bottom: 15px; }
#portfolio .col a .row .view-more { border: 2px solid white; padding: 5px 35px; font-size: 20px; border-radius: 25px; }
#portfolio .col.first a:nth-child(1) { background-image:url('../img/portfolio-karniszowe.jpg');}
#portfolio .col.first a:nth-child(2) { background-image:url('../img/portfolio-aaakonta.jpg');}
#portfolio .col.two a:nth-child(1) { background-image:url('../img/portfolio-airflavour.jpg'); }
#portfolio .col.two a:nth-child(2) { background-image:url('../img/portfolio-qatar.jpg'); }
#portfolio .col.three a { height: 100%; background-image:url('../img/portfolio-restauracja.jpg'); }
#portfolio .col a:hover { background: linear-gradient(0deg, rgba(236,103,52,1) 0%, rgba(253,198,49,1) 100%) !important; }
#portfolio .sub-title { margin: auto; }

#contact { padding: 90px 0px; }
#contact .row { display: flex; }
#contact .col { width: 33.333333333%; overflow: hidden; }
#contact i { font-size: 25px; color: white; background: #f2b232; border-radius: 50%; padding: 12px 15px; margin-bottom: 20px;}
#contact p { margin-top: 0px; }
#contact form { width: 70%; margin: auto; }
#contact form * { font-family: 'Poppins';}
#contact form .row { justify-content: space-between;}
#contact input { border: 2px solid #eceaea; border-radius: 40px; width: 49%; padding: 20px; font-size: 16px; color: #6c6c6c;}
#contact input[type="submit"] { padding: 10px 20px; width: initial; font-size: 16px; color: white; background: #f2b232; transition: 0.2s; border: none; }
#contact input[type="submit"]:hover { background: #dd9f24 }
#contact input:focus, #contact textarea:focus { border: 2px solid #f2b232; outline:none !important; }
#contact textarea { width: 100%; border: 2px solid #eceaea; border-radius: 40px; padding: 20px; font-size: 16px; margin: 20px 0px; color: #6c6c6c;}
#contact .sub-title { margin: auto; }

footer { background: #262c35; color: white; padding: 60px 0px 30px 0px; }
footer img { width: 280px; }
footer .row { display: flex; justify-content: space-between; margin-top: 0px; }
footer .col { width: 30%; display: flex; flex-direction: column; }
footer .col h4 { font-size: 25px; }
footer .col:nth-child(2) h4::after, footer .col:nth-child(3) h4::after { content:''; background:#dd9f24; width: 40px; height: 2px; margin-top: 5px; display: block; }
footer .col .info, footer .col #footer-nav { margin-top: 20px; }
footer .col .info p { margin-top: 5px; display: flex; align-items: center; }
footer .col .info i { color: black; background: #f2b232; font-size: 10px; padding: 6px; border-radius: 50%; margin-right: 10px; }
footer .col:first-child { align-items: center;  }
footer .col:first-child p { text-align: justify; margin-top: 30px;}
footer .col li { list-style-type: none; display: flex; align-items: center; margin-top: 2px; }
footer .col li a { color: white; text-decoration: none; }
footer .col li::before { content: '>'; font-size: 20px; margin-right: 5px; }
footer .row.copyright { display: block; margin-top: 30px; padding-top: 30px; text-align: center; border-top: 1px solid white; }
footer .row.copyright p { margin: 0px 20px; }
footer .row.copyright span { color: #f2b232; }

.portf-page header { background-image:url('../img/header-background.webp'); background-repeat: no-repeat; background-size: 100% 100%; background-position: top center; width: 100%; height: 390px; padding-top: 50px; color: white; }
.portf-page h1 { font-weight: 500; }
.portf-page header .column { width: 100%; text-align: center; }
#content { padding: 90px 0px; }
#content .items { display: flex; justify-content: center; }
#content .items img { border: 5px solid #e9e9e9; }
#content img { max-width: 100%; }

@media (min-width: 1200px){
     nav ul a::before { content: ""; position: absolute; display: block; width: 40%; height: 3px; bottom: -3px; left: 30%; background-color: #fff; transform: scaleX(0); transition: transform 0.3s ease; }
     nav ul a:hover::before { transform: scaleX(1); }
}

@media (max-width: 1920px)
{
     header { background-size: cover; }
}

@media screen and (max-width: 1622px)
{
	.container { width: 100%; padding: 0px 20px; }
     #about-us .column1::before { display: none;}
}

@media screen and (max-width: 1200px)
{
     nav { display: none; width: 100%; position: absolute; top: 65px; left: 0px; padding: 20px 0px; background: #202020;z-index:1; transition: 0.1s; }
     nav ul {  }
     nav ul li { float: none; padding: 15px 0px; }
     nav ul li a { font-size: 20px; color: #d9d8d8; display: block; text-align: center; }
     nav ul li a:hover { color: white; }
     .trigger-b{ display: block; z-index: 1; }
     header { background-size: cover; height: 700px; padding-top: 40px; }
     header .column { width: 100%; }
     header .column:nth-child(2) { display: none; }

     #about-us .column1 { display: none; }
     #about-us .column2 { width: 100%; }
     #about-us .column2 h4, #about-us .column2 h2, #about-us .column2 p { text-align: center; }
     #about-us .column2 .text { text-align: justify; margin-top: 40px;}
     #about-us .sub-title { margin: auto; }
     #about-us .center-flex { justify-content: center; }

     .owl-item div:not([class]) { width: auto !important; }
     .owl-item div p { padding: 0px 20px; }
}

@media screen and (max-width: 1000px)
{
     #offer .column { width: 47%; }
     .sub-title { width: 80%; }
     #our-successes .column { width: 46%; }

     #portfolio .col { width: 50%; height: 400px; }
     #portfolio .col.three { width: 100%; height: 400px; }
     #portfolio .col a .row h3 { width: 90%; font-size: 18px; }
     #portfolio .col a .row .view-more { font-size: 18px; }

     #contact form { width: 100%; }

     footer .row { flex-wrap: wrap; row-gap: 50px; }
     footer .col:first-child { width: 100%; }
     footer .col { width: 50%; }

}

@media screen and (max-width: 700px)
{
     #offer .column { width: 100%; }
     .sub-title { width: 100%; }
     #portfolio .col a .row .view-more, #portfolio .col a .row h3 { font-size: 16px; padding-bottom: 5px; }
     #contact .row .col:first-child { display: none; }
     #contact .row .col { width: 50%; }
     .portf-page header { background-size: cover; }
}

@media screen and (max-width: 530px)
{
     header { height: 800px; }
     .logo img, footer img { width: 250px; }
     h1 { font-size: 35px; line-height: 50px; }
     h2 { font-size: 30px; }
     h3 { font-size: 25px; }
     .trigger { font-size: 40px; }
     .button-row { flex-direction: column-reverse; }
     .button-row .button { margin-top: 10px; text-align: center; }
     #our-successes .column { width: 100%; }
}

@media screen and (max-width: 400px)
{
     #contact .row .col { width: 100%; }
     #contact .row { flex-wrap:wrap; row-gap: 50px; }

     footer .row .col { width: 100%; }
}

@media screen and (max-width: 350px)
{
     nav { width: 100%; }
     .logo img, footer img { width: 220px }
     #portfolio .col a .row .view-more, #portfolio .col a .row h3 { font-size: 14px; }
}