@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allison&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?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');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700&display=swap');

/*mainroot*/
:root {
    /*mesan-theme*/
    --pagebgcolor: #ebeef6;
    --pagefont_clr: #313131;
    --mainthemecolor: #2273f8;
    --mainsecondcolor:#2d1a46;
    --clr1_1: #2273f8;
    --clr1_2: #2273f8;
    --clr1_3: #2273f8;
    --clr1_4: #857b94;

    --clr2_1: #69696b;
    --clr2_2: #69696b;
    --clr2_3: #69696b;


    --clr3: #4f4f4f;
    --clr4: #cc9699;

    --white: #fff;
    --gray: #f3f5f8;
    --gray2: #e9e9e9;
    --gray3: #858585;
    --gray4: #343434;
    /*content*/

    --body_font_size: 14px;
    --h1-size: 2em;
    --h2-size: 1.7em;
    --h3-size: 1.5em;
    --h4-size: 1.3em;
    --h5-size: 1.8em;
    --p-size: 1em;

    --poppins: 'Poppins', sans-serif;
    --roboto: 'Roboto', sans-serif;
    --montserrat: 'Montserrat', sans-serif;
    --merriweather: 'Merriweather', sans-serif;
    --oswald: 'Oswald', sans-serif;
    --allison: 'Allison', cursive;
    --quicksand: 'Quicksand', sans-serif;
    --barlow: 'Barlow Condensed', sans-serif;
    --karla: 'Karla', sans-serif;
    --noto: 'Noto Sans', sans-serif;
    --radjani: 'Rajdhani', sans-serif;
    --titllium :'Titillium Web', sans-serif;
}

.full-h-must{height:100vh;}
.full-h-min{min-height: 100vh;}
.full-h-max{max-height: 100vh;}
.half-h-must{height:50vh;}
.half-h-min{min-height: 50vh;}
.half-h-max{max-height: 50vh;}
.quarter-h-must{height:75vh;}
.quarter-h-min{min-height: 75vh;}
.quarter-h-max{max-height: 75vh;}
.bg_img_full {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

div.flex-full-contain {
    flex: 0 0 100%;
}
div.flex-half-contain {
    flex: 0 0 50%;
}
.color-first{
    color: var(--clr2_3);
}

body {
    font-size: 14px;
    font-weight: 400;
    background: var(--pagebgcolor);
    color: var(--pagefont_clr);
    font-family: var(--montserrat) !important;
    overflow-x: hidden !important;
}

html{
    overflow-x: hidden;
    font-size: 14px;
}

a:hover,
a:visited,
a:focus {
    text-decoration: none;
}

h1 {
    font-size: var(--h1-size);
}
h2 {
    font-size: var(--h2-size);
}
h3 {
    font-size: var(--h3-size);
}
h4 {
    font-size: var(--h4-size);
}
p{
    font-size: 1em;

}
section{
    position: relative;
}

.syh-btn{
    padding: 10px 15px;
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: 400;
    display: inline-block;
    border-radius: 2px;
    letter-spacing: 1px;
    transition: all 0.4s ease-in-out;
    transform-origin: 50% 50%;
    transform: perspective(50px) translateZ(0);
    outline: none !important;
}
.syh-btn:hover{
    transform: perspective(50px) translateZ(5px);
    z-index: 12;
}
.btn.btn-xs{
    font-size: 0.6em;
}
.btn.btn-rounded {
    border-radius: 30px;
    padding-left: 1rem;
    padding-right: 1rem
}
.syh-btn.icon-btn{
    padding-left: 50px;
    position: relative;
}
.syh-btn.icon-btn i{
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;

    text-align: center;
    left: 0;
    top: 0;
}
.syh-btn.btn1{
    background: var(--clr1_3);
    color: WHITE;
}
.btn-primary{
    background: var(--clr1_3);
    color: WHITE;
    border: none;
}
.btn-light{
    background:#ddd !important;
}
.syh-btn.btn1.icon-btn i{
    border-right: 1px solid WHITE;
}
.syh-btn.btn2{
    background: var(--clr1_4);
    color: WHITE;
}
.syh-btn.btn2.icon-btn i{
    border-right: 1px solid WHITE;
}
.syh-btn.btn3{
    background: transparent;
    color: var(--clr1_3);
    border: 1px solid var(--clr1_3);
    font-weight: 600;
}
.syh-btn.btn3.icon-btn i{
    border-right: 1px solid var(--clr1_3);
}

.syh-btn.anim-btn{
    position: relative;
}
.syh-btn.anim-btn::after{
    position: absolute;
    content:'';
    left: 0;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    transition: all 0.5s ease-in-out;
    z-index: -1;
}
.syh-btn.anim-btn:hover::after{
    width: 100%;
}

.syh-btn i,
.syh-btn span{
    z-index: 12;
}
.syh-btn span{
    position: relative;
}

.syh-btn.btn1.anim-btn::after{
    background: white;
}
.syh-btn.btn1.anim-btn:hover{
    color: var(--clr1_3) !important;
}
.syh-btn.btn2.anim-btn::after{
    background: var(--clr1_3);
}
.syh-btn.btn3.anim-btn::after{
    background: var(--clr1_3);
}
.syh-btn.btn3.anim-btn:hover{
    color: white !important;
}

.dark-bg{}
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg p,
.dark-bg a{
    color: WHITE;
}


.bg-primary{
    background: var(--mainthemecolor) !important;
    color: WHITE;
}

.bg-clr1{
    background: var(--mainthemecolor);
}
.bg-clr2{
    background: var(--clr1_2);
}
.bg-clr3{
    background: var(--clr1_3);
}
.bg-clr4{
    background: var(--clr1_4);
}
.bg-clr5{
    background: #f4f4f4;
}
.bg-clr6{
    background: #ddd;
}


.clr1{
    color: var(--clr1_1);
}
.clr2{
    color: var(--clr1_2);
}
.clr3{
    color: var(--clr1_3);
}
.clr4{
    color: var(--clr1_4);
}

.font-size-1{font-size: 1em}
.font-size-1-2{font-size: 1.2em}
.font-size-2{font-size: 2em}
.font-size-3{font-size: 3em}
.font-size-4{font-size: 4em}


div.main-wrapper{
    margin-top: 150px;
    background: var(--pagebgcolor);
}

header.desctop-main-header{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 300;
}
header.desctop-main-header .topbar{
    background: var(--mainthemecolor);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    min-height: 20px;
    display: flex;
    align-items: center;
}
header.desctop-main-header .topbar a{
     font-size: 0.8em;
}

header.desctop-main-header .topbar p{
    font-size: 0.8em;
}

header.desctop-main-header .middlebar{
    display: flex;
    align-items: center;
    background: var(--mainthemecolor);
    padding-top: 10px;
    padding-bottom: 10px;
}
header.desctop-main-header .footerbar{
    display: flex;
    align-items: center;
}


header.desctop-main-header .icon-bg{

}
header.desctop-main-header .icon-bg::after{

}

header.desctop-main-header .logo{}
header.desctop-main-header .logo img{
    padding: 10px;
    max-width: 190px;
    max-height: 62px;
}
header.desctop-main-header #mainmenu{
    margin-top: 10px;
    padding-top: 10px;
    text-align: left;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
header.desctop-main-header #mainmenu > ul{
    margin-bottom: 0px;
    height: 40px;
    padding-left: 0;
}
header.desctop-main-header #mainmenu > ul > li:first-child{
    margin-left: 0;
}
header.desctop-main-header #mainmenu > ul > li{
    display: inline-flex;
    height: 100% !important;
    align-items: center;
    margin-left: 20px;
    list-style-type: none;
    position: relative;

}
header.desctop-main-header #mainmenu > ul > li:first-child{

}
header.desctop-main-header #mainmenu > ul > li:last-child{

}
header.desctop-main-header #mainmenu > ul > li  a:hover{
    transition: all 0.5s ease-in-out;
    transform: perspective(10px) translateZ(2px);
}
header.desctop-main-header #mainmenu > ul > li > a{
    color: #fff;
    font-weight: 500;
    font-size: 1em;
    font-family: var(--poppins);
    transition: all 0.1s ease-in-out;
}


header.desctop-main-header #mainmenu > ul > li.menu-btn{
    border-radius: 5px;

}
header.desctop-main-header #mainmenu > ul > li.menu-btn a{
    color: WHITE;
    padding: 3px 15px;
    display: flex;
    align-items: center;
    transition: all 0.5s ease-in-out;
}
header.desctop-main-header #mainmenu > ul > li.menu-btn.btn-1{
    background: var(--clr1_4);
}
header.desctop-main-header #mainmenu > ul > li.menu-btn.btn-2{
    background: var(--clr1_4);
}
header.desctop-main-header #mainmenu > ul > li.menu-btn.btn-2:hover{
    background: var(--clr1_3);
}
header.desctop-main-header #mainmenu > ul > li.menu-btn.btn-2:hover a{
    background: var(--clr1_3);
    border-radius: 5px;

    color: WHITE;
}


header.desctop-main-header #mainmenu > ul > li:hover > a{


}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu{}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu > a{}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu > div.sub-menu{
    position: absolute;
    box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.31);
    left: 0;
    border-radius: 5px;
    top: 190%;
    max-height: 0;
    padding: 0;
    overflow-y: hidden;
    transition: all 0.5s ease-in-out;
    z-index: -10;

    padding-left: 10px;
    opacity: 0;
    background: var(--clr1_3);
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu{
    top: 100%;
    max-height: 1500px;
    opacity: 1;
    z-index: 40;
    overflow: visible;
    padding: 20px;

}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu::after{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    position: absolute;
    left: 10px;
    top: -9px;
    border-color: transparent transparent var(--clr1_3) transparent;
    content:'';
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu > div.sub-menu > ul{
    margin-bottom: 0;
    padding-left: 0;
    min-width: 150px;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    overflow: hidden;
}

header.desctop-main-header #mainmenu > ul > li.has-sub-menu > div.sub-menu > ul > li{
    display: block;
    list-style: none;
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #ffffff59;
    white-space: nowrap;
    flex:0 0 100%;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu > div.sub-menu > ul > li:nth-child(2n) a{
    color: #dddddd;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu > div.sub-menu > ul > li > a{
    color: white;
    font-size: 1em;
    opacity: 0;
    transition: all 0.5s ease-in-out;

    margin-left: -100%;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li > a{
    opacity: 1
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(1) > a{
   margin-left: 0;
    transition-delay: 0.10s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(2) > a{
   margin-left: 0;
    transition-delay: 0.12s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(3) > a{
   margin-left: 0;
    transition-delay: 0.14s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(4) > a{
   margin-left: 0;
    transition-delay: 0.16s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(5) > a{
   margin-left: 0;
    transition-delay: 0.18s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(6) > a{
   margin-left: 0;
    transition-delay: 0.20s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(7) > a{
   margin-left: 0;
    transition-delay: 0.22s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(8) > a{
   margin-left: 0;
    transition-delay: 0.24s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu:hover > div.sub-menu > ul > li:nth-child(9) > a{
   margin-left: 0;
    transition-delay: 0.26s;
}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu > div.sub-menu > ul > li:first-child{}
header.desctop-main-header #mainmenu > ul > li.has-sub-menu > div.sub-menu > ul > li:last-child{
    border-bottom: none;
}
span.icons{
    width: 20px;
    height: 20px;
    background:url(../img/Kare.png);
    background-position: center;
    background-size: auto 100%;
}

header.mobile-main-header{
    display: flex;
    position: fixed;
    left: 0;
    width: 100%;
    top:0;
    height: 75px;
    background: var(--mainthemecolor);
    z-index: 300;
}
header.mobile-main-header a.logo{
    display: inline-block;
    padding: 5px;
    margin: 10px;
}
header.mobile-main-header a.logo img{
    display: inline-block;
    max-width: 144px;
}
header.mobile-main-header a.menutoggle{
    display: inline-block;
    width: 40px;
    height: 40px;

    border-radius: 10px;
    position: relative;
    margin-top: 0;
}
header.mobile-main-header a.menutoggle span{
    display: inline-block;
    position: absolute;
    width: 80%;
    height: 2px;
    background: #fff;
    left: 10%;
    transition: all 0.5s ease-in-out;
}
header.mobile-main-header a.menutoggle span:first-child{
    top:17px;
}
header.mobile-main-header a.menutoggle span:nth-child(2){
    top:24px;
}
header.mobile-main-header a.menutoggle span:nth-child(3){
    top:31px;
}
header.mobile-main-header a.menutoggle.openmenu span:first-child{
    top:20px;
    height: 4px;
    transform: rotate(45deg);
}
header.mobile-main-header a.menutoggle.openmenu span:nth-child(2){
    top:24px;
    left: 200%;
}
header.mobile-main-header a.menutoggle.openmenu span:nth-child(3){
    top:20px;
    height: 4px;
    transform: rotate(-45deg);
}

nav#mobile{
    z-index: 299;
    position: fixed;
    left: 0;
    top:-100%;
    height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    overflow-y: scroll;
    background: white;
    width: 100vw;
    transition: all 0.5s ease-in-out;
}
nav#mobile.openmenu{
    top: 74px;
}

nav#mobile ul.first-ul{
    padding-left: 0;
}
nav#mobile ul.first-ul > li {
    border-bottom: 1px solid rgba(133, 123, 148, 0.42);
    display: block;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 10px;
}
nav#mobile ul.first-ul > li:last-child{
    border-bottom: none;
}
nav#mobile ul.first-ul > li > a{
    color: var(--clr1_2);
    font-size: 1.5em;
    font-weight: 500;
    display: block;
}
nav#mobile ul.first-ul > li > a i{
    transform: rotate(0);
    transition: all 0.5s ease-in-out;
}
nav#mobile ul.first-ul > li.has-sub-menu > a{}
nav#mobile ul.first-ul > li.has-sub-menu > div.sub-menu{
    max-height: 0;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}
nav#mobile ul.first-ul > li.has-sub-menu.open-sub > div.sub-menu{
    max-height: 1500px;
}
nav#mobile ul.first-ul > li.has-sub-menu.open-sub a i{
    transform: rotate(180deg);
}
nav#mobile ul.first-ul > li.has-sub-menu > div.sub-menu > ul{
    padding-left: 15px;
}
nav#mobile ul.first-ul > li.has-sub-menu > div.sub-menu > ul > li{
    list-style-type: none;
    padding-top: 5px;
    padding-bottom: 5px;
}
nav#mobile ul.first-ul > li.has-sub-menu > div.sub-menu > ul > li > a{
    color: var(--clr1_3);
    font-size: 1.3em;
    display: block;
}

section.slider-area{
    background: linear-gradient(to top, #f1eff8,#dad6e8);
    height: 40vh;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    margin-top: 90px;
}
section.slider-area .hero{
    font-weight: 700;
    margin-bottom: 0;
    font-size: 3em;
    font-family: var(--montserrat);
    letter-spacing: -1px;
    color: var(--clr1_2);
    line-height: 1em;
    transition: all 0.2s ease-in-out;
    text-align: left;
    transform: perspective(100px) translateZ(0);
}
section.slider-area p.hero{
    font-weight: 300;
    margin-bottom: 0;
    font-size: 2em;
    font-family: var(--montserrat);
    letter-spacing: 0;
    color: #000000;
    line-height: 1.5em;
    transition: all 0.2s ease-in-out;
    text-align: left;
    transform: perspective(100px) translateZ(0);
}

section.slider-area:hover h3.hero{
    transform: perspective(100px) translateZ(20px);

}
section.slider-area:hover p.hero{
    transform: perspective(100px) translateZ(20px);

}
section.slider-area .circle1{
    border-radius: 850px;
    position: absolute;
    background: linear-gradient(to top, #afabc9, #c0c0c0);
    opacity: 0;
    width: 550px;
    height: 550px;
    mix-blend-mode: multiply;
    right: 10%;
    bottom: -20%;
}
section.slider-area .circle2{
    border-radius: 1950px;
    position: absolute;
    background: linear-gradient(to top, #afabc9, #40276566);
    opacity: 0.5;
    width: 50%;
    height: 250%;
    mix-blend-mode: multiply;
    animation: slider-circle2 20s ease-in-out infinite;
    right: 10%;
    bottom: -50%;
}
@-webkit-keyframes slider-circle2 {
    0%{
        right: 10%;
        bottom: -50%;
    }
    50%{
        right: 10%;
        bottom: 10%;
    }
    100%{
        right: 10%;
        bottom: -50%;
    }
}
.slider-icon{
    max-height: 70%;
    display: inline-block;
    filter: drop-shadow(2px 4px 18px #00000080);
    transition: all 0.5s ease-in-out;
    transform-origin: 50% 50%;
    transform: perspective(100px) translateZ(0);
    position: absolute;
    right: 30%;
    top: 15%;
}
.slider-area:hover .slider-icon{
    transform: perspective(100px) translateZ(30px);
    max-height: 800px;

    filter: drop-shadow(2px 4px 18px #282828) blur(30px);
}
.slider-bottom-sentence{
    transition: all 0.5s ease-in-out;
}
.slider-bottom-sentence{
    color:WHITE !important;
    font-size: 1.2em;
}
.hero-1{
    font-size: 2em;
}

div.main-services{}
div.main-services .img-box{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 240px;
}
div.main-services .title-box{
    display: flex;
    align-items: center;
    height: 240px;
}
div.main-services .title-box h1,
div.main-services .title-box h2,
div.main-services .title-box h3,
div.main-services .title-box h4,
div.main-services .title-box h5,
div.main-services .title-box p,
div.main-services .title-box a{
    color: WHITE;
    line-height: 1em;
}

.border-radius-top{
    border-top-left-radius: 20px ;
    border-top-right-radius: 20px ;
}

.img-box{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 30px;
    position: relative;
    margin-top: 20px;
    transition: all 0.3s ease-in-out;
    transform: perspective(50px) translateZ(0);
    border: 5px solid #dddddd;
    overflow: hidden;
}
.img-box .overlay{
    background: linear-gradient(45deg, var(--clr1_3) 60%, #1e112d);
    background-size: 200% auto;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}

.img-box .content{
    position: relative;
    z-index: 4;
     min-height: 250px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    padding: 20px;
    color: WHITE;
}
.img-box .content h2{
    font-size: 1em;
    font-weight: 700;
}

.img-box:hover{
    transform: perspective(50px) translateZ(3px);
}
.img-box:hover .overlay{
    background: linear-gradient(45deg, var(--clr1_2) 60%, transparent);
    background-size: 100% auto;
}

div.services-carousel-wrap{
    padding: 30px;
    padding-bottom: 20px;
   /* background: linear-gradient(45deg, var(--clr1_3) 60%, var(--clr1_4));*/
    background-size: 200%;
    display: flex;
    align-items: center;

    border: 1px solid #c9c9c9;
    border-radius: 60px;
    transition: all 0.3s ease-in-out;

}
div.services-carousel-wrap:hover{
    background-size: 100%;
}
div.services-carousel-wrap .item{
    border-radius: 30px;
    background: rgb(199 194 217);
}
div.services-carousel-wrap .item .carousel-service-img{
    border-radius: 30px !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 350px;
    height: 100%;

}
.main-page-services .item .img-area{

}
div.services-carousel-wrap .item .content-area{

    border-radius: 30px;
}
.main-page-services-nav a{
    margin-left: 10px;
    border-radius: 20px;
    display: inline-block;
}
.index-references-nav  a{

    display: inline-block;
}
.index-reference{
    height: 120px;
    background-size: 80% auto;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    filter: grayscale(1);
    border-radius: 10px;
    margin: 10px;
}

div.blog-card{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    border-radius: 10px;
    margin-top: 20px;
    transition: all 0.5s ease-in-out;
    transform:perspective(100px) translateZ(0);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
}
div.blog-card:hover{
    transform:perspective(100px) translateZ(5px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.29);
}

div.blog-card .overlay{
    border-radius: 10px;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    /*background: linear-gradient(45deg, #19547a, #19547aa8);*/
    background: linear-gradient(45deg, var(--clr1_3), rgb(25 84 122 / 85%));
    opacity: 1;
    position: absolute;
}
/*div.blog-card.color2 .overlay{
    z-index: 1;
    background: linear-gradient(45deg, #286956, rgb(40 105 86 / 73%));

}
div.blog-card.color3 .overlay{
    z-index: 1;
    background: linear-gradient(45deg, #422869, rgb(73 52 94 / 72%));

}*/
div.blog-card .content{
    position: relative;
    z-index: 2;
    height: 400px;
    display: flex;
    align-items: end;
    padding: 20px;
}
div.blog-card.half .content{
    height: 190px !important;
}
div.blog-card .content h2{
    font-weight: 600;
    font-size: 1.3em;
    color: WHITE;
    margin-bottom: 0;
}
div.blog-card .content p{
    color: WHITE;
    font-size: 0.9em;
}
div.blog-card .content a{

}
#orbit-demo{
    height: 400px;
}

nav#mobile .social-nav{
    padding-left: 0;
}
nav#mobile .social-nav li{



}
nav#mobile .social-nav li a{
    margin: 8px;
}
nav#mobile .social-nav li a i{}
nav#mobile .social-nav li a span{}
#orbit-demo .slot.poster{
    display: none !important;
}

#orbit-demo .progress-bar {
    display: none;
}
#orbit-demo {
    --progress-bar-color: transparent !important;
}

section.bread-area{
    padding-top: 50px;
    padding-bottom: 50px;
    min-height: 100px;
    /*display: flex;*/
    align-items: center;
    margin-bottom: 30px;
    background: #ebeef6;
    border-bottom: 1px solid #d8dbe4;
}
section.bread-area .hero{
    font-weight: 400;
    margin-bottom: 0;
    font-size: 1.5em;
}

.bread-area h1{
    font-size: 2em;
    margin-bottom: 0;
}
.page-big-image{}
.page-big-image img{
    width: 100%;
}

ul.breadcrumb{
    background: none !important;
    padding-left: 0;
    margin: 0;
    justify-content: end;
    display: none !important;
}
ul.breadcrumb li{
    display: block;
}
ul.breadcrumb li.active{}
ul.breadcrumb li a{}
ul.breadcrumb li:first-child{}
ul.breadcrumb li:last-child{}

div.page-banner{
    position: relative;
    display: flex;
    padding: 20px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 400px;
    border-radius: 30px;
    margin-bottom:20px;
    overflow: hidden;
}
div.page-banner.mini{
    height: 100px;
}

div.page-banner.banner1{
    align-items: end;
    justify-content: end;
}
div.page-banner.banner3{
    align-items: end;
    justify-content: end;
    height: 150px;
}
div.page-banner .content{
    border-radius: 30px;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    /*cursor: url(../img/circle-opacity.png), auto;*/
}
div.page-banner.banner1 .content{
    align-items: end;
    justify-content: end;
    text-align: left;
    color: WHITE;
}
div.page-banner .overlay{
    border-radius: 30px;
    position: absolute;
    right: 0;
    top: 0;
    padding: 20px;
    width: 80%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(45deg, black, transparent);
    mix-blend-mode: multiply;
    overflow: hidden;
}
div.page-banner.banner1 .content::after{
    width: 850px;
    height: 850px;
    border-radius: 850px;
    background: var(--clr1_3);
    opacity: 0.4;
    right: -225px;
    bottom: -225px;
    content:'';
    position: absolute;
    z-index: -1;
    overflow: hidden;
    animation: slider-circle2 20s ease-in-out infinite;
}
div.page-banner.no-after .content::after{
    display: none !important;
}
div.page-banner.mini h3{
    font-size: 1.1em;
}
div.page-banner.mini.banner1 .content::after{
    display: none;
}

div.page-banner.banner2{}
div.page-banner.banner2 .overlay{
    background: linear-gradient(to left, var(--clr1_3) 50%, transparent);
    mix-blend-mode: unset !important;
}
div.page-banner.banner2 .overlay.overlay2{

    background: linear-gradient(to top, var(--clr1_3) 50%, transparent);

    width: 100%;
    height: 50%;
    top: 50%;
    mix-blend-mode: multiply !important;

}
div.page-banner.banner3 .overlay{
    background: linear-gradient(to left, var(--clr1_3) 50%, transparent);
    mix-blend-mode: unset !important;
}
div.page-banner.banner2 .content{
    display: flex;
    align-items: end;
    justify-content: end;
    text-align: right;
    color: WHITE;
}
div.page-banner.banner3 .content{
    display: flex;
    align-items: end;
    justify-content: end;
    text-align: right;
    color: WHITE;
}
div.page-banner.banner2 .content i{
    display: inline-block;
    padding: 10px;

    font-size: 4em;
    margin: 15px;
    width: 120px;
    height: 120px;
    text-shadow: 0 0 10px #00000070;
    border-radius: 20px;
    border: 1px solid var(--clr1_4);
    background: var(--clr1_4);
    opacity: 0.5;
    position: absolute;
    bottom: 100%;
    right: 0;
    text-align: center;
}
div.page-banner.banner2 .content::after{
    display: none;
}
.no-after::after{
    display: none;
}

.reference-logo-box{
    background: white;
    display: block;
    height: 130px;
    background-size: 60% auto;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;

}
.reference-logo-box:hover span.img{
    background-size: 70% auto;

}
.reference-logo-box span.img{
    transition: all 0.3s ease-in-out;
    background-size: 60% auto;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #dfdfdf59;
    filter: grayscale(1);
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    position: absolute;
}
/*
.reference-logo-box::after{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    transition: all 0.5s ease-in-out;

    opacity: 0.6;
    mix-blend-mode: multiply;
    content:'';
    z-index: 2;
}
.reference-logo-box:hover::after{
    width: 100%;
}*/

.square{
    border-radius: 30px;
    display: flex;
    align-items: center;
    height: 100%;
    border: 1px solid #dddddd;
}
form{}
/*form input[type="text"],
form input[type="number"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form input[type="datetime-local"],
form textarea*/
.kariyerpopup .forminput{
    border:1px solid #858585;
}
.kariyerpopup .forminput::placeholder{
    color: #000 !important;
    font-weight:600;
}
.information-list{
    margin-top: 10px;
    padding-left: 20px;
}
.information-list li{
    margin-top: 20px;
}
.forminput
{
    display: block;
    width: 100%;
    padding: 5px;
    border: 1px solid #c1c1c1;
    height: 40px;
    border-radius: 5px;
    transform: perspective(50px) translateZ(0px);
    transition: all 0.5s ease-in-out;
    outline: none !important;
    box-shadow: 0 0 10px transparent;
}
form.form label{
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 1.1em;
    color: var(--clr1_2);
    border-bottom: none !important;
    padding: 2px 5px;
}
form.form label.check{
    color:var(--pagefont_clr);
    font-weight: 400;
}
form.form label.check a{
    color: var(--clr1_3);
    font-weight: 700;
}
textarea.forminput{
    height: auto !important;
}
.forminput:hover,
.forminput:active{
    transform:perspective(50px) translateZ(2px);

    border: 2px solid var(--clr1_4);
}
.forminput::placeholder{
    font-size: 0.9em;
    text-transform: capitalize;
    opacity: 0.5;
}
.form button{
    outline: none !important;
    box-shadow: none !important;
    border-radius: 20px;
    border:none !important
}
.contact-block{}
.contact-block p{
    font-weight: 500;
}
.contact-block strong{
    display: block;
}


div.carrier-card {
    border-radius: 10px;
    padding: 0;
    border: 1px solid #dddddd;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 0 10px transparent;
    position: relative;
    margin-top: -2px;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

div.carrier-card:hover {

}

div.carrier-card .header-1 {
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #dddddd;
    height: 30px;
    display: flex;
    align-items: center;
    background: #2d2d2d;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

div.carrier-card:hover .header-1 {
    background: #3a3a3a;
}

div.carrier-card .header-1 p {
    padding: 0;
    font-size: 1em;
    padding-right: 10px;
    text-align: right !important;
    margin: 0;
    width: 100%;
    opacity: 1;
    color: white;
}

div.carrier-card .header-1 p span {
    position: absolute;
    left: 10px;
    text-transform: uppercase;
    font-weight: 600;
    color: white;
}

div.carrier-card .container-1 {
    margin-top: 30px;
    padding: 20px;
}

.table-carrier {
}

.table-carrier tbody {
}

.table-carrier tbody tr {
}

.table-carrier tbody tr td {
}

.table-carrier tbody tr td:first-child {
    background: #dadada;
    color: black;
}

.table-carrier tbody tr td:last-child {
}

.table-carrier tbody tr.inverse {
    background: var(--gray4);
    color: white;
}

.table-carrier tbody tr.inverse td {
}

.table-carrier tbody tr.inverse td p, .table-carrier tbody tr.inverse td a {
    color: white;
}

.table-carrier tbody tr.inverse td a:hover {
    color: white;
}

.table-carrier tbody tr.inverse td:first-child {
    background: var(--gray4) !important;
}

.table-carrier tbody tr.inverse td:last-child {
}

.carrier-subscription {
    background: var(--gray2);
    padding: 20px;
}

.kariyerpopup {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: white;
    box-shadow: 0 0 30px;
    display: flex;
    transform-origin: 50% 0;
    transition: all 0.5s ease-in-out;
    opacity: 0;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

.kariyerpopup.actived {
    top: 0;
    opacity: 1;
    z-index: 400;

}

footer{

    background: #f4f4f4;

    padding: 30px;
}

footer .content-link{
    padding-left: 0;
}
footer .content-link li{
    list-style-type: none;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dddddd;
}
footer .content-link li a{
    color: var(--pagefont_clr);
}
footer .footer-logo{
    display: inline-block;
    max-width: 170px;
}
footer .footer-logo img{
    display: block;
}

.page-details h2 {
    font-size: 4em; font-family: var(--oswald);
}


.user-info {
    border: 1px solid #cfcfcf;

}

.user-info > div {
   /* border-bottom: 1px solid #cfcfcf;*/
    padding-top: 10px;
    padding-bottom: 10px;
}

.user-info > div:nth-child(2n+1) {
   /* border-right: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    background: #cfcfcf;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 1px;*/
    background: #e8e8e8;
    /*text-transform: uppercase;*/
    font-weight: 400;
    letter-spacing: 1px;
}


.bg_color_gray_brand {
    background-color: var(--clr1_3) !important;
    background-image: url(../img/ptn-1.png);
    background-repeat: repeat;
    background-position: center;
    background-size: 114px auto;
    color: WHITE;
}

.svg1 {
    fill: WHITE;
    position: absolute;
    left: 0;
    top: -70px;
    opacity: 0.1;
    width: 324px;
    height: 402px;
    font-size: 10em;
    color: WHITE;
}


.paymentblock {
    padding: 20px;
}

.paymentblock .paymentbox {
    background-color: #ffffff;
    background-image: url(../img/ptn-2.png);
    background-size: 120px auto;
    background-repeat: repeat;
    box-shadow: 1px 1px 10px #9a9a9a;
    border-radius: 10px;
}

.paymentblock .paymentbox .banklogo {
    width: 100%;
    border-bottom: 1px solid #dddddd;
    display: block;
    padding: 10px;
}

.paymentblock .paymentbox .banklogo img {
    display: inline-block;
    max-width: 50%;
    max-height: 30px;
}

.paymentblock .paymentbox .banklogo .status {
    display: block;

    color: WHITE;
    padding: 2px;
    border-radius: 15px;
    text-align: center;
}

.paymentblock .paymentbox .banklogo .status.wait {
    background: #b0191e;
}

.paymentblock .paymentbox .banklogo .status.payed {
    background: #246e24;
}


.paymentblock .paymentbox .banklogo span {
    display: block;
}

.paymentblock .paymentbox .price {
    font-weight: 700;
    letter-spacing: 2px;
    color: BLACK;
    border-bottom: 1px solid #dddddd;
    padding: 5px;
    font-size: 1.5em;
}

.paymentblock .paymentbox .info {
    display: block;
    width: 100%;
    border-bottom: 1px solid #dddddd;
    padding: 5px;
}

.paymentblock .paymentbox .info p {
    margin: 2px;
    display: block;
    padding: 2px;
    border-bottom: 1px solid #dddddd;
}

.paymentblock .paymentbox .info > p:last-child {

    border-bottom: none !important;
}

.paymentblock .paymentbox .info p strong {
}

.paymentblock .paymentbox .menu {
    width: 100%;
    display: block;
}

.paymentblock .paymentbox .menu a {
    margin: 0 !important;
    width: 33.3%;
    font-size: 0.9em !important;
    padding: 7px !important;
    display: inline-block !important;
    margin-left: -4px !important;
    text-align: center;
    border-left: 1px solid #dddddd;
}

.paymentblock .paymentbox .menu a.paybtn {
    background: #b0191e;
    border-bottom-left-radius: 10px;
    color: WHITE;
}

.paymentblock .paymentbox .menu a.half {
    width: 49%;
}

.paymentblock .paymentbox .menu a:first-child {
    margin-left: 1px !important;
    border-left: none !important;
}

.paymentblock .paymentbox .menu a:last-child {
}

.d404{}
.d404 h1{
    font-size: 12em;
    font-weight: 500;
    font-family: var(--oswald);
    display: flex;
    align-items: center;
    justify-content: center;

}
.d404 p{
    display: inline-block;

    padding: 5px 20px;
    border-radius: 10px;
}
.d404 img{
    max-width: 150px;
}
.d404 p:first-child{}
.d404 p:last-child{}

.card{
    background-color: #ffffff;
    margin-bottom: 30px;
    border-radius: 4px;
    border: none;
    -webkit-box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.05);
    transition: all 0.3s ease-in-out;
    transform: perspective(100px) translateZ(0px);
}
.card:hover{
    box-shadow: 0px 0px 13px 0px rgb(7 4 4 / 11%);
}
.card-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 30px;
    text-transform: capitalize;
    color: #112e37;
}

.border-line-1{
    border-color: #d8dbe4;
}

.bank-list{
    padding-left: 0;
}

.mini-bank-logo{
    background: white;
    float: left;
    list-style-type: none;
    border: 1px solid #d8dbe4;
    display: flex;
    flex-direction: column;
    margin: 5px;
    border-radius: 6px;
}
.mini-bank-logo .img{
    width: 70px;
    height: 50px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.mini-bank-logo .title{
    color: black;
    border-top: 1px solid #dddddd;
    text-align: center;
    font-size: 0.8em;
    font-weight: 700;
}
.mini-bank-logo .description{
    color: white;
    border-top: 1px solid #dddddd;
    text-align: center;
    font-size: 0.9em;
    font-weight: 700;
    background-color: green;
}
.transaction-table .collapse{
    transition: all 0.5s ease-in-out;
    background: #ddd !important;
}

.invoice-box{}
.invoice-box h1{
    font-size: 1em;
}

.invoice-bank-btn{
    display: inline-flex;
    height: 30px;
    align-items: center;
    position: relative;
    left: 0;
    padding: 8px;
    margin: 0;
    border:none !important;

}

.invoice-bank-btn:hover{
    color: WHITE;
    background-color:var(--green);
}

.payinfo .card-title {
    margin-bottom: 0px;
    padding: 1.25rem;
}

.payinfo .card-title .hero-2 {
    font-size: 24px;
}

.payinfo .card-body .banklogo {
    width: 150px;
    height: 75px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.piece-box button {
    width: 100%;
}

.collapse.show p, .collapse.show p span {
    color: white !important;
}