:root {
    --black-color: #181A1A;
    --grey-color: #8A8A8A;
    --yellow-color: #FFB930;
    
}

* {
	box-sizing:border-box;
}

html,
body{
    font-family: 'Archivo', sans-serif;
    color: var(--black-color);
    margin: 0;
    padding: 0;
	font-size: 16px;
	overflow-x: hidden;
}

button,
a {
	transition: all .25s ease-in-out;
}

.page-wrapper {
	 padding-top: 5.75rem;
}
@media (max-width: 992px) {
	.page-wrapper {
		padding-top: 2rem;
	}
}

@media (max-width: 576px) {
		.page-wrapper {
		padding-top: 20px;
	}
}

.container{
    margin-left: auto;
    display:flex;
    justify-content:space-between;
    max-width: 83%;
}

@media (max-width: 1550px) {
	.container{
		max-width: 100%;
		padding-left:40px;
	}
}

@media (max-width: 576px) {
	.container{
		max-width: 100%;
		padding: 0 20px;
		display: block;
	}
}

.left-container{
	flex: 0 0 27%;
	max-width: 516px;
	position: relative;
	z-index: 1000;
    margin-right: 2rem;
	
	/* animation */
	opacity: 0;
	transform: translate(-40px, 0);
	animation: fadeInLeft 1s ease-in-out both;
}

.right-container {
	flex: 1;
}

@media (max-width: 576px) {
	.left-container{
		    margin-right: 0;
	}
}

.contact-container {
    margin-top: 2rem;
    display:flex;
    align-items: center;
}

@media (max-width: 576px) {
	.contact-container {
		margin-top: 20px;
	}
}

.contact-info{
    display:flex;
    align-items: center;
    color:var(--black-color);
    text-decoration: none;
}

.contact-info:hover {
	color: #FFB930;
}

.contact-info.mail {
	margin-right: 34px; 
}

@media (max-width: 576px) {
	.contact-info.mail {
			margin-right: 15px; 
	}
}

.logo img{
	display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 576px) {
	.logo img{
		width: 65px;
	}
}


.text{
    margin-top: 5.2rem;
    font-weight: 700;
    line-height: 44px;
    
}

.text h1{
	  font-weight: 700;
    margin:0;
    font-size:38px;
}


@media (max-width: 576px) {
	.text{
		margin-top: 2rem;
	}
	.text h1{
		font-size: 28px;
		line-height: 1.25;
	}
}

.icons{
    width: 42px;
    height: 42px;
    border-radius: 5px;
    border-top-right-radius: 15px;
    background-color: var(--yellow-color);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
}

.phone-img{
    width: 24px;
    height:24px;
}

.phone-number,.email{
    font-size: 18px;
    font-weight: normal;
    cursor: pointer;
    margin-left: 1rem;
	white-space: nowrap;
}

@media (max-width: 576px) {
	.phone-number,.email{
		font-size: 15px;
		margin-left: 8px;
	}
}

.contact-button{
    margin-top:3rem;
    width:282px;
    height:58px;
    background-color: var(--yellow-color);
    border-radius: 5px;
    border: none;
    font-size: 14px;
    font-weight:800;
    text-transform: uppercase;
    cursor: pointer;
	letter-spacing: 0.1em;
}

.contact-button:hover {
	color: #fff;
	background: #010101;
}

@media (max-width: 576px) {
	.contact-button{
		width:230px;
		height:50px;
		font-size: 13px;
		margin-top: 25px;
	}
}


.footer-text {
    margin-top: 8.75rem;
    display: flex;
}

@media (max-width: 576px) {
	.footer-text {
		margin-top:25px;
	}
}

.footer-text .text1 {
	margin-right: 46px;
}
@media (max-width: 576px) {
	.footer-text .text1 {
		margin-right: 20px;
	}
}

.text1 p,.text2 p{
    margin:0;
	line-height: 1.25;
    font-size: 14px;
    color:var(--grey-color);
}

.text1 :first-child{
    color: var(--black-color);
    font-weight: 700;
}


/*ANIMATION STARTS*/

.map {
	margin-left: auto;
    max-width: 912px;
    position: relative;
    left: 10px;
}

.map svg {
		width: 100%;
		max-width: 100%;
}

@media (max-width: 1366px) {
	.map {
		   max-width: 712px;
	}
}

@media (max-width: 992px) {
	.map {
		max-width: 912px;
		left: -55%;
		position:relative;
		top: -10vh;
	}
	
	.map svg {
		width: 155%;
		max-width: 155%;
	}
}

@media (max-width: 576px) {
	.map {
			max-width: 100%;
			left: -10px;
			position:relative;
			top: 0;
	}
	.map svg {
		width: 110%;
		max-width: 110%;
		height: auto;
	}
}

 .yellow-line,
 .line {
     animation: dash 2s ease-in-out both;
}

.line:nth-child(1) {
    stroke-dasharray: 179;
    stroke-dashoffset: 179;
    animation-delay: 0.5s;
}

.line:nth-child(2) {
    stroke-dasharray: 178;
    stroke-dashoffset: 178;
    animation-delay: 0.5s;
}

.line:nth-child(3) {
    stroke-dasharray: 178;
    stroke-dashoffset: 178;
    animation-delay: 0.5s;
}


.line:nth-child(4) {
    stroke-dasharray: 1820;
    stroke-dashoffset: 1820;
}


.line:nth-child(5) {
    stroke-dasharray: 1411;
    stroke-dashoffset: 1411;
}

.line:nth-child(6) {
    stroke-dasharray: 265;
    stroke-dashoffset: 265;
    animation-delay: 0.5s;
}

.line:nth-child(7) {
    stroke-dasharray: 149;
    stroke-dashoffset: 149;
    animation-delay: 0.5s;
}

.line:nth-child(8) {
    stroke-dasharray: 123;
    stroke-dashoffset: 123;
    animation-delay: 0.5s;
}

.line:nth-child(9) {
    stroke-dasharray: 217;
    stroke-dashoffset: 217;
    animation-delay: 0.5s;
}

.line:nth-child(10) {
    stroke-dasharray: 294;
    stroke-dashoffset: 294;
    animation-delay: 0.5s;
}

.line:nth-child(11) {
    animation-delay: 0.5s;
    stroke-dasharray: 218;
    stroke-dashoffset: 218;
}

.line:nth-child(12) {
    stroke-dasharray: 112;
    stroke-dashoffset: 112;
    animation-delay: 0.5s;
}

.yellow-line {
    stroke-dasharray: 1594;
    stroke-dashoffset: 1594;
    animation-delay: 0.5s; 
}


@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInLeft {
    to {
        transform: none;
		opacity: 1;
    }
}

/*ANIMATION ENDS*/

/*Contact form starts*/
.form-group label {
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    transition: border-color 0.2s;
}

.modal__content button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

.modal__close{
    cursor: pointer;
}

.modal label sup {
	color: red;
}

.success-msg {
    background: #187921;
    padding: 7px 10px;
    text-align: center;
    color: #fff;
}