contact.css

*{
    font-family: 'Titillium Web', sans-serif;
  }

header div.menu-button {
  display: none;
}
#banner{
  background-image: url("https://raw.githubusercontent.com/Vidushi-Gupta/Actif-age/main/Assets/contact%20us.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 450px;
    width:auto;
}

header {
  width: 100%;
  height: 60px;
  padding: 2rem 0;
}
.contact-content{
  color: #1e3859;
  font-size: 1.5rem;
  margin-left: 56%;
}
.contact-content1{
  color: #1e3859;
  font-size: 1.5rem;
  margin-left: 77%;
  margin-top: -1.8%;
}

header h1.logo {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e3859;
  float: left;
  margin:0;
}

header nav {
  float: right;
  margin:0;
}

header nav a {
  text-decoration: none;
  color: #1e3859;
  font-weight: 700;
  margin-left: 2rem;
}

#menu {
display: none;
}

  .wrapper {
    width: 1300px;
    max-width: 90%;
    margin: 0 auto;
  }
  .mb-4{
    align-self: left;
    font-size: 3rem;
    margin-top: 2rem;;
    color: #1e3859;
    margin-bottom: 3rem;
  }
  .social-icons .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    width: 3rem;
    background-color: #1e3859;
    color: #fff;
    border-radius: 50%;
    font-size: 1.5rem;
    margin-right: 1.5rem;
  }
  .map {
    position: absolute;
    margin-left: 10%;
    margin-top: -55vh;
 }
 @media (max-width: 700px) {
  .map {
    margin-top: 5vh;
    margin-left: 5%;
    height: 20vh;
    width: 10vw;
  }
  .contact-img{
    display: none;
  }
}
  .social-icons .social-icon:last-child {
    margin-right: 0;
  }
  .social-icons .social-icon:hover {
    background-color: #bbddf2;
  }
  /* - - - - - HEADER STYLES - - - - - */
.resume-section{
  margin-top: 24%;
}
  header div.menu-button {
    display: none;
  }

  header {
    width: 100%;
    height: 60px;
    padding: 2rem 0;
  }

  header h1.logo {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e3859;
    float: left;
    margin:0;
  }

  header nav {
    float: right;
    margin:0;
  }

  header nav a {
    text-decoration: none;
    color: #1e3859;
    font-weight: 700;
    margin-left: 2rem;
  }

#menu {
  display: none;
}


/*  */

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
img {
max-width: 100%;
height: auto;
}


.sec-title-style1 {
position: relative;
display: block;
margin-top: -9px;
padding-bottom: 50px;
}
.sec-title-style1.max-width{
position: relative;
display: block;
max-width: 770px;
margin: -9px auto 0;
padding-bottom: 52px;    
}
.sec-title-style1.pabottom50 {
padding-bottom: 42px;
}
.sec-title-style1 .title {
position: relative;
display: block;
color: #131313;
font-size: 36px;
line-height: 46px;
font-weight: 700;
text-transform: uppercase;
}
.sec-title-style1 .title.clr-white{
color: #ffffff;
}
.sec-title-style1 .decor {
position: relative;
display: block;
width: 70px;
height: 5px;
margin: 19px 0 0;
}
.sec-title-style1 .decor:before{
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 5px;
height: 5px;
background: #FFA500;
border-radius: 50%;
content: "";
}
.sec-title-style1 .decor:after{
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 5px;
height: 5px;
background: #FFA500;
border-radius: 50%;
content: "";
}
.sec-title-style1 .decor span {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50px;
height: 1px;
background: #FFA500;
margin: 2px 0;
}


.sec-title-style1 .text{
position: relative;
display: block;
margin: 7px 0 0;
}
.sec-title-style1 .text p{
position: relative;
display: inline-block;
padding: 0 15px;
color: #131313;
font-size: 14px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
margin: 0;
}
.sec-title-style1 .text.clr-yellow p{
color: #FFA500;
}
.sec-title-style1 .text .decor-left{
position: relative;
top: -2px;
display: inline-block;
width: 70px;
height: 5px;
background: transparent;
}
.sec-title-style1 .text .decor-left span {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50px;
height: 1px;
background: #FFA500;
content: "";
margin: 2px 0;
}
.sec-title-style1 .text .decor-left:before{
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 5px;
height: 5px;
background: #FFA500;
border-radius: 50%;
content: "";
}
.sec-title-style1 .text .decor-left:after{
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 5px;
height: 5px;
background: #FFA500;
border-radius: 50%;
content: "";
}

.sec-title-style1 .text .decor-right{
position: relative;
top: -2px;
display: inline-block;
width: 70px;
height: 5px;
background: transparent;
}
.sec-title-style1 .text .decor-right span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50px;
height: 1px;
background: #FFA500;
content: "";
margin: 2px 0;
}
.sec-title-style1 .text .decor-right:before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 5px;
height: 5px;
background: #FFA500;
border-radius: 50%;
content: "";
}
.sec-title-style1 .text .decor-right:after{
position: absolute;
top: 0;
left: 10px;
bottom: 0;
width: 5px;
height: 5px;
background: #FFA500;
border-radius: 50%;
content: "";
}

.sec-title-style1 .bottom-text{
position: relative;
display: block;
padding-top: 16px;
}
.sec-title-style1 .bottom-text p{
color: #848484;
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin: 0;
}
.sec-title-style1 .bottom-text.clr-gray p{
color: #cdcdcd;    
}
.contact-address-area{
position: relative;
display: block;
background: #ffffff;
padding: 100px 0 120px;
}
.contact-address-area .sec-title-style1.max-width {
padding-bottom: 72px;
}
.contact-address-box{
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
align-items: center;    
}
.single-contact-address-box {
position: relative;
display: block;
background: #131313;
padding: 85px 30px 77px;
}
.single-contact-address-box .icon-holder{
position: relative;
display: block;
padding-bottom: 24px;
}
.single-contact-address-box .icon-holder span:before{
font-size: 75px;
}
.single-contact-address-box h3{
color: #ffffff;
margin: 0px 0 9px;
}
.single-contact-address-box h2{
color: #FFA500;
font-size: 24px;
font-weight: 600;
margin: 0 0 19px;
}
.single-contact-address-box a{
color: #ffffff;
}

.single-contact-address-box.main-branch {
background: #FFA500;
padding: 53px 30px 51px;
margin-top: -20px;
margin-bottom: -20px;
}
.single-contact-address-box.main-branch h3{
color: #131313;
font-size: 18px;
font-weight: 700;
margin: 0 0 38px;
text-transform: uppercase;
text-align: center;
}
.single-contact-address-box.main-branch .inner{
position: relative;
display: block;

}
.single-contact-address-box.main-branch .inner ul{
position: relative;
display: block;
overflow: hidden;
}
.single-contact-address-box.main-branch .inner ul li{
position: relative;
display: block;
padding-left: 110px;
border-bottom: 1px solid #737373;
padding-bottom: 23px;
margin-bottom: 24px;
}
.single-contact-address-box.main-branch .inner ul li:last-child{
border: none;
margin-bottom: 0;
padding-bottom: 0;
}
.single-contact-address-box.main-branch .inner ul li .title{
position: absolute;
top: 2px;
left: 0;
display: inline-block;
}
.single-contact-address-box.main-branch .inner ul li .title h4{
color: #131313;
font-size: 18px;
font-weight: 600;
line-height: 24px;
text-transform: capitalize;
border-bottom: 2px solid #a5821e;
}

.single-contact-address-box.main-branch .inner ul li .text{
position: relative;
display: block;
}
.single-contact-address-box.main-branch .inner ul li .text p{
color: #131313;
font-size: 16px;
line-height: 24px;
font-weight: 600;
margin: 0;
}

.contact-info-area {
position: relative;
display: block;
background: #ffffff;
}
.contact-form {
position: relative;
display: block;
background: #ffffff;
padding: 100px 60px 80px;
-webkit-box-shadow: 0px 3px 8px 2px #ededed; 
box-shadow: 0px 3px 8px 2px #ededed;
z-index: 3;
}
.contact-form .sec-title-style1{
position: relative;
display: block;
padding-bottom: 51px;
width: 50%;
}
.contact-form .text-box{
position: relative;
display: block;
margin-top: 19px;
width: 50%;    
}
.contact-form .text p{
color: #848484;
line-height: 26px;
margin: 0;
}

.contact-form .inner-box{
position: relative;
display: block;
background: #ffffff;
}
.contact-form form{
position: relative;
display: block;
}
.contact-form form .input-box{
position: relative;
display: block;
}

.contact-form form input[type="text"],
.contact-form form input[type="email"],
.contact-form form textarea{
position: relative;
display: block;   
background: #ffffff;
border: 1px solid #eeeeee;
width: 100%;
height: 55px;
font-size: 16px;
padding-left: 19px;
padding-right: 15px;
border-radius: 0px;
margin-bottom: 20px;
transition: all 500ms ease;
}
.contact-form form textarea {
height: 130px;
padding-left: 19px;
padding-right: 15px;
padding-top: 14px;
padding-bottom: 15px;
}
.contact-form form input[type="text"]:focus{
color: #222222;
border-color: #d4d4d4; 
}
.contact-form form input[type="email"]:focus{
color: #222222;
border-color: #d4d4d4;
}
.contact-form form textarea:focus{
color: #222222;
border-color: #d4d4d4;
}
.contact-form form input[type="text"]::-webkit-input-placeholder {
color: #848484;
}
.contact-form form input[type="text"]:-moz-placeholder {
color: #848484;
}
.contact-form form input[type="text"]::-moz-placeholder {
color: #848484;
}
.contact-form form input[type="text"]:-ms-input-placeholder {
color: #848484;
}
.contact-form form input[type="email"]::-webkit-input-placeholder {
color: #848484;
}
.contact-form form input[type="email"]:-moz-placeholder {
color: #848484;
}
.contact-form form input[type="email"]::-moz-placeholder {
color: #848484;
}
.contact-form form input[type="email"]:-ms-input-placeholder {
color: #848484;
}
.contact-form form button {
position: relative;
display: block;
width: 100%;
background: #FFA500;
border: 1px solid #FFA500;
color: #131313;
font-size: 16px;
line-height: 55px;
font-weight: 600;
text-align: center;
text-transform: capitalize;
transition: all 200ms linear;
transition-delay: 0.1s;
cursor: pointer;
}

.contact-form form button:hover{
color: #ffffff;
background: #131313;
}
 
.contact-img{
  width: auto;
  height: 60vh;
  margin-top: -55vh;
  margin-left: 50%;
}
footer p{
  text-align: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e3859;
}

footer a {
  text-decoration: none;
  color: #1e3859;
}

*{
  font-family: 'Titillium Web', sans-serif;
}

.info{
  font-size: 1.5rem;
  padding:5%;
  color:#1e3859;
  margin-left: 45%;
  margin-top: 2%;

}

li{
  margin-bottom: 20px;
}