@import url('https://fonts.googleapis.com/css2?

family=Poppins&display=swap');

* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
list-style: none;
text-decoration: none;
box-sizing: border-box;
}

header {
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 70px;
background-color: black;

.main-nav ul {
display: flex;
}

.logo {
display: flex;
}

.logo a {
color: white;
font-size: 24px;
margin-right: 5px;
}

.main-nav ul li {
display: flex;
cursor: pointer;
align-items: center;
padding: 10px 20px;
font: 14px;
transition: transform 0.5s ease, border-radius 0.3s ease, background-color
0.5s ease;
margin: 0 5px;
}

.left-nav {
display: flex;
 align-items: center;
}

.right-nav {
display: flex;
align-items: center;
}

.btn {
padding: 10px 12px;
border-radius: 30px;
background-color: #fff;
font-weight: bolder;
cursor: pointer;
transition: transform 0.10s;
}

.btn:hover {
transform: scale(1.1);
}

.main-nav ul li:hover {
border-radius: 30px;
background-color: #ffffff70;
}

.container {
background-color: black;
color: #fff;
}

.con {
background-color: black;
padding: 40px 30px;
display: flex;
justify-content: center;
align-items: center;
gap: 100px;

.leftside {
display: flex;
flex-direction: column;
}

.leftside h1 {
font-size: 45px;
font-weight: bold;
padding-bottom: 10px;
}

.leftside p {
font-size: 20px;
}

.leftside input {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 36px;
font-weight: bold;
padding-right: 0;
border-radius: 10px;
margin: 10px 0;
border: transparent;

.leftside-btn {
margin-top: 20px;
width: 9em;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 36px;
text-align: start;
cursor: pointer;
border-radius: 20px;
font-weight: bold;
border: transparent;

.con .rightside img {

width: 90%;
height: auto;

.info-1 {
width: 100%;
margin: 0 auto;
padding: 60px 0;
 display: flex;
justify-content: center;
align-items: center;
gap: 50px;
}

.image-field {
align-content: center;
padding: 0 10px;

.image-field img {
width: 100%;
}

.text-field {
align-content: center;
padding: 0 10px;
}

.text-field>h1 {
font-weight: bolder;
font-size: 3em;
}

.text-field-part2 {
margin-top: 15px;
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.main-body-btn {
padding: 10px;
background-color: black;
color: #fff;
border-radius: 5px;
font-size: 1.2em;
}

.text-field-part2 a {
position: relative;
text-decoration: none;
 color: black;
font-weight: lighter;
border-bottom: 3px solid rgb(235, 241, 243);

.text-field-part2 a:after {
position: absolute;
transition: all ease-in-out .2s;
background: none repeat scroll 0 0 #000000;
content: "";
display: block;
height: 3px;
width: 0;
}

.text-field-part2 a:hover:after {
width: 100%;
}

.info-2 {
display: flex;
flex-direction: row-reverse;
}

.last-page {
/* width: 100%; */
background-color: #f1efef;
display: flex;
justify-content: center;
}

.last-page-inner{
/* margin: 20px; */
padding: 50px 10px;
}

.last-page-inner h1{
padding: 20px 0;
}
.main-block{
display: flex;
gap: 20px;
margin: 0 10px;
}
.inner-block {
display: flex;
background-color: #fff;
justify-content: center;
align-items: center;
padding: 20px;
gap: 20px;
}

.inner-text{
cursor: pointer;
}

.inner-arrow{
cursor: pointer;
transition: all ease 0.2s;
}
.inner-arrow:hover{
transform: translateX(10px);
}

footer{
display: flex;
width: 100%;
color: #fff;
background-color: #000000;
}

.footer-page{
color: #fff;
background-color: #000000;
display: flex;
flex-direction: column;
margin: 0 auto;
padding: 40px;
}

.footer-page-1 p{
padding: 20px 0;
font-size: 1.5em;
}
.section-1_2 p{
position: relative;
cursor: pointer;
display: inline-block;
}

.section-1_2 p::before{
transition: width ease-in-out .5s;
content: "";
position: absolute;
width: 0;
height: 3px;
background-color: #fff;
bottom: 0;
}

.section-1_2 p:hover:before{
width: 100%;
}

.section-2{
display: flex;
gap: 100px;
flex-direction: row;
padding-top: 40px;
}
.section-2 li{
cursor: pointer;
}

.section-2 li:hover{
color: #ffffffb4;
}

.section-3{
color: #fff;
}

.icons-right{
display: flex;
justify-content: center;
}

.section-3{
width: 100%;
 display: flex;
justify-content: space-between;
margin: 40px 0;
}

.icons-left i {
gap: 20px;
padding-left: 0px;
padding-right: 20px;
cursor: pointer;
}

.icons-right{
gap: 20px;
cursor: pointer;
}

.section-4{
width: 100%;
}

.section-4 .image{
width: 160px;
display: flex;
gap: 10px;
cursor: pointer;
}

.section-5{
display: flex;
justify-content: space-between;
padding: 30px 0;
color: #AFAFAF;
font-weight: normal;
font-size: 12px;
}

.section-5-right ul{
display: flex;
flex-direction: row;
gap: 30px;
cursor: pointer;
}
.section-5-right ul li:hover{
color: #afafafa6;
}