/*    
    Template Name: Tech Startup----Hablu
    Author - Sanjida
    Description: 
    Version: 1.0

    Index
    ====
        01. Reset CSS
        02. Header Top Area
        03. Header Area
        04. Banner Area
        05. Section About Area
        06. Section Services Area
        07. Testimonial Area
        08. Pricing Area
        09. Action Area
        10. News Area
        11. Footer Area
        12. About Area
        13. About Banner Area
        14. About Area
        15. Team Area
        16. Services
        17. Services Area
        18. Contact
        19. Contact Area
        20. Map Area

*/

/* 01. Reset CSS */
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
body{
    font-family: 'Poppins', sans-serif;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
    vertical-align: middle;
}
ul{
    list-style: none;
}
.pt-80{
    padding-top: 80px;
}
.pb-80{
    padding-bottom: 80px;
}
.container{
    width: 1170px;
    margin: 0 auto;
}
.btn {
    font-size: 16px;
    color: white;
    display: inline-block;
    text-transform: capitalize;
    margin-right: 10px;
    border-radius: 5px;
    font-weight: 600; 
    transition: .7s;
}
.btn-border{
    border: 2px solid white;
    padding: 11px 25px; 
}
.btn-border:hover{
    border-color: #4d18a6;
}
.btn-bg{
    background-color: #635CDB;
    padding: 13px 25px;
}
.btn-bg:hover{
    color: #333;
    background-color: white;
}

/* 02. Header Top Area */
.header-top-area{
    padding: 15px 0;
    background: #635CDB;
}
.header-top{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
.header-top ul{
    display: flex;
    flex-flow: row wrap;
}
.header-top ul li {
    padding-right: 20px;
}
.header-top ul li a {
    color: white;
    font-size: 17px;
}
.header-top ul li a i {
    width: 26px;
    height: 20px;
    line-height: 20px;
    color: white;
    font-size: 16px;
}
.header-link{}
.header-link a {
    padding-left: 14px;
}
.header-link a i {
    color: black;
    background-color: white;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    border: 1px solid white;
    border-radius: 50%;
    transition: .7s;
}
.header-link a i:hover{
    transform: translateY(-8px);
}

/* 03. Header Area */
.header-area {
    padding: 16px 0 0;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 999;
}
.header {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0;
    align-items: center;
}
.logo{}
.logo a {
    text-transform: uppercase;
    font-size: 28px;
    font-weight: 600;
    color: white;
}
.menu{}
.menu ul{
    display: flex;
    flex-flow: row wrap;
}
.menu ul li {
    padding-left: 34px;
}
.menu ul li a {
    text-transform: capitalize;
    font-size: 16px;
    font-weight: 600;
    color: white;
    position: relative;
}
.menu ul li a::before {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 4px solid white;
    margin-top: 30px;
    visibility: hidden;
    border-radius: 3px;
    overflow: hidden;
    transition: .7s;
    transform: scaleX(0);
    transform-origin: 0 0;
}
.menu ul li a:hover::before{
    visibility: visible;
    transform: scaleX(1);
}

/* 04. Banner Area */
.banner-area{
    padding-top: 685px;
    background-position: center;
    background-size: cover;
    position: relative;
}
.banner-area::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white;
    transform: translate(0);
    z-index: 2;
    background-color: black;
    opacity: .65;
}
.banner {
    position: absolute;
    margin-top: -450px;
    max-width: 800px;
    z-index: 999;
}
.banner h1 {
    font-size: 56px;
    color: white;
    text-transform: capitalize;
}
.banner p {
    font-size: 17px;
    line-height: 25px;
    padding: 17px 0;
    color: white;
}

/* 05. Section About Area */
.section-about{}
.about-history {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.history-left {
    flex-basis: 600px;
}
.history-left a:hover{
    border: 1px solid transparent;
    border-color: #4d18a6;
}
.section-title {}
.section-title span {
    font-size: 20px;
    text-transform: capitalize;
    color: #333;
    position: relative;
    padding-bottom: 7px;
    font-weight: 600;
}
.section-title span:before {
    position: absolute;
    content: "";
    width: 50px;
    height: 1px;
    border: 2px solid transparent;
    background-color: #635CDB;
    border-radius: 5px;
    left: 0;
    bottom: 0;
    transform: translate(0, 50%);
}
.section-title h4 {
    font-size: 40px;
    text-transform: capitalize;
    padding: 12px 0;
}
.section-title p {
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 11px;
    color: #333;
}
.single-history {
    display: flex;
    flex-flow: row wrap;
    margin: 26px 0;
}
.single-history i {
    width: 44px;
    height: 40px;
    line-height: 40px;
    font-size: 40px;
}
.single-history i:first-child{
    color: #6610f2;
}
.single-history i:last-child{
    color: #ff3681;
}
.history-info {
    flex-basis: 390px;
}
.history-info h4 {
    font-size: 21px;
    padding-top: 6px;
    text-transform: capitalize;
    padding-bottom: 10px;
}
.history-info p {
    font-size: 16px;
    line-height: 24px;
    color: #333;
}
.history-right {
    flex-basis: 528px;
    display: flex;
    flex-flow: row wrap;
    position: relative;
    animation: mymove 3s infinite linear;
}
@keyframes mymove {
    from {top: -30px;}
    to {top: 50px;}
}
.img-left {
    flex-basis: 235px;
    margin-right: 18px;
}
.img-left img {
    max-width: 100%;
    padding-bottom: 15px;
}
.img-right {
    flex-basis: 260px;
    margin-top: 70px;
}
.img-right img{
    max-width: 100%;
    padding-bottom: 15px;
}

/* 06. Section Services Area */
.section-services{
    background-color:#eaeaea;
}
.services {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: flex-start;
}
.services-left {
    flex-basis: 814px;
    margin-left: -173px;
}
.services-left img{
    width: 100%;
}
.services-right {
    flex-basis: 516px;
}
.services-box {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}
.box-left {
    flex-basis: 267px;
    margin-top: -62px;
}
.single-box{
    margin-bottom: 10px;
}
.single-box i {
    width: 38px;
    height: 55px;
    line-height: 55px;
    font-size: 45px;
}
.single-box:first-child i{
    color: #6f32c1;
}
.box-left .single-box:last-child i{
    color: #676bd5;
}
.box-right .single-box:last-child i{
    color: #45e8b7;
}
.single-box h4 {
    font-size: 20px;
    text-transform: capitalize;
    padding: 10px 0;
}
.single-box p {
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 9px;
    color: #333;
}
.single-box a {
    font-size: 16px;
    text-transform: capitalize;
    color: #4d18a6;
    font-weight: 200;
    transition: .7s;
    display: inline-block;
    padding-bottom: 17px;
}
.single-box a:hover{
    color: #635cdb;
}
.box-right {
    flex-basis: 245px;
}

/* 07. Testimonial Area */
.testimonial-area{}
.testimonial-area{}
.testimonial-area .section-title, .pricing-area .section-title, .action-area .section-title, .blog-area .section-title, .about-action-area .section-title, .services-area .section-title, .contact-area .section-title{
    max-width: 700px;
    text-align: center;
    margin: 0 248px;
}
.testimonial-area .section-title span:before, .pricing-area .section-title span:before, .action-area .section-title span::before, .blog-area .section-title span:before, .about-action-area .section-title span::before, .team-area .section-title span::before{
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
}
.testimonial {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 20px 0 0;
}
.single-testi {
    flex-basis: 280px;
}
.single-testi img {
    max-width: 70%;
    border-radius: 50%;
    border: 10px solid white;
    outline: 3px solid #3333332b;
    margin-left: 43px;
    transition: .7s;
}
.single-testi img:hover {
    transform: translateY(-30px);
}
.testi-info {
    border: 1px solid #00000005;
    background: #f3f3f3;
    padding: 19px 13px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: center;
}
.testi-info h4{
    color: black;
    text-transform: capitalize;
    padding-bottom: 10px;
    font-size: 22px;
}
.testi-info span {
    display: block;
    font-size: 15px;
    padding: 10px 0;
    color: #333;
}
.star{}
.star i:first-child{
    color: #635cdb;
}
.star i:nth-child(2){
    color: #817bf4;
}
.star i:nth-child(3){
    color: #908bf5;
}
.star i:nth-child(4){
    color: #9b97f2;
}
.star i:last-child{
    color: #c2beff;
}
.testi-info p {
    font-size: 16px;
    line-height: 24px;
    color: black;
    padding: 10px 0;
}
.testi-info a{}

/* 08. Pricing Area */
.pricing-area {
    position: relative;
    background-color: #eaeaea;
    z-index: 1;
}
.pricing-area:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/shape_1.png) no-repeat;
    z-index: -1;
    bottom: 0;
    right: 0;
    background-position: center;
}
.pricing-area:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../img/feature_bg.png) no-repeat;
    background-size: contain;
    z-index: -1;
}
.pricing {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 130px 0 50px;
}
.single-price {
    flex-basis: 350px;
    border: 1px solid transparent;
    background-color: white;
    border-radius: 10px;
    padding: 26px;
}
.single-price:nth-child(2) {
    flex-basis: 426px;
    margin: -34px 0;
}
.single-price:nth-child(2) .price-img {
    padding-top: 274px;
    margin-top: -115px;
}
.single-price:nth-child(2) .img-info {
    margin-top: -195px;
    margin-left: 122px;
}
.single-price:nth-child(2) .img-info h4{
    font-size: 32px;
}
.single-price:nth-child(2) .img-info h5{
    font-size: 41px;
}
.price-img{
    position: relative;
    padding-top: 217px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -92px;
}
.img-info {
    position: absolute;
    margin-top: -162px;
    margin-left: 95px;
    color: white;
    text-align: center;
}
.img-info h4 {
    font-size: 27px;
    text-transform: capitalize;
    padding-bottom: 7px;
}
.img-info p {
    font-size: 37px;
    font-weight: 600;
}
.img-info span {
    display: block;
    font-size: 16px;
    font-weight: 200;
    text-transform: capitalize;
    padding-top: 10px;
}
.list {
    margin-top: 27px;
}
.list span{
    display: block;
    padding: 10px 0;
    font-size: 17px;
    text-transform: capitalize;
    color: #333;
}
.single-price:nth-child(2) .list span{
    font-size: 19px;
}
.list span i {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 15px;
}
.single-price a {
    font-size: 16px;
    display: inline-block;
    margin: 15px 45px;
    text-transform: capitalize;
    background: #635CDB;
    border: 2px solid transparent;
    transition: .7s;
    padding: 12px 35px;
    color: white;
    text-align: center;
}
.single-price a:hover{
    border-color: #635CDB;
    background-color: white;
    color: #635CDB;

}
.single-price:nth-child(2) a {
    margin: 33px 84px;
    font-size: 20px;
    padding: 16px 28px;
}
.single-price a i{
    width: 23px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-left: 6px;
}

/* 09. Action Area */
.action-area {
    position: relative;
    overflow: hidden;
    background-size: cover;
    background: url(../img/banner/newsletter_bg.png);
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center;
}
.action-area:before{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0.7;
    background: #1c1c1c;
    z-index: -1;
}
.action-area:after{
    position: absolute;
    left: 20%;
    top: -25%;
    width: 100%;
    height: 100%;
    content: "";
    background-size: 85%;
    background: url(../img/plane_shape.png) no-repeat;
}
.vedio-play {
    margin: 198px 559px 0px;
    background-color: #4d18a6;
    border: 1px solid transparent;
    border-radius: 50%;
    position: absolute;
    z-index: 999;
    transition: .7s;
}
.vedio-play:hover {
    border: 8px solid #00000052;
    outline: 3px solid #4d18a6;
}
.vedio-play a i {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 24px;
    text-align: center;
    color: white;
}
.action-area .section-title, .action-area .section-title span, .action-area .section-title p{
    color: white;
}
.action-area .section-title span::before{
    background-color: white;
}
.action{
    margin-top: 100px;
    margin-bottom: 0;
}
.action input[type="email"] {
    width: 70%;
    height: 64px;
    margin-left: 165px;
    background: #4c09a959;
    color: #c3c3c3;
    font-size: 17px;
    text-transform: capitalize;
    padding-left: 19px;
    font-weight: 500;
    border: 0;
    z-index: 999;
    border: 1px solid white;
}
.button {
    margin-left: 827px;
    margin-top: -55px;
}
.button button {
    padding: 11px 28px;
    font-size: 20px;
    text-transform: capitalize;
    background-color: #635CDB;
    border: 1px solid transparent;
    color: white;
    border: 0;
    transition: .7s;
    cursor: pointer;
}
.button button:hover {
    background: #4c09a959;
    border: 1px solid white;
}

/* 10. Blog Area */
.blog-area{
    background-color: #f3f3f3;
}
.blog {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 66px 0;
}
.single-blog {
    flex-basis: 380px;
    background-color: white;
    border: 1px solid transparent;
    border-radius: 5px;
    margin-bottom: 19px;
}
.blog-img {
    position: relative;
}
.img-link{}
.img-link:hover .blog-info h4 a:hover{
    color: black;
}
.blog-img .img-link a {
    margin-bottom: 0;
    padding-left: 0;
}
.img-link img{
    width: 100%;
}
.blog-img h5{
    position: absolute;
    margin-top: -246px;
    border: 1px solid transparent;
    padding: 11px 21px;
    background-color: #635cdb;
    display: block;
    font-size: 16px;
    text-transform: capitalize;
    color: white;
}
.blog-info{}
.blog-info span {
    display: block;
}
.blog-info span a {
    margin: 17px;
    text-transform: capitalize;
    padding-left: 0;
    font-weight: 200;
    color: #333;
}
.blog-info span a:hover {
    color: #635CDB;
}
.blog-info span a i{
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 15px;
    color: #333;
}
.blog-info h4{}
.blog-info h4 a {
    font-size: 25px;
    text-transform: capitalize;
    color: #635CDB;
    margin-bottom: 0;
    transition: .7s;
}
.blog-info h4 a:hover{
    color: black;
}
.blog-info p {
    padding: 17px;
    font-size: 16px;
    line-height: 24px;
    color: #333;
}
.single-blog a {
    padding-left: 17px;
    display: inline-block;
    font-size: 16px;
    margin-bottom: 23px;
    font-weight: 600;
    transition: .7s;
    text-transform: capitalize;
    color: black;
}
.single-blog a:hover{
    color: #635CDB;
}
.single-blog a i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    margin-left: 6px;
}

/* 11. Footer Area */
.footer-area {
    background-color: #191919;
    padding: 55px 0 0;
}
.footer{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.footer-left {
    flex-basis: 240px;
}
.footer-left p {
    font-size: 16px;
    line-height: 24px;
    padding: 19px 0;
    color: white;
}
.footer-area .header-link {
    margin-left: -20px;
    margin-top: 20px;
}
.footer-menu {
    flex-basis: 200px;
}
.footer-menu h4, .footer-middle h4, .footer-right h4 {
    text-transform: capitalize;
    font-size: 22px;
    color: white;
    position: relative;
    padding-bottom: 10px;
}
.footer-menu h4:before, .footer-middle h4:before, .footer-right h4:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    border: 1px solid transparent;
    background-color: #635CDB;
    border-radius: 5px;
    bottom: 0;
    left: 0;
    transform: translate(0, 50%);
}
.footer-menu span, .footer-middle span {
    margin-top: 14px;
    padding: 1px 0;
    transition: .7s;
    display: block;
}
.footer-menu span:hover, .footer-middle span:hover {
    transform: translateX(10px);
}
.footer-menu span a, .footer-middle span a {
    text-transform: capitalize;
    font-size: 16px;
    color: white;
    transition: .7s;
}
.footer-menu span a i, .footer-middle span a i {
    width: 22px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
}
.footer-menu span a:hover, .footer-middle span a:hover{
    color: #635CDB;
}
.footer-middle{
    /*padding: 96px 0 83px 124.37px;*/
}
.footer-right {
    flex-basis: 375px;
}
.footer-right p {
    font-size: 16px;
    line-height: 24px;
    max-width: 374px;
    padding: 26px 0;
    font-weight: 400;
    color: white;
}
.footer-right form{}
.footer-right form input {
    width: 374px;
    height: 51px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 24px;
    padding-left: 24px;
    color: rgb(0 0 0);
    border: 0;
}
.footer-right button{
    border: 0;
    cursor: pointer;
}
.copyright {
    margin-top: 57px;
    background-color: #333;
}
.copyright p{
    text-align: center;
    font-size: 16px;
    color: white;
    padding: 20px 0;
}
.copyright span{
    text-transform: uppercase;
    color: #635CDB;
    font-size: 18px;
}

/* 12. About Area */

/* 13. About Banner Area */
.about-banner-area {
    padding-top: 494px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.about-banner-area::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: white;
    transform: translate(0);
    z-index: 2;
    background-color: black;
    opacity: .65;
}
.about-banner {
    position: absolute;
    margin-top: -289px;
    max-width: 800px;
    z-index: 999;
    margin-left: 538px;
}
.about-banner h4{
    font-size: 35px;
    text-transform: capitalize;
    color: white;
    text-align: center;
}
.about-banner ul {
    display: flex;
    flex-flow: row wrap;
    margin-left: 17px;
}
.about-banner ul li {
    display: block;
    font-size: 17px;
    padding-top: 10px;
    color: white;
    margin-right: 11px;
    text-transform: capitalize;
}
.about-banner ul li a{
    font-size: 17px;
    color: white;
    text-transform: capitalize;
}

/* 14. About Area */
.about-area {
    background-color: #e2e2e22b;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.about{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}
.about-img {
    flex-basis: 689px;
    margin-left: -160px;
}
.about-img img{
    width: 100%;
}
.about-info {
    flex-basis: 734px;
    margin-right: -118px;
}
.single {
    display: flex;
    flex-flow: row wrap;
    margin: 20px 0 0;
}
.single-info {
    flex-basis: 229px;
    margin-right: 15px;
}
.single-info h4 {
    font-size: 22px;
    text-transform: capitalize;
    padding-bottom: 8px;
}
.single-info p {
    font-size: 16px;
    line-height: 24px;
    padding-bottom: 10px;
}
.single-info span{
    display: block;
    padding: 10px 0;
    text-transform: capitalize;
    font-size: 17px;
    color: #333;
}
.single-info span i {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    border: 1px solid transparent;
    background: #8d8d8d;
    color: white;
    text-align: center;
    border-radius: 50%;
    margin-right: 10px;
}
.single-info span:hover i{
    background-color: #635CDB;
}
.about-layout{
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.about-layout img{
    max-width: 100%;
    height: auto;
}


/* 15. Team Area */
.team-area{}
.team-area .section-title{
    max-width: 700px;
    text-align: center;
    margin: 0 248px;
}
.team {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 67px 126px 0;
}
.single-team {
    position: relative;
    overflow: hidden;
    flex-basis: 285px;
    transition: .5s;
    border-radius: 5px;
    margin-bottom: 27px;
}
.single-team::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2;
    opacity: .5;
    transition: .8s;
}
.single-team:hover::before{
    transform: translate(100%);
}
.single-team a{}
.single-team a img{
    width: 100%;
}
.info {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #635CDB;
    left: 0;
    bottom: 0;
    padding: 15px;
    transition: .5s;
    z-index: 9;
    transform: translateY(100%);
}
.info h4 {
    color: white;
    font-size: 20px;
    text-transform: capitalize;
    padding-bottom: 7px;
}
.info span {
    color: #c7c7c7;
    font-size: 15px;
    text-transform: capitalize;
}
.single-team:hover .info{
    transform: translateY(75%);
}

/* 16. Services */

/* 17. Services Area */
.services-area{
    position: relative;
    z-index: 1;
    background-color: #fcfcfc;
}
.services-area::before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../img/shapes/feature_bg.png) no-repeat center;
    background-size: contain;
    z-index: -1;
}
.services-box {
    display: flex;
    flex-flow: row wrap;
    margin: 87px 0 0;
}
.single-service {
    position: relative;
    flex-basis: 374px;
    border: 1px solid transparent;
    background-color: white;
    border-radius: 10px;
    margin-left: 16px;
    margin-bottom: 100px;
    transition: .7s;
}
.single-service:hover{
    transform: translateY(-15px);
}
.img-box{
    position: absolute;
    top: 0;
    left: 50%;
    color: #ffff;
    transform: translate(-50%, -50%);
}
.img-box i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
}
.service-img{}
.service-img img{
    width: 100%;
}
.item-content {
    padding: 96px 20px 30px;
}
.item-content h4 {
    font-size: 22px;
    text-align: center;
    text-transform: capitalize;
    color: black;
}
.item-content p{
    font-size: 16px;
    line-height: 24px;
    color: #333;
    padding: 10px 0;
    text-align: center;
}
.item-content a {
    font-size: 16px;
    text-transform: capitalize;
    display: inline-block;
    margin: 10px 125px;
    color: black;
    font-weight: 600;
    transition: .7s;
}
.item-content a:hover{
    color: #635CDB;
}

/* 18. Contact */

/* 19. Contact Area */
.contact-area {
    background-color: #f5f5f5;
}
.contact {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 60px 0 25px;
}
.contact-form {
    flex-basis: 780px;
}
.contact-form input {
    width: 48%;
    height: 58px;
    margin-right: 12px;
    font-size: 17px;
    padding-left: 10px;
    text-transform: capitalize;
}
.contact-form input[type="text"] {
    width: 98%;
    margin: 30px 0;
}
.contact-form textarea {
    width: 98%;
    height: 155px;
    font-size: 17px;
    text-transform: capitalize;
    padding-left: 10px;
    padding-top: 10px;
}
.contact-form button {
    margin-top: 20px;
    font-size: 20px;
    padding: 10px 15px;
    text-transform: capitalize;
    border: 2px solid transparent;
    border-radius: 5px;
    transition: .7s;
    background-color: #635CDB;
    color: white;
}
.contact-form button:hover{
    border-color: #4d18a6;
    background-color: white;
    color: black;
}
.contact-info {
    flex-basis: 377px;
    border: 1px solid transparent;
    background: white;
    padding: 19px;
    border-radius: 10px;
}
.contact-info h4 {
    font-size: 28px;
    text-transform: capitalize;
}
.contact-link {
    margin: 20px 0 0;
}
.contact-link a {
    font-size: 18px;
    color: #333;
    padding: 13px 0;
    display: block;
}
.contact-link a:first-child {
    text-transform: capitalize;
    font-size: 17px;
}
.contact-link span {
    display: block;
    margin-left: 22px;
    margin-top: 10px;
}
.contact-link a i {
    width: 23px;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    color: #4d18a6;
}
.contact-area .header-link {
    margin: 31px 49px 0;
}
.contact-area .header-link a{}
.contact-area .header-link a i{
    color: white;
    background-color: #635CDB;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: 50%;
    transition: .7s;
}

/* 20. Map Area */
.map-area{}
.map-area iframe{
    width: 100%;
    height: 500px;
    border: 0;
}