@font-face {
    font-family: 'Druk Wide';
    src: url('fonts/DrukWide-Bold.woff2') format('woff2'),
        url('fonts/DrukWide-Bold.woff') format('woff'),
        url('fonts/DrukWide-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #000;
    font-size: 16px;
}

header {width: 100%;max-width: 1620px;display: flex;margin: 0 auto;justify-content: space-between;padding: 20px 0 23px 0;align-items: center;}

header nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 25px;
}

header nav ul li {
    display: inline;
}

header nav ul li a {
    color: #000000;
    text-decoration: none;
    font-size: 14px;
    transition: all .4s;
}

h1, h2 {
    font-family: "Poppins", sans-serif;
    font-weight: bold;
    font-style: normal;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

main {
    padding: 0;
    margin: 0; 
}
 
section#hero {
    background: #000;
    max-width: 1500px;
    border-radius: 15px;
    background-size: cover;
    min-height: 845px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 60px;
    /*
    animation: 1s fadeInDown;
    opacity: 1; 
*/
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 20px #5459ff0f;
}


/*
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
*/

header nav ul li a:hover {
    color: #5459ff;
}

.container {
    margin: 0 auto;
    max-width: 1480px;
    width: 100%;
}

section#projects {
    padding: 130px 20px;
}

h2 {
    font-size: 50px;
}

.grid .item .img {
    margin-bottom: 20px;
}


.title.info {
    font-size: 20px;
    padding-top: 0px;
    display: grid;
    padding-bottom: 140px;
    text-align: center;
    margin: 0 auto;
    max-width: 750px;
    line-height: 1.8;
}

.sides {
    display: grid;
    grid-template-columns: 1fr;
}

.projects {
    display: flex;
    gap: 45px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.projects .item {
    background: #e2e7ef5c;
    border-radius: 15px;
    padding: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 41%;
}

.projects .item img.icon {
    max-width: 100px;
}

h3 {
    font-size: 20px;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.projects .item h3 {
    max-width: 300px;
    font-family: "Poppins", sans-serif;
    "Poppins", font-family: sans-serif;
    text-align: center;
    width: 100%;
    display: table;
}

.projects .item p {
    font-size: 14px;
    color: #25282c;
    line-height: 24px;
    text-align: center;
}

a.link {
    color: #000;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    gap: 15px;
    align-items: center;
    margin-top: 20px;
    justify-content: center;
}

a.link .arr {
    width: 40px;
    height: 40px;
    border: 1px solid #5459ff;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s;
    background: #5459ff;
}

a.link:hover .arr {
    border: 1px solid #fff;
}

a.link:before {
    width: 100%;
    height: 100%;
    position: absolute;
    content: '';
    left: 0;
    top: 0;
}

img.map-img {width: 100%;}

.map {
    width: 1370px;
    margin: 0 auto;
    position: relative;
}

section#about {}

section#about .title {
    max-width: 430px;
    margin-bottom: -100px;
    position: relative;
    z-index: 2;
}

.controls {
    position: absolute;
    top: 109px;
    left: 50%;
    transform: translateX(-50%);
}

.controls > div {text-transform: capitalize;color: #2C7DF6;background: hsl(216deg 92% 57% / 10%);border-radius: 8px;padding: 3px 11px;text-align: center;display: table;position: relative;cursor: pointer;transition: all .4s;}

.controls > div:after {
    content: '';
    background: #2C7DF6;
    width: 6px;
    height: 6px;
    position: absolute;
    bottom: -20px;
    border-radius: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.controls .la {
    left: 220px;
    color: #14B153;
    background: hsl(144deg 80% 39% / 10%);
}

.controls .la:after {
    left: 0;
    background: #14B153;
}

.controls .chicago:after {
    left: 0;
    background: #FF9900;
}

.controls .chicago {
    left: 348px;
    top: 62px;
    color: #FF9900;
    background: hsl(36deg 100% 50% / 10%);
}

.controls > div:hover {
    opacity: 0.7;
}

.dots {
    position: absolute;
    top: 309px;
    left: 50%;
    transform: translateX(-50%);
}

.dots > div .round {
    background: #2c7df6;
    width: 7px;
    height: 7px;
    position: absolute;
    border-radius: 100px;
}

header a.logo {
    margin-top: 9px;
}

h1.main {
    position: relative;
    z-index: 3;
    width: 100%;
    text-align: center;
    max-width: 790px;
    margin: 0 auto;
    font-size: 55px;
    line-height: 65px;
    color: #ffffff;
    padding: 0;
}

.dots > div.st-augustine {
    top: 148px;
    left: -50px;
}

.dots > div {
    position: relative;
}

.dots >  .la {
    top: 140px;
    left: -170px;
}

.dots > .chicago {
    top: 70px;
    left: -80px;
}

.dots > div .round:before {
    position: absolute;
    content: '';
    width: 100px;
    height: 100px;
    background: #2c7df633;
    border-radius: 100px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: pulse 2s infinite 0.2s;
}

.dots > div .round:after {
    position: absolute;
    content: '';
    width: 50px;
    height: 50px;
    background: #2c7df633;
    border-radius: 100px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    animation: pulse 2s infinite ;
}

.dots > div.la .round {
    background: #14b153; 
}

.dots > .la .round:before {
    background: #14b1533b;
} 

.dots > .la .round:after {
    background: #14b15333;
}
 
.dots > div.chicago .round {
    background: #ff9900;
}

.dots > .chicago .round:before {
    background: #ff99002e;
}

.dots > .chicago .round:after {
    background: #ff990036;
}

.numbers {display: flex;width: 100%;margin: -100px 0 0 0;align-items: center;justify-content: center;gap: 140px;}

.numbers div .num {
    display: table;
    font-size: 60px;
}

.numbers div span.text {
    color: #AAAAAA;
}

section#team .title {
    text-align: center;
}

section#team {
    padding: 0 0 130px 0px;
}

section#contacts {
    background: #f5f6f9;
    padding: 130px 20px 130px 20px;
}

.grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    display: grid;
    gap: 40px;
    margin-top: 50px;
}

.grid .item {
    background: #f5f6f9;
    text-align: center;
    padding: 50px;
    border-radius: 15px;
}

section#contacts .title {
    max-width: 650px;
}

.doubled {
    display: flex;
    gap: 40px;
}

.colls {
    display: grid;
    grid-template-columns: 1.5fr 0.9fr;
    gap: 200px;
}

label {
    font-size: 14px;
    display: table;
    margin-bottom: 6px;
}

.input input, textarea#message {
    background: #ffffff;
    border: none;
    width: 100%;
    font-size: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    !importan;!importa;!import;!impor;!impo;!imp;!im;!i;!;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    color: #fff;
    transition: all .4s;
}

.form {display: flex;width: 100%;flex-direction: column;margin-top: 50px;gap: 20px;}

input::placeholder, textarea::placeholder {
    color: #667085;
}

.doubled > div {
    width: 100%;
}

input.submit {
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    font-weight: 600;
    padding: 13px 17px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all .4s;
    background: #5459ff;
    color: #fff;
}

.checkbox {
    display: flex;
    gap: 10px;
}

.checkbox input {
    margin: -7px 0 0 0;
}


input.submit:hover {
    background: #000000;
}

.info .item {
    background: #ffffff;
    border-radius: 15px;
    padding: 40px;
    position: relative;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info .item a {
    color: #5459ff;
}

.info .item .icon {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info .item a {
    font-weight: 600;
    text-decoration: none;
    transition: all .4s;
}

footer {
    text-align: center;
    padding-top: 40px;
}

footer img {
    width: 240px;
}

.footer {
    border-top: 1px solid rgb(255 255 255 / 10%);
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 40px 0;
    margin-top: 40px;
}

section#hero video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
}

ul.links {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 40px;
}

ul.links li {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.links li a {
    color: #000;
    font-size: 14px;
    text-decoration: none;
    transition: all .4s;
}

.footer p {
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: #000;
}

ul.links li a:hover {
    color: #5459ff;
}

.info .item a:hover {
    color: #000000;
}

.info .item a:before {
    position: absolute;
    left: 0;
    content: '';
    top: 0;
    width: 100%;
    height: 100%;
}

@keyframes pulse {
	0% {
		transform:  translateX(-50%) translateY(-50%) scale(1.2);
        opacity:1;
	}

	70% {
		transform:  translateX(-50%) translateY(-50%) scale(0.9);
        opacity:0.5;
	}

	100% {
		transform:  translateX(-50%) translateY(-50%) scale(1.2);
        opacity:1;
	}
}

.hamburger {
    display: none;
}

.hamburger .line{
  width: 50px;
  height: 5px;
  background-color: #000000;
  display: block;
  margin: 8px auto;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 2px;
}

.hamburger:hover{
  cursor: pointer;
}

.hamburger.is-active .line:nth-child(2){
  opacity: 0;
}

.hamburger.is-active .line:nth-child(1){
  -webkit-transform: translateY(13px) rotate(45deg);
  -ms-transform: translateY(13px) rotate(45deg);
  -o-transform: translateY(13px) rotate(45deg);
  transform: translateY(13px) rotate(45deg);
}

.hamburger.is-active .line:nth-child(3){
  -webkit-transform: translateY(-13px) rotate(-45deg);
  -ms-transform: translateY(-13px) rotate(-45deg);
  -o-transform: translateY(-13px) rotate(-45deg);
  transform: translateY(-13px) rotate(-45deg);
}

.tab-content h1 {
    font-size: 55px;
    text-transform: uppercase;
}

section#contacts.inner-page .tab-content .title {
    max-width: 100%;
    text-align: center;
    border-bottom: 1px solid #cccccc12;
    padding-bottom: 50px;
    margin-bottom: 80px;
}

.tab-content .title p {
    color: #999;
}

section#hero div {
    margin: 0 auto;
    text-align: center;
    color: #fff;
    max-width: 710px;
    font-size: 20px;
    line-height: 1.7;
    position: relative;
    z-index: 9;
}

section#contacts.inner-page {
    padding-top: 120px;
}

.tab-content {
    max-width: 860px;
    margin: 0 auto;
}

.tab-content h2 {
    font-size: 26px;
    border-top: 1px solid #cccccc12;
    padding-top: 80px;
    margin-top: 80px;
}

.tab-content h3 {
    font-size: 18px;
    text-transform: none;
    font-family: "Poppins", sans-serif;
}

.tab-content a {
    color: #999;
}

@media (max-width:1550px) {
    section#hero {
        max-width: 1300px;
        padding: 0;
        box-sizing: border-box;
        min-height: 700px;
    }
    
    header {
        max-width: 1300px;
    }
    
    .container {
        max-width: 1300px;
    }
    
    .footer {
        max-width: 1300px;
    }
}

@media (max-width:1350px) { 
    header,
    section#projects,
    .footer {padding-left: 30px;padding-right: 30px;box-sizing: border-box;}

    section#hero {
        width: calc(100% - 60px);
        background-position: center;
    }

    .projects {
        gap: 20px;
    }

    .sides {
        grid-template-columns: 45% 55%;
    }

    .projects .item {
        padding: 30px;
        width: 100%;
    }

    section#about {
        padding: 0 30px;
        overflow: hidden;
    }

    .map {left: 50%;transform: translateX(-50%);}

    section#about .container {
        overflow: hidden;
    }

    section#team {
        padding: 0 20px 70px 20px;
    }

    .grid .item {
        box-sizing: border-box;
        padding: 30px;
    }

    section#contacts {
        padding: 190px 30px 130px 30px;
    }

    .colls { 
        gap: 100px;
    }
}

@media (max-width:1024px) { 
    nav.main_navigation {
        display: none;
        position: absolute;
        width: 100%;
        left: 0;
        top: 80px;
        background: #ffffff;
        z-index: 999;
    }
    .hamburger {
        display: block;
        transform: scale(0.6) translateY(-1px);
    }
    * {
        box-sizing: border-box;
    }

    header nav ul {
        flex-direction: column;
        gap: 0;
        padding: 0 30px;
    }

    header nav ul li a {
        padding: 20px;
        display: table;
        border-bottom: 1px solid #ffffff12;
        width: 100%;
        font-size: 16px;
        text-align: center;
    }

    .sides {
        grid-template-columns: 1fr;
    }

    img.hero-title {
        display: none;
    }

    h2 {
        font-size: 34px;
    }

    .title.info {padding: 0;margin-bottom: 20px;}

    .projects {
        display: grid;
        grid-template-columns: 1fr;
    }

    .grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .colls {grid-template-columns: 1fr;}

    .info .item {
        padding: 30px;
    }

    section#contacts {
        padding: 70px 30px 100px 30px;
    }

    .numbers {flex-direction: column;gap: 10px;align-items: flex-start;justify-content: flex-start;z-index: 999999;position: absolute;left: 50%;transform: translateX(-50%);width: 320px;margin: 0;bottom: 0px;}

    section#about {
        padding: 0;
    }

    section#about .title {
        padding: 0 30px;
        margin-bottom: -10px;
    }

    .map {
        padding-bottom: 80px;
    }

    .controls .la {left: 114px;top: -6px;}

    .controls .chicago {
        left: -110px;
        top: -30px;
    }

    .controls .chicago:after {
        left: 50%;
        top: 38px;
    }

    .controls .la:after {
        top: 38px;
        left: 50%;
    }

    .doubled {
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 20px;
        margin: 0;
    }
    h1.main {
        display: block;
        text-transform: uppercase;
        max-width: 380px;
        margin: 0 auto;
        font-size: 34px;
        line-height: 44px;
    }

    section#hero {
        background: #000;
        width: 100%;
        border-radius: 0;
        min-height: 0px; 
        height: 540px;
    }

    section#projects {
        padding-top: 60px;
    }

    .projects .item h3 {
        font-size: 18px;
    }
    .tab-content h1 {
        font-size: 35px;
    }
    .tab-content h2 {
        font-size: 22px;
    }
	
	section#hero div {
	    font-size: 16px;
	    padding: 0 20px;
	}
	
	.title.info {
	    font-size: 16px;
	}
	
	footer {padding-bottom: 140px;}
	
}