*, ::after, ::before {
    box-sizing: border-box;


}

:root {
    --px1: clamp(0px, 0.06vw, 1px);
    --px5: clamp(0px, 0.32vw, 5px);
    --px7: clamp(0px, 0.44vw, 7px);
    --px8: clamp(0px, 0.51vw, 8px);
    --px10: clamp(0px, 0.63vw, 10px);
    --px15: clamp(0px, 0.95vw, 15px);
    --px18: clamp(0px, 1.14vw, 18px);
    --px20: clamp(0px, 1.27vw, 20px);
    --px25: clamp(0px, 1.58vw, 25px);
    --px40: clamp(0px, 2.53vw, 40px);
    --px80: clamp(0px, 5.06vw, 80px);
    --px600: clamp(0px, 37.97vw, 600px);
}


body {
    margin: 0;
    padding: 0;
      font-family: "Montserrat", sans-serif;


}

h1, p , ul, a {
     font-family: "Montserrat", sans-serif;
}

main  {
    height: 100svh;
    display: flex;
    align-items: center;
}

.hero-cont  {
    max-width: 1400px;
    padding: 0 var(--px80);
    margin:  0 auto;
    width: 100%;
    text-align: center;
}

ul {
    justify-content: center;
}
.desg-ul  {
    display: flex;
    margin: 0;
    padding: 0;
    gap: var(--px10)

}



.hero-cont h1  {
    font-size: var(--px80);
    font-weight: 800;
    margin: 0;
   margin-bottom: var(--px25);
   line-height: 1;
}
.desg-ul  li {
    list-style: none;
    margin: 0;
}
.desg-ul  li a {
   border: solid 1px rgba(0,0,0,0.15);
   padding: var(--px8) var(--px15);
   display: flex;
   border-radius: 100px;
   font-weight: 600;
   display: flex;
   align-items: center;
   color: #000 !important;
   font-size: var(--px15);
   text-decoration: none !important
}

.desg-ul  li img {
    height: var(--px15);
    margin-left: var(--px7);
}

.desg-ul  li:last-child img {
    height: var(--px18);
    position: relative;
    top: var(--px1);

}

.soc-ul  {
  list-style: none;
  margin: 0 ;
  display: flex;
  padding: 0;
  flex-wrap: wrap;
  gap: var(--px18)
}

.soc-ul li a  {
  border-bottom: solid 1px;
  font-size: var(--px15);
  color: #000 !important;
  text-decoration: none !important;
  font-size: var(--px18);
  font-weight: 500;
  display: block;
  padding-bottom: var(--px5);
}
.soc-ul li a::after {
    content: "";
    width: var(--px10);
    height: var(--px10);
    background-image: url(./images/arrow.svg);
    background-repeat: no-repeat;
    
    display: inline-block;
    margin-left: var(--px5);
}
.hero-cont  p  {
    margin: var(--px40) 0;
    font-size: var(--px18);
    font-weight: 500;
    margin-bottom: var(--px20);
    max-width: var(--px600);
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}
.hero-cont  p  a  {
    text-decoration: none !important;
    color: #000 !important;
    border-bottom: solid 1px ;

}

.desg-ul  {
    flex-wrap: wrap;
   
}


@media (max-width: 768px) {

.hero-cont {
    width: 80%;
    padding: 0;
}


.hero-cont h1  {
    font-size: 40px;
    margin-bottom: 20px ;
}

.desg-ul li  a {
    padding: 5px 10px;
    font-size: 12px;
  
    
}
.desg-ul {
    gap: 10px
}
.desg-ul li img  {
    height: 10px;
    margin-left: 5px;
}
.desg-ul li:last-child img {
    height: 13px;
}

.hero-cont p  {
    margin: 30px auto;
    margin-bottom: 15px;
    font-size: 15px;
    max-width: 500px;
    line-height: 1.6;
}

.soc-ul li a  {
    font-size: 14px;
   
}
.soc-ul  {
    gap: 15px
}

.soc-ul li a::after  {
    width: 10px;
    height: 8px;
    margin-left: 5px;
}

.desg-ul li:last-child img  {
    top: 1px;
}
}

@media (max-width: 600px) { 

.hero-cont  {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;

}
.hero-cont p {
    max-width: 280px;
}
.hero-cont h1  {
    font-size: 32px;
    margin-bottom: 16px;
}


.soc-ul  {
    gap: 12px  18px
}
.soc-ul li a {
    padding-bottom: 3px;
}


.desg-ul  {
    gap: 8px;
   
}
.desg-ul li {
    margin-right: 0;
}
ul {
    justify-content: center;
}
.hero-cont p   a {
    padding-bottom: 2px;
}

}