@font-face { 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: url('../../assets/font/Montserrat/static/Montserrat-Light.ttf') format('truetype');
}
@font-face { 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../../assets/font/Montserrat/static/Montserrat-Regular.ttf') format('truetype');
}
@font-face { 
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: url('../../assets/font/Montserrat/static/Montserrat-Medium.ttf') format('truetype'); 
}

:root {
    --color-main: #560591;
    --color-acc1: #C6AEE2;
    --color-acc2: #E3DAF2;
    --color-acc3: #F0E9F8;
    --color-dark: #2E2E2E;
}

body {font: 300 23px "Montserrat", sans-serif;color: var(--color-dark);}
h1,h2,h3 {margin-top:0px;font-style:normal;font-weight:500;text-transform:normal}
p{font-size:23px;line-height:30px;margin-bottom:15px;}
strong{font-weight: 500;}

.bg-light {background-color: var(--color-acc2) !important; border-bottom: var(--color-acc1) solid 1px; box-shadow: 0 5px 25px -20px var(--color-dark)}

.f-left{float:left}
.f-right{float:right}

a{text-decoration:none; color:var(--color-main);}
a:hover{text-decoration:none; outline: none; color: var(--color-dark)}
a:focus,.btn:focus{outline: 2px solid red;outline-offset: 5px; z-index: 9999;}

.mt-page{margin-top: 100px;}

.btn {
    background:var(--color-main);
    text-transform:normal;
    padding:28px 22px;
    color:var(--color-acc3);
    display:inline-block;
    font-size:20px;
    font-weight:400;
    line-height:1;
    border-radius:0 0 0 17px;
    user-select: none;
    -moz-user-select:none;
    letter-spacing:1px;
    line-height:0;
    margin-bottom:0;
    margin:10px;
    cursor:pointer;
    position:relative;
    z-index:1;
    overflow:hidden;
    margin:0
}

.btn:hover{background-position:right; background:var(--color-dark);}
.btn:focus{background-color: var(--color-main) !important;}
.btn:active{background-color: var(--color-main) !important;}


#back-top{
    background:var(--color-main);
    height:50px;
    width:50px;
    right:31px;
    bottom:18px;
    position:fixed;
    color:var(--color-acc3);
    font-size:45px;
    text-align:center;
    border-radius:50%;
    line-height:48px;
    border:2px solid transparent;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
}
@media (max-width: 575px){#back-top{right:16px}}
#back-top:hover{background: var(--color-dark);}
#back-top a i{display:block;line-height:47px; color:var(--color-acc3)}



.mb-35{margin-bottom:35px}
.mb-40{margin-bottom:40px}
.mb-45{margin-bottom:45px}
.mb-50{margin-bottom:50px}
.mb-100{margin-bottom:100px}



.section-padding{padding-block:120px}
@media only screen and (min-width: 576px) and (max-width: 1199px){
    .section-padding{padding-block:65px}
}
@media (max-width: 575px){.section-padding{padding-block:65px}
}


.footer-padding{padding-top:440px;padding-bottom:70px}
@media only screen and (min-width: 240px) {
    .footer-padding{padding-top:580px;padding-bottom:70px}
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
    .footer-padding{padding-top:440px;padding-bottom:70px}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .footer-padding{padding-top:440px;padding-bottom:0px}
}
@media only screen and (min-width: 576px) and (max-width: 767px){
    .footer-padding{padding-top:375px;padding-bottom:0px}
}
@media (max-width: 575px){
    .footer-padding{padding-top:220px;padding-bottom:0px}
}
@media (max-width: 575px){
    .section-tittle{margin-bottom:50px}
}



@media only screen and (min-width: 576px) and (max-width: 767px){
    .section-tittle{margin-bottom:50px}
}

.section-tittle h2{font-size:50px;display:block;color:var(--color-dark);text-transform:capitalize}
@media only screen and (min-width: 992px) and (max-width: 1199px){
    .section-tittle h2{font-size:40px}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .section-tittle h2{font-size:50px}
}
@media only screen and (min-width: 576px) and (max-width: 767px){
    .section-tittle h2{font-size:40px}
}
@media (max-width: 575px){
    .section-tittle h2{font-size:40px;}
}

.section-bg{background-size:cover;background-repeat:no-repeat}

.slider-height{height:920px}

.hero-area{position:relative;background-image:url(../img/h1_hero.png);background-repeat:no-repeat;background-position:center center;background-size:cover}
@media only screen and (min-width: 576px) and (max-width: 767px){.hero-area .hero-wrapper{margin-top:-50px}}
@media (max-width: 575px){.hero-area .hero-wrapper{margin-top:-20px}}
.hero-area .hero__caption{overflow:hidden;position:relative}

@media (max-width: 575px){.hero-area .hero__caption{margin-top:17px}}
.hero-area .hero__caption span{display:inline-block;font-size:18px;color:var(--color-dark);text-transform:normal;margin-bottom:20px}

.hero-area .hero__caption h1{font-size:70px;color:var(--color-dark);line-height:1.2;margin-bottom:23px;overflow:hidden}
@media only screen and (min-width: 1200px) and (max-width: 1360px){.hero-area .hero__caption h1{font-size:60px}}
@media only screen and (min-width: 992px) and (max-width: 1199px){.hero-area .hero__caption h1{font-size:55px;line-height:1.2}
}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .hero-area .hero__caption h1{font-size:50px;line-height:1.2}
}
@media only screen and (min-width: 576px) and (max-width: 767px){
    .hero-area .hero__caption h1{font-size:40px}
    .logo img{max-width:280px;}
    .hero__caption{text-align: center;}
    .hero__caption img{max-width: 225px;}
}
@media (max-width: 575px){
    .hero-area .hero__caption h1{font-size:40px;line-height:1.4}
    .logo img{max-width:280px;}
    .hero__caption{text-align: center;}
    .hero__caption img{max-width: 225px;}
}

.hero-area .hero__caption p{margin-bottom:30px;
    overflow:hidden;font-size:26px;
    line-height:1.5}
@media only screen and (min-width: 768px) and (max-width: 991px){.hero-area .hero__caption p{padding-right:0px}
}
@media (max-width: 575px){.hero-area .hero__caption p{padding-right:0px;font-size:23px}
}

.service-area{margin-top:-200px}
.service-area .single-cat{
    background:var(--color-main);
    border-radius:6px;
    padding:41px 22px 0px 22px;
    position:relative;
    z-index:1;
    border-radius:0 0 0 50px;
    min-height: 420px;
}
.service-area .single-cat::before{position:absolute;content:"";height:100%;width:0;background:var(--color-main);bottom:0;right:0;z-index:-1;border-radius:0 0 0 50px}
.service-area .single-cat .cat-icon{margin-bottom:31px}
.service-area .single-cat .cat-cap h3{font-size:23px;font-weight:500;margin-bottom:21px;display:block;color:var(--color-acc3)}
.service-area .single-cat .cat-cap p{margin-bottom:36px;color:var(--color-acc3);font-size:20px;}
@media only screen and (min-width: 1200px) and (max-width:1399px){
    .service-area .single-cat{min-height: 520px;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px){
    .service-area .single-cat{min-height: 585px;}
}
@media only screen and (min-width: 1400px){
    .service-area .single-cat{min-height: 450px;}
}


.wantToWork-area{padding-top:120px;padding-bottom:240px;background-image:url(../img/section-bg.png);}
@media only screen and (min-width: 768px) and (max-width: 991px){
    .wantToWork-area{padding-top:63px}
}
@media only screen and (min-width: 576px) and (max-width: 767px){
    .wantToWork-area{padding-top:63px}
}

.footer-wrappr{background-image:url(../img/footer-bg.png)}

.footer-area .footer-tittle ul li{margin-bottom:15px}
.footer-area .footer-tittle ul li a:hover{color:var(--color-main);padding-left:5px}
.footer-bottom-area { background-color: var(--color-main); }
.footer-bottom-area .footer-border{padding:33px 0px 20px}
.footer-bottom-area .footer-copy-right p{color:var(--color-acc3);font-size:18px;line-height:2;margin-bottom:12px}
.footer-bottom-area .footer-copy-right p i{color:var(--color-main)}
.footer-bottom-area .footer-copy-right p a{color:var(--color-acc1)}
.footer-bottom-area .footer-copy-right p a:hover{color:var(--color-acc2)}

.button-contact{color:var(--color-acc3);}
.button-contact a{width: 240px;}
.button-header-contact{color:var(--color-acc3);}
.button-header-contact a{width: 95px;}

@media (max-width: 991px){
    .container {max-width: 990px !important;}
}