@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

html{
    font-family: 'Inter', sans-serif;
}

.h2, .h3, .as-fifth-div4 h1, .team-content h1, 
.ow-envi-immersive h1, .ow-all-in-details h1{
    font-family: "Roboto", sans-serif;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

p {
    color: var(--textGray);
    opacity: 0.8;
}

h1 {
    color: var(--textGray);
    font-weight: 600;
}

h3 {
    color: var(--textLGray);
    font-weight: 500;
}

/* PICTURES */

.ow-beach-shop-piltover{
    display:flex;
    max-width: 86rem;
    margin:auto;
    align-items: center;
    padding-top: 2rem;
}

.ow-shop{
    display:flex;
    max-width: 64rem;
    margin:auto;
    align-items: center;
    padding-top: 2rem;
}


.ow-two-women{
    display:flex;
    width: 100%;
    max-width: 64rem;
    margin: auto;
    padding: 3rem 0 1.5rem;
}

.ow-wizard-pic, .ow-wizard-pic1{
    max-width: 49%;
    display: inline;
}

.ow-wizard-div{
    max-width: 64rem;
    width: 100%;
    display: flex;
    justify-content: center;
    margin: auto;
    padding-bottom: 2rem;
    color: var(--textLGray);
    gap: 1.5rem;
}


.ow-first-section{
    max-width: 60rem;
    margin:auto;
    padding: 0rem 2rem 0rem;
}

.ow-our-work{
    margin: 0; 
    padding: 3rem 0rem 0.5rem;
    letter-spacing: 0.15rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #4C4E58;
    
}

.h3{
    margin: 0;
    font-size: 4rem;
    font-weight:500;
    line-height: 118%;
}

.h2{
    margin: 0;
    font-size: 3rem;
    font-weight: 500;
    line-height: 116%;
}

.ow-second-fourth-section{
    max-width: 62rem;
    margin:auto;
    padding: 2rem 2rem 2rem;
    color:var( --textGray);
}

.ow-envi-immersive{
    display:flex;
    margin:auto;
    max-width: 48rem;
    justify-content: space-between;
    flex-direction: row-reverse;
    color: var(--textGray);
}

.ow-all-in-details{
    display:grid;
    margin:auto;
    align-items: center;
    max-width: 32rem;
    padding: 2rem;
}

/* first part */

.ow-envi-immersive h1{
    font-size: 2rem;
}

.grdnt-border{
    width: 3rem;
    margin-top: 3rem;
    border-width: 2rem;
    border-image: linear-gradient(to right, #F058EA, #FFAD09) 1;
    border-bottom-style: solid;
    border-bottom-width: 0.25rem;
}

.environment-drop a{ color:rgba(76, 78, 88, 0.8); }
.environment-drop ul{
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
} 

.environment{
    width: 10rem;
    margin-bottom: 1.5rem;
    color:rgba(76, 78, 88, 0.7);
    font-weight: 700;
    letter-spacing: 0.1rem;
}

/* third part */

.bring-to-life{
    max-width: 25rem;
    flex-direction: column;
}

.bringing-to-life{
    color: var(--textGray);
    letter-spacing: .25em;
}

/* fourth part */

.ow-previous-next{
    color:var( --secondaryYellow);
    display:flex;
    padding: 0 2rem 0;
    justify-content: center;
    margin-top: 3rem;
    border-color: #E5E7EB;
    border-style: solid;
    border-width: 0.15rem;  
    border-left: none;
    border-right: none;
}

.ow-previous{
    width: 38rem;
    display: flex;
    padding: 2rem 1rem 2rem;
    align-items: center; 
    border-color: #E5E7EB;
    border-right-style: solid;
    border-right-width: 0.15rem;  
}

.ow-next{
    width: 38rem;
    display: flex;
    padding: 2rem 1rem 2rem;
    align-items: center;
    justify-content:flex-end;
}

.ow-a{ color:var( --secondaryYellow); }
.ow-a:active { color:var( --mainDBlue); }

/* MEDIA QUERYY */

@media (max-width: 85rem){
    .ow-beach-shop-piltover{ width: 100%; }
    .ow-next, .ow-previous{ width: 95%; }
    .ow-a{ width: 100%; }
}
    
@media (max-width: 64rem){
    .ow-beach-shop-piltover{
        object-fit: cover;
        height: 50vw;
    }
    .ow-wizard-div{ gap: 2vw; }
}

@media (max-width: 62rem){
    .ow-envi-immersive{ display:block; }
}

/* Media query for phones */
@media (max-width: 48rem) {
    .environmental_Art { font-size: 2rem; }
    .ow-first-section h1{ font-size: 8vw; }
    .ow-next{ width: 98%; }
    .remove-prev{ width: 0%; }
}

@media (max-width: 27rem){
   .ow-first-section h1{ font-size: 10vw; }
   .ow-first-section p, .ow-envi-immersive p, 
   .ow-all-in-details p, .bring-to-life, .environment-drop ul a{ font-size: 4.5vw; }
   .environment-drop h3, .bringing-to-life{ font-size: 4.2vw; }
   .ow-next div h1, .ow-next i{ font-size: 8vw;}
   .ow-next div h3{ font-size: 6vw;}
   .ow-shop, .ow-two-women{
        object-fit: cover;
        height: 100vw;
    }
   .ow-wizard-pic, .ow-wizard-pic1{
        object-fit: cover;
        max-width: 40%;
    }
   .mw-margin-left h1, .ow-all-in-details h1{ font-size: 8vw; }
   .grdnt-border{ width: 10vw;}
}

/* about us page */

/* first-section */

.as-first-section{
    max-width: 100rem;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    margin: auto;
    padding: 0rem 2rem 0rem;
}

.as-first{
    max-width: 32rem;
    font-weight: lighter;
    padding-top: 3rem;
}

.as-WePride {
    max-width: 26rem;
    font-size: 1.125rem;
    font-weight:400;
    line-height: 1.5;
    color: var(--textWhite);
    margin: 1.5rem 0rem 0rem;
}

.as-OurMission {
    max-width: 26.2rem;
    font-size: 1rem;
    font-weight:400;
    line-height: 1.5;
    color: rgba(255,255,255,0.8);
    margin: 0.5rem 0rem 1.5rem;
}

.as-first-div{
    width: 52%;
    max-height: fit-content;
    display: flex;
    justify-content:flex-end;
}

/* second-section */

.as-second-section{
    max-width: 100rem;
    display: flex;
    align-items: center;
    margin: auto;
    padding: 0rem 2rem 0rem;
}

.as-second-div{
    width: 52%;
    display: flex;
    margin: 2rem 0 2rem;
}

.as-second{
    max-width: 27.5rem;
    display: flex;
    flex-direction: column-reverse;
    height: 40rem;
    line-height: 3rem;
    font-weight: lighter;
}

/* third-section */

.as-third-section{
    max-width: 78.2rem;
    display: flex;
    flex-direction: row;
    margin: auto;
    padding: 4rem 2rem 4rem;
    border-spacing: 1rem;
    gap: 1.5rem;
}

.as-third-div{
    background-color: var(--divBlue);
    width: 33%;
    display:inline-block;
    align-items: center;
    padding: 2rem;
    border-top-style: solid;
    border-top-width: 0.4rem;
}

.content h2{
    text-align: center;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 150%;
    color: var(--secondaryWhite);
}

.content p{
    font-size: 1rem;
    font-weight: 400;
    line-height: 162%;
    color: rgba(255,255,255,0.8);
}

.as-third-div img{
    max-height: 8rem;
}

.as-img-holder{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2.5rem 0rem 2.5rem;
}

/* fourth-section */

.as-fourth-section{
    max-width: 64rem;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 0rem 2rem 0rem;
}

.as-fourth-div{
    max-width: 50rem;
    padding: 0 0 1rem;
}

.as-fourth-div1{
    max-width: 64rem;
    display: flex;
    flex-direction: row;
    margin-bottom: 4rem;
}

.as-fourth-div1-half{
    width: 50%;
}

.as-fourth-div1-column{
    max-width: 31rem;
    padding: 0.2rem 0 0.2rem;
}

.as-fourth-div1-column p{
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--secondaryWhite);
    margin: 0.5rem 0rem 0.5rem;
}

.as-fourth-div1-column h1{
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--secondaryWhite);
}

/* fifth-section */

.as-fifth-section{
    max-width: 64rem;
    display: flex;
    flex-direction: row-reverse;
    margin: auto;
    padding: 4rem 0 2rem;
}

.as-fifth-div-bg{
    background-color: var(--textWhite);
    width: 100%;
    padding: 5rem 0 5rem;
}

.as-fifth-div{
    max-width: 35rem;
}

.as-fifth-div1{
    max-width: 42.5rem;
    display: flex;
    flex-direction: column;
}

.as-fifth-div2{
    display: flex;
}

.as-fifth-div3{
    width: 50%;
    max-width: 24rem;
    padding: 0 1rem 0;
}

.as-fifth-div3 p, .as-fifth-div4 p{
    font-size: 1rem;
}

.as-fifth-div3 h1{
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(76, 78, 88,0.7);
}

.as-fifth-div4{
    max-width: 38rem;
    padding: 0 1rem 0;
}

.as-fifth-div4 h1{
    font-size: 2rem;
    font-weight: 600;
}

.as-fifth-div5{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0rem 0rem 2rem;
}


/* Partner With Us */

.as-partner-us{
    background-color: var(--textWhite);
    display:flex;
    padding: 0 2rem 2rem;
    justify-content: center;
    border-color: #E5E7EB;
    border-style: solid;
    border-width: 0.15rem;  
    border-left: none;
    border-right: none;
}

.as-previous{
    width: 64rem;
    display: flex;
    padding: 2rem 1rem 2rem;
    align-items: center; 
}

.as-pws h1{
    font-size: 2rem;
    font-weight: 500;
    margin: 0 0 2rem;
    color: var(--secondaryWhite);
}

/* for img */

.as-img-right-left{
    max-width: 40rem;
}

/* collapsible */

.content {
    max-height: auto;
    overflow: visible;
    transition: max-height 0.5s ease-out;
  }
  
.collapsible {
     display: none;
  }

/* slideshow */

.as-sixth-section{
    max-width: 68rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: auto;
    padding: 2rem 0rem 2rem;
}


.list {
display: flex;
width: 52rem;
gap: 1rem;
padding: 0rem;
list-style: none;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}

.team {
flex-shrink: 0;
width: 31.9%;
height: 26rem;
background-image: linear-gradient(to bottom, rgba(26, 30, 126, 0) 25%, rgba(26, 30, 126, 0.8) 75%, rgb(26, 30, 126, 1) 100%),url("../images/our-team-1.png"); /* W3C */
background-size:contain;
scroll-snap-align: center;
padding: 0rem;
}

.team-content {
display: flex;
flex-direction: column-reverse;
height: 100%;
padding: 0rem 1rem 0rem;
}

.team-content p{
  font-size: 1rem;
  color: var(--textWhite);
  margin: 0rem 0rem 1.5rem;
  height: 18%;
}

.team-content h2{
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.15rem;
  margin: 0rem 0rem 0.8rem;
  color: var(--textWhite);
}

.team-content h1{
  font-size: 1.5rem;
  font-weight: 400;
  margin: 0rem;
  color: var(--textWhite);
}

.list-wrapper{
    width: 100%;
}

.list .list-wrapper{
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
}

.list::-webkit-scrollbar {
display: none;
}

.list-wrapper {
display: flex;
justify-content:center;
align-items: center;
position: relative;
}

.list.dragging{
  cursor: grab;
  scroll-behavior: smooth;
}
.list.dragging li{
  pointer-events: none;
}

.button {
display: flex;
width: 3rem;
height: 3rem;
color: #343F4F;
cursor: pointer;
font-size: 1.15rem;
text-align: center;
line-height: 44px;
background: #fff;
border-radius: 50%;
transform: translateY(-50%);
transition: transform 0.1s linear;
border: 1px solid #E9E9F3; 
}

.button--previous, .button--next {
  margin:1rem;
}


/* media */

@media (max-width: 72.75rem){
    .adjust{
        height: 6.6rem;
    }
}

@media (max-width: 82.5rem){
    
    .as-first-div, .as-second-div {
        display: none;
    }

    .as-first-section{
        max-width: 60rem;
        flex-direction: column;
        align-items:baseline;
        padding: 0rem 2.5rem 0rem;
    }
    
    .as-second-section{
        max-width: 60rem;
        flex-direction: row-reverse;
    }

    .as-third-section{
        max-width: 100%;
    }

}

/* media after tablet format*/
@media (max-width: 63.5rem){

    .as-third-section{
        flex-direction: column;
    }

    .as-third-div{
        width: auto;
        max-width: 100%;
        margin: 1rem;
        padding: 2rem 2rem 0rem;
    }

    .adjust{
        height: auto;
    }

    .content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
      }
      
    .collapsible {
          display: flex;
          background-color: var(--divBlue);
          color: white;
          cursor: pointer;
          margin: 2rem 0rem 0rem;
          padding: 1.2rem 0rem 1.2rem;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          border-top-style: solid;
          border-top-width: 0.05rem;
      }

    .collapsible p{
            width: 100%;
            font-size: 1.2rem;
            font-weight: 400;
            color: var(--secondaryWhite);
      }
        
    .collapsible i{
            margin: 2rem 0rem 0rem;
            color: var(--secondaryWhite);
      }

    .active, .collapsible:hover {
          background-color:  var(--divBlue);
      }
  
      .btn-text{
        color: var(--secondaryWhite);
      }
      
}

@media(max-width: 60rem){
    .button{
        visibility: hidden;
        width: 0%;
        height: 0%;
        margin: 0;
        padding: 0;
    }

    .as-sixth-section{
        width:100%;
    }

    .list-wrapper, .list{
        width:95%;
    }

    .team {
        width: 16.25rem;
    }
}

/* media after laptop format*/
@media (max-width: 48rem){

    .as-fourth-div1{
        flex-direction: column;
    }
    
    .as-fourth-div1-half{
        width: 100%;
    }
    
    .as-fourth-div1-column{
        max-width: 62rem;
    }
    
    .as-fifth-div2{
        display: block;
    }

    .as-fifth-div3{
        width: auto;
        max-width: 100%;
        padding: 0.5rem 2rem 0.5rem;
    }

    .as-fifth-div4{
        padding: 0 2rem 0;
    }

}

@media (max-width: 27rem){

    .list-wrapper, .list{
        width: 100%;
    }

    .h2, .h3{ font-size: 12vw; }

    .as-WePride, .ow-our-work, .as-fourth-div1-column p, .as-fourth-div1-column h1, 
    .as-fifth-div3 h1, .as-fifth-div4 p, .as-pws p{ font-size: 4.5vw; }

    .as-OurMission, .content p, .as-fifth-div3 p{ font-size: 4vw; }

    .collapsible p{ font-size: 4.5vw; }

    .collapsible i{ 
        font-size: 6vw;
        margin-top: 8vw;
    }
    .as-fifth-div4 h1{ 
        font-size: 6vw; 
        line-height: 9vw;
    }

    .content h2, .as-pws h1{ font-size: 6vw; }

    .as-third-div img{ 
        width: 80%; 
        max-height: max-content;
    }

    .as-pws a, .as-pws i{ font-size: 3.5vw; }

    .as-fifth-div5 h1{ 
        padding: 0 2rem 0;
        font-size: 10vw; 
    }

    .as-fifth-div5{
        display: flex;
        justify-content: left;
    }
    
    .as-sixth-section{ padding: 0; }
    .as-fifth-div-bg{ padding: 5rem 0 0; }
    .hide{ display: none; }
    .team { 
        height: 135vw;
        width: 100%;
     }
    .team p{ font-size: 4.5vw;}
    .team h2{ font-size: 4.3vw;}
    .team h1{ font-size: 7vw;}

    .button{
        width: 0rem;
        height: 0rem;
        font-size: 0rem;
    }
}

/* Contact Us */

.cs-first-section{
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    padding: 5rem 2rem 5rem;
}

.cs-first {
    width: 60rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0rem 2rem 0rem;
}

.cs-second-section{
    max-width: 60rem;
    display: flex;
    flex-direction: row;
    margin: auto;
    padding: 3rem 3rem 5rem;
}

.cs-second-div {
    width: 30%;
}

.cs-second-div div{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 2rem;
}


.cs-second-div h1{
    color:  rgba(26, 30, 126, 0.8);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    margin: 0rem 0rem 0.5rem;
}

.cs-second-div i{
    color:  rgba(26, 30, 126, 0.8);
    padding-right: 0.5rem;
}

.cs-second-div p{
    color:  rgba(76, 78, 88, 0.8);
    margin: 0;
}

.cs-second-div1 {
    width: 70%;
}

.cs-second-div1 p{
    color:  rgba(26, 30, 126, 0.5);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.cs-table {
    display: flex;
    flex-wrap: wrap;
    border-radius: 1rem;
    border: 1px solid  rgba(0, 0, 0, 0.1);
}

.upper-table {
    flex: 1;
    padding: 1.5rem 2rem 1.5rem;
    border: 1px solid  rgba(0, 0, 0, 0.1);
    width: fit-content;
    border-image-slice: 1;
    border-top: 0;
    cursor: pointer;
}

.lower-table {
    display: flex;
    flex-direction: column-reverse;
    flex: 1;
    padding: 2rem 3rem 1rem;
    flex-basis: 100%;
   
}

.lower-table h1, .upper-table h1{
    color:  rgba(58, 59, 63, 0.8);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    margin: 1rem 0rem 0rem;
}

.upper-table h1{
    color:  rgba(35, 49, 181, 0.5);
    margin: 0rem;
    padding: 0rem 0rem 0.75rem 0rem;
}

.lower-table h2{
    color: var(--textGray);
    font-size: 1rem;
    font-weight: 400;
    margin: 1rem 5rem 0rem 0rem;
}

input[type = text], textarea[type = text] {
    width: 100%;
    padding: 1rem 0rem 1rem;
    margin: 0.5rem 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid rgba(58, 59, 63, 0.2);
    outline: none;
    resize: none;
    color:  rgba(76, 78, 88, 0.5);
    font-family: 'Inter', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.075rem;
}

input[type = text]:focus, textarea[type = text]:focus{
    border-bottom: 1px solid rgba(35, 49, 181, 0.8);
}

input[ type = text ]::placeholder, textarea[type = text]::placeholder {
    color:  rgba(76, 78, 88, 0.3);
}

input[ type = text ]:focus + h1, input[ type = text ]:focus + h1.previous, textarea:focus + h1 {
    color:  rgba(35, 49, 181, 0.8);
  }
  
.send-msg{
    width:100%;
    display:flex;
    flex-direction: row-reverse;
    margin-top: 1rem;
}

.send-msg i{
    max-height: 0.5rem;
    padding-left: 0.5rem;
    font-size: 0.8rem;
}

.send-msg-btn, .see-job{
    width: 12.5rem;
    height: 35%;
    background-image: var(--mainGradient);
    display:flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    cursor: pointer;
        color:white;
        font-size: 0.8rem;
        font-weight: 600;
        text-decoration: none;
        border-radius: 0.2rem;
        letter-spacing: 0.08rem;
}

.send-msg-btn{ width: 8.5rem; }

#hide-h1-table{ display: none; }

.select-wrapper {
    display: none;
    position: relative;
    width: 100%;
  }
  
.select {
    position: relative;
    display: flex;
    flex-direction: column;
  }

.select__trigger {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.25rem;
    font-weight: 300;
    color: #3b3b3b;
    height: 4rem;
    line-height: 4rem;
    background: #ffffff;
    cursor: pointer;
}
.custom-options {
    z-index: 2;
    position: absolute;
    display: block;
    visibility: hidden;
    pointer-events: none;
    top: 100%;
    left: 0;
    right: 0;
    opacity: 0;
    background: #ffffff;
    transition: all 0.5s;
    border-top: 1px solid rgba(58, 59, 63, 0.1);
}
.select.open .custom-options {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}
.custom-option {
    position: relative;
    display: block;
    font-weight: 300;
    color: #3b3b3b;
    line-height: 4rem;
    cursor: pointer;
    transition: all 0.5s;
    border-bottom: 1px solid rgba(58, 59, 63, 0.1);
    cursor: pointer;
}

.custom-option:last-child {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

.custom-option:hover {
    cursor: pointer;
    background-color:  rgba(178, 178, 178, 0.4);
}
.custom-option.selected {
    background-color: rgba(178, 178, 178, 0.1);
}

.selected-inquiry{
    border-bottom: 1px solid  rgba(0, 0, 0, 0.1);
    border-image-source: linear-gradient(to right ,#F058EA, #FFAD09);
    border-left: none;
    border-right: none;
}

.selected-inquiry p{
    color: #1A1E7E;
}
 

@media (max-width: 63.5rem){
    .cs-first, .cs-second-div, .cs-second-div1 { width: 100%; }
    .cs-second-section {
        display:flex;
        flex-direction: column-reverse;
        padding-bottom: 2rem;
    }
    .cs-second-div{ margin-top: 3rem; }

}

@media (max-width: 45rem){
    .upper-table{ flex-basis: 100%; }
    #hide-h1-table{ display: block; }

    .upper-table{ padding: 0; }
    .upper-table h1{ padding: 1.5rem 2rem 0rem 1.5rem; }
    .upper-table p{ display: none; }
    .select-wrapper { display: block; }
    .custom-option a, .select__trigger a{ 
        padding: 0rem 1.5rem 0rem;
        color: rgba(26, 30, 126, 1);
        font-size: 1.125rem;
        font-weight: 600;
    }
    .custom-option a{
        font-size: 1rem;
        font-weight: 400;
    }
    #business-btn{
        border-color: rgba(0, 0, 0, 0.1);
    }
    .select__trigger i{ padding: 0rem 1.5rem 0rem;}
    .lower-table h2{ margin: 1rem 2rem 0rem 0rem; }
}

@media (max-width: 27rem){

    .cs-second-section { padding: 10vw;}
    .cs-first h1{ font-size: 10vw;}
    .upper-table p{ font-size: 4.5vw;}

    .lower-table{ padding: 4vw 6vw 2vw; }
    .lower-table h2{ 
        font-size: 3.5vw;
        margin: 4vw 6vw 2vw 2vw;
    }
    .cs-second-div h1{ font-size: 3.5vw; }
    .cs-second-div i, .cs-second-div p{ font-size: 4vw; }

    .cs-second-div1 h1{ font-size: 3vw; }
    input[type = text], textarea[type = text]{ font-size: 4.5vw; }

    .send-msg-btn, .see-job{ width: 80%; }
    .send-msg{
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .send-msg h4, .send-msg i{ font-size: 3vw; }

    .select__trigger a,.select__trigger i{ font-size: 4vw;}
    .custom-options a{ font-size: 3.5vw;}
}