@charset "utf-8";
/* CSS Document */

@import url('owl.carousel.css'); 
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Alegreya+SC:400,500,700,800,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans: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=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@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');

@font-face {
    font-family: 'SofiaProBold';
    src: url('../fonts/SofiaProBold.ttf');
}
@font-face {
    font-family: 'SofiaProRegular';
    src: url('../fonts/SofiaProRegular.ttf');
}
@font-face {
    font-family: 'SofiaProSemiBold';
    src: url('../fonts/SofiaProSemiBold.ttf');
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px;
    color: #3a3a3a;
    font-weight: 400; 
    position: relative;
}

* {
    margin: 0px;
    padding: 0px;
}

.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
    line-height: 0;
}

.clearfix:after {
    clear: both;
}

.clr,
.clear {
    clear: both;
}

header,
footer,
aside,
article,
section,
detail,
nav,
figure {
    position: relative;
    
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    padding: 0;
}

ul,
li,
ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    outline: none !important;
}

a:hover,
a:focus {
    text-decoration: none !important;
    outline: none;
}

figure{ margin: 0; }

img {
    border: 0;
    outline: none;
    max-width: 100%;
}

input[type="text"],
input[type="password"],
select,
textarea,
input[type="button"] {
    max-width: 100%;
}

table {  width: 100%; }
p { margin: 0; padding: 0; }
.fltL { float: left; }
.fltR { float: right !important; }
.padding_none { padding: 0 !important;}
.border_none{border:none !important}
.navbar-toggle {  background-color: #fff !important; }
.icon-bar { background-color: #000 !important; }
.p_right0{ padding-right:0px !important }
.p_left0{ padding-left:0px !important }

.p_top50{ padding-top: 50px; }
.p_bottom50{ padding-bottom: 50px; }

.container{max-width: 1170px;}

.TitleBox{margin:0 0 50px;font-family: 'Poppins';}
.TitleBox h2{position:relative;margin:0;text-align:center;text-transform:capitalize;font-weight:600;color:#464646;font-size:40px;letter-spacing:.5px;line-height:35px}
.TitleBox h2 span{color:#26a9e1}
.TitleBox p{font-weight:400;font-size:16px;color:#000;line-height:30px;text-align:center;margin-top:15px;font-family:'Roboto'}






.WhyShouldArea{padding:0 60px 100px}
.WhyShouldArea .WhyShouldLeft ul li{border-bottom:1px solid #ddd;padding:0 0 15px 0;margin:0 0 15px 0}
.WhyShouldArea .WhyShouldLeft ul li h4{font-size:18px;color:#000;font-weight:600;line-height:28px;margin:0 0 5px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.WhyShouldArea .WhyShouldLeft ul li p{font-size:14px;line-height:26px;font-weight:500;color:#626262;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 10px 0}
.WhyShouldArea .WhyShouldLeft ul li aside{display:flex;align-items:center;justify-content:space-between}
.WhyShouldArea .WhyShouldLeft ul li aside a{color:#26A9E1;font-weight:500;font-size:14px;display:flex;align-items:center}
.WhyShouldArea .WhyShouldLeft ul li aside a .Icon{width:20px;height:20px;margin:0 0 0 5px}
.WhyShouldArea .WhyShouldLeft ul li aside h6{color:#000;font-size:14px;font-weight:600}

.WhyShouldBox{position:relative}
.WhyShouldBox figcaption{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff}
.WhyShouldBox figcaption p{font-size:15px;font-weight:500;margin:0 0 10px 0}
.WhyShouldBox figcaption p span{width:10px;height:10px;display:inline-block;background-color:#26A9E1;border-radius:10px;margin:0 5px 0 0}
.WhyShouldBox figcaption h4 { font-weight: 600; font-size: 28px; line-height: 50px; margin: 0 0 20px 0;}
.WhyShouldBox figcaption a{border:2px solid #26A9E1;color:#26A9E1;font-size:15px;font-weight:600;padding:12px 30px;display:inline-block;border-radius:10px}

.WhyShouldArea .WhyShouldRight .owl-carousel .owl-dots{ text-align: center; position: absolute; width: 100%; bottom: 20px;}
.WhyShouldArea .WhyShouldRight .owl-carousel .owl-dots .owl-dot{margin:0 5px;outline:0}
.WhyShouldArea .WhyShouldRight .owl-carousel .owl-dots .owl-dot span{display:block;width:15px;height:15px;background:#fff;border-radius:10px;opacity:.3}
.WhyShouldArea .WhyShouldRight .owl-carousel .owl-dots .owl-dot.active span{background-color:#26A9E1;opacity:1}

ol[itemtype="https://schema.org/BreadcrumbList"] { display:none }
ul[itemtype="https://schema.org/BreadcrumbList"] { display:none }


.EasilyManageWide {padding: 65px 50px; background-color: rgba(21,25,28,1);}
.EasilyManageWide .EasilyBoxLeft h2 {font-weight: 600; font-size: 48px; color: #fff;}
.EasilyManageWide .EasilyBoxRight p {font-weight: 400; font-size: 16px; color: #fff; font-weight: 400; line-height: 28px;}

.EasilyManageWide .BlueBoxArea {background-color: rgba(54, 118, 224, 1); padding: 20px 0px 0 25px; line-height: 40px;height: 100%;}
.EasilyManageWide .BlueBoxArea figure {text-align: right;}
.EasilyManageWide .BlueBoxArea h4 {font-size: 22px; font-weight: 600; letter-spacing: 0.1px; line-height: 30px; margin: 0 0 20px 0; font-family: 'Inter'; color: #fff;}
.EasilyManageWide .BlueBoxArea p {font-size: 16px; font-weight: 400; letter-spacing: 0.2px; line-height: 30px; font-family: 'Inter'; color: #fff; margin: 0 25px 0 0 ;}
.EasilyManageWide .PinkBoxArea {background-color: rgba(255, 176, 198, 1); margin: 0 0 5px 0; padding: 50px 50px 0 50px; display: flex; justify-content: space-between;}
.EasilyManageWide .PinkBoxArea.Blue {background-color: rgba(194, 216, 252, 1);}
.EasilyManageWide .PinkBoxArea h6 {color: rgba(39, 46, 53, 1); font-weight: 600; font-size: 22px; margin: 10px 0 20px 0;}
.EasilyManageWide .PinkBoxArea p {color: rgba(39, 46, 53, 1); font-weight: 400; font-size: 16px; line-height: 28px; letter-spacing: 0.21px;}
.EasilyDirectArea {display: flex; height: 95vh; padding: 0;}
.EasilyDirectArea .EasilyDirectAreaLeft {width: 50%;}
.EasilyDirectArea .EasilyDirectAreaLeft img {height: 100%; width: 100%;}
.EasilyDirectArea .EasilyDirectAreaRight {display: flex; flex-direction: column; justify-content: center;padding: 0 50px 0 25px;}
.EasilyDirectArea .EasilyDirectAreaRight.EasilyDirectAreaRight2 {padding: 50px;}
.EasilyDirectArea .EasilyDirectAreaRight { background-color: rgba(21, 25, 28, 1); width: 50%;}
.EasilyDirectArea .EasilyDirectAreaRight h3 {font-size: 38px; color: #fff; font-weight: 600; margin: 0 0 30px 0;}
.EasilyDirectArea .EasilyDirectAreaRight p {font-size: 16px; color: #fff; font-weight: 400; line-height: 28px;}

.OverDownloadArea {padding: 100px 50px;}
.OverDownloadArea .OverDownloadLeft {padding: 0 25px 0 0;}
.OverDownloadArea .OverDownloadLeft h1{color: rgba(21, 25, 28, 1); font-size: 40px; margin: 0 0 20px 0; font-weight: 600;}
.OverDownloadArea .OverDownloadLeft p{color: rgba(21, 25, 28, 1);}
.OverDownloadArea .OverDownloadLeft .UptimeBox {border-bottom: 1px solid #ddd; padding: 30px 50px 30px 0; margin: 0 0 40px 0; display: flex; justify-content: space-between; width: 90%;}
.OverDownloadArea .OverDownloadLeft .UptimeBox h2 {font-weight: 600;font-size: 30px; color: rgba(21, 25, 28, 1);}
.OverDownloadArea .OverDownloadLeft .UptimeBox h2 span {font-weight: 600;font-size: 30px; color: rgba(255, 43, 103, 1);}
.OverDownloadArea .OverDownloadLeft .UptimeBox h5 {font-size: 14px; color: rgba(21, 25, 28, 1);}
.OverDownloadArea .OverDownloadRight {padding: 0 0 0 0; text-align: center;}

.OverDownloadArea .OverDownloadLeft .RatingBoxMain {display: flex;}
.OverDownloadArea .OverDownloadLeft .RatingBoxMain .RatingBoxArea h6 {margin: 10px 0 20px 0; font-size: 14px; font-weight: 400;}
.OverDownloadArea .OverDownloadLeft .RatingBoxMain .RatingBoxArea h6 span{color: rgba(21, 25, 28, 1); font-size: 28px; font-weight: 600;}
.OverDownloadArea .OverDownloadLeft .RatingBoxMain .RatingBoxArea:first-child {margin-right: 75px;}


.CaseStudyArea {padding: 0 50px 100px; position: relative;}
.CaseStudyArea .CaseStudyAreaOverlay {position: absolute; left: 0; bottom: 0;}
.CaseStudyArea .section-title {text-align: center;margin: 0 0 50px 0;}
.CaseStudyArea .section-title h2 {font-weight: 600; color: rgba(21, 25, 28, 1); font-weight: 600; margin: 0 0 10px 0; font-size: 38px;}
.CaseStudyArea .section-title p {font-size: 16px;}
.CaseStudyArea .ProjectOverviewLeft .RoleBox {position: relative; padding: 0 0 0 85px;}
.CaseStudyArea .ProjectOverviewLeft .RoleBox .RoleBoxOverlay {position: absolute; left: 0; top: 0;}
.CaseStudyArea .ProjectOverviewLeft .RoleBox p {margin: 0 0 10px 0; font-weight: 400;}
.CaseStudyArea .ProjectOverviewLeft .RoleBox h4 {font-weight: 600; color: rgba(21, 25, 28, 1);}
.ProjectOverviewLeft h2 {color: rgba(21, 25, 28, 1); font-size: 40px; font-weight: 600; margin: 0 0 15px 0;}
.ProjectOverviewLeft p {font-size: 14px; color: rgba(21, 25, 28, 1); margin: 0 0 50px 0;}
.ProjectOverviewRight {position: relative; z-index: 1;}
.ProjectOverviewRight .ProjectOverviewRightOverlay {position: absolute; z-index: -1; left: 0; top: 0; right: 0; bottom: 0;
    animation-name: sample2;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    display: flex; align-items: center; justify-content: center;
}


@keyframes sample2 {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}


.ProjectOverviewLeft .RoleBox .ToolUsedImages img {margin-right: 10px;}
.ProjectOverviewLeft .RoleBox .ToolUsedImages {display: flex; flex-wrap: wrap;}


.FidelityDesignArea {padding: 75px 50px 60px; background-color: rgba(21, 25, 28, 1); position: relative;}
.FidelityDesignArea::before {content: ""; position: absolute; background-color: #fff; left: 0; top: 0; right: 0; bottom: 60%;}
.FidelityDesignArea .section-title {text-align: center; margin: 0 0 85px 0; z-index: 1; position: sticky;}
.FidelityDesignArea .section-title h2 {
    font-weight: 600;
    color: rgba(21, 25, 28, 1);
    font-weight: 600;
    margin: 0 0 15px 0;
    font-size: 38px;
}

.FidelityDesignArea .FidelityDesignBox {margin: 0 0 75px 0;}
.UserReviewArea {font-family: 'Inter';}
.UserReviewArea {background-color: rgba(235, 243, 254, 1); padding: 70px 50px; font-family: 'Inter';}
.UserReviewArea h1 {font-size: 40px; color: rgba(21, 25, 28, 1); font-weight: 600; margin: 0 0 30px 0;}
.UserReviewArea p {font-weight: 400; font-size: 16px;}
.UserReviewArea .Para {margin: 0 0 50px 0;}
.UserReviewArea .UserReviewBox {background-color: rgba(21, 25, 28, 1); padding: 25px; height: 100%;}
.UserReviewArea .UserReviewBox .UserReviewDetails {position: relative; margin: 0 0 35px 0; padding-left: 75px;}
.UserReviewArea .UserReviewBox .UserReviewDetails .Overlay {position: absolute; left:0;}
.UserReviewArea .UserReviewBox .UserReviewDetails h6 {font-size: 18px; font-weight: 600; letter-spacing: 0.1px; color: #fff; margin: 0 0 10px 0;}
.UserReviewArea .UserReviewBox .UserReviewDetails p {font-size: 16px; font-weight: 400; letter-spacing: 0.2px; color: rgba(126, 139, 153, 1);}
.UserReviewArea .UserReviewBox p {color: #fff; font-weight: 400; font-size: 16px;}



.StyleGuideArea {background-color: rgba(21, 25, 28, 1); font-family: 'Inter'; position: relative; padding: 50px 60px;}
.StyleGuideArea .section-title {margin-bottom: 40px;}
.StyleGuideArea .section-title h2 {
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
    margin: 0 0 15px 0;
    font-size: 38px;
    position: relative;
    display: inline-block;
}
.StyleGuideArea .section-title h2::after {position: absolute; left: 0; content: ""; bottom: -10px; background-color: rgba(54, 118, 224, 1); height: 5px; border-radius: 30px; width: 60%;}

.StyleGuideArea .Colorpalette h4 {font-size: 26px; color: #fff; font-weight: 600; margin: 0 0 30px 0;}


.Colorpalette .ColorpaletteBox {margin: 0 0 30px 0;}
.Colorpalette .ColorpaletteBox h6 {color: #fff; font-weight: 400; font-family: 'Inter'; font-size: 14px;}
.Colorpalette h1 {font-size: 100px; color: rgba(94, 107, 129, 1); font-weight: 700; font-family: 'Plus Jakarta Sans';}
.StyleGuideArea .CircleOverlay {position: absolute; right: 0; top: 50px;}
.Colorpalette .TypoGraphyHeaderBox {margin: 50px 0 50px 50px;}
.Colorpalette .TypoGraphyHeaderBox h5 {color: rgba(255, 255, 255, 1); font-weight: 600; font-family: 'Inter'; font-size: 20px; margin: 0 0 10px 0;}
.Colorpalette .TypoGraphyHeaderBox p {color: rgba(255, 255, 255, 1); font-weight: 400; font-family: 'Inter'; font-size: 12px;}

.TypoGraphyBox {position: relative; padding: 10px 5px 10px 50px; background-color: #fff; display: flex; flex-direction: column; justify-content: center;}
.TypoGraphyBox span {position: absolute; background-color: rgba(21, 25, 28, 1); left: 5px; padding: 5px; width: 36px; color: #fff; display: inline-flex; align-items: center; justify-content: center; height: 36px; border-radius: 10px;}
.TypoGraphyBox h6 {font-size: 12px; font-weight: 600; color: rgba(21, 25, 28, 1);}
.TypoGraphyBox p {font-size: 11px; font-weight: 500; color: rgba(94, 107, 129, 1)}

.SizeTable {width: 55%; margin: 40px 0 0 0; font-family: 'Plus Jakarta Sans'; }
.SizeTable table thead {background-color: #fff;}
.SizeTable table thead tr th {font-weight: 400; font-size: 18px; color: rgba(21, 25, 28, 1);}
.SizeTable table thead tr th, .SizeTable table tbody tr td {padding: 20px 0px;  text-align: center;}
.SizeTable table tbody tr td {color: #fff;}
.SizeTable table tbody tr:first-child  td{font-size: 24px; font-weight: 700;}
.SizeTable table tbody tr:nth-child(2) td {font-size: 20px; font-weight: 700;}
.SizeTable table tbody tr:nth-child(3) td {font-size: 18px; font-weight: 600;}
.SizeTable table tbody tr:nth-child(4) td {font-size: 16px; font-weight: 600;}
.SizeTable table tbody tr:nth-child(5) td {font-size: 14px; font-weight: 600;}
.SizeTable table tbody tr:nth-child(6) td {font-size: 12px; font-weight: 600;}
.SizeTable table tbody tr:nth-child(7) td {font-size: 16px; font-weight: 600;}

.IconGraphyBox h6 {font-size: 18px; color: rgba(255, 255, 255, 1); letter-spacing: 0.2px; margin: 0 0 20px 0;} 

.HowDoesWorkArea {font-family: "Inter"; padding: 0 0 100px 0;}
.HowDoesWorkArea .Section-title {text-align: center; padding: 150px 0 100px ;}
.HowDoesWorkArea .Section-title h2 {font-size: 38px; font-weight: 600; color: #fff; margin: 0 0 15px 0;}
.HowDoesWorkArea .Section-title p {font-size: 14px; font-weight: 400; color: #fff;}
.HowDoesWorkArea .hdwaBox {text-align: center; position: relative;}
.HowDoesWorkArea .hdwaBoxOverlay {position: absolute; left: 50%; top: -40%; z-index: 2; width: 100%;}
.HowDoesWorkArea .hdwaBox h5 {font-weight: 600; font-size: 22px; font-weight: 600; color: #fff; margin: 10px 0 15px 0;}
.HowDoesWorkArea .hdwaBox p {margin: 10px 0 0 0; color: #fff; font-weight: 400; letter-spacing: 0.2px; font-family: 'Inter';}

.hdwaBoxOverlay3 {position: relative; display: inline-block; }
.hdwaBoxOverlay3 span {position: absolute; right: -70px; top: -70px;}

.hdwaBox3 {position: relative;}
.hdwaBoxOverlayLast {position: absolute; left: -50%; bottom: -40%; z-index: 2; width: 100%;}

.VisualDesignArea .Section-title {text-align: center; padding: 50px 0 50px ;}
.VisualDesignArea .Section-title h2 {font-size: 38px; font-weight: 600; color: #fff; margin: 0 0 15px 0;}

.VisualDesignCommon {text-align: center;}
.VisualDesignCommon2 {margin: 150px 0 0 0;}

.VisualDesignCommonLeft {text-align: right;}
.VisualDesignCommonRight {text-align: left;}

.VisualDesignCommonLeft .VisualDesignBox {border-right: 1px solid rgba(255, 43, 103, 1); padding: 0 15px 0 0; position: relative;}
/* .VisualDesignCommonLeft .VisualDesignBox::after { content: ""; position: absolute; width: 20%; left: 100%; top: 50%; transform: translateY(-50%); border: 1px dashed rgba(255, 43, 103, 1); height: 2px; background-color: transparent;} */
.VisualDesignCommonLeft .VisualDesignBox .VisualDesignCircleTop {content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    right: -6px;
    top: 0;
    background: rgba(21, 25, 28, 1);
    border: 2px solid rgba(255, 43, 103, 1);}
    .VisualDesignCommonLeft .VisualDesignBox .VisualDesignCircleBottom {content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50px;
        right: -6px;
        bottom: 0;
        background: rgba(21, 25, 28, 1);
        border: 2px solid rgba(255, 43, 103, 1);} 
.VisualDesignCommon .VisualDesignBox h5{ color: rgba(255, 43, 103, 1); font-size: 20px; margin: 0 0 10px 0; }
.VisualDesignCommon .VisualDesignBox p{ color: rgba(255, 255, 255, 1); font-size: 16px; font-weight: 300;}
.VisualDesignCommonLeft .VisualDesignBox1 {margin: 20px 0 0 0;}
.VisualDesignCommonLeft .VisualDesignBox2 {margin: 60px 0 0 0;}
.VisualDesignCommonLeft .VisualDesignBox3 {margin: 155px 0 0 0;}
.VisualDesignCommonRight .VisualDesignBox4 {margin: 50px 0 0 0;}
.VisualDesignCommonRight .VisualDesignBox5 {margin: 70px 0 0 0;}
.VisualDesignCommonRight .VisualDesignBox6 {margin: 95px 0 0 0;}
.VisualDesignCommonLeft .VisualDesignBox7 {margin: 250px 0 0 0;}
.VisualDesignCommonRight .VisualDesignBox8 {margin: 50px 0 0 0;}





.VisualDesignCommonRight .VisualDesignBox {border-left: 1px solid rgba(255, 43, 103, 1); padding: 0 0 0 15px; position: relative;}
/* .VisualDesignCommonRight .VisualDesignBox::after { content: ""; position: absolute; width: 23%; right: 100%; top: 50%; transform: translateY(-50%); border: 1px dashed rgba(255, 43, 103, 1); height: 2px; background-color: transparent;} */
.VisualDesignCommonRight .VisualDesignBox .VisualDesignCircleTop {content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50px;
    left: -6px;
    top: 0;
    background: rgba(21, 25, 28, 1);
    border: 2px solid rgba(255, 43, 103, 1);}
    .VisualDesignCommonRight .VisualDesignBox .VisualDesignCircleBottom {content: "";
        position: absolute;
        width: 12px;
        height: 12px;
        border-radius: 50px;
        Left: -6px;
        bottom: 0;
        background: rgba(21, 25, 28, 1);
        border: 2px solid rgba(255, 43, 103, 1);
}



.UserJourneyMap {background-color: rgba(255, 255, 255, 1); font-family: 'Inter'; position: relative; padding: 50px 60px;}
.UserJourneyMap .section-title {margin-bottom: 40px;}
.UserJourneyMap .section-title h2 {
    color: rgba(21, 25, 28, 1);
    font-weight: 600;
    margin: 0 0 15px 0;
    font-size: 38px;
    position: relative;
    display: inline-block;
}
.UserJourneyMap .section-title h2::after {position: absolute; left: 0; content: ""; bottom: -10px; background-color: rgba(54, 118, 224, 1); height: 5px; border-radius: 30px; width: 40%;}
.UserJourneyMap h3 {color: rgba(21, 25, 28, 1); font-weight: 600;margin: 25px 0 0 0;}
.UserJourneyMap p {color: rgba(94, 107, 129, 1); font-size: 20px; margin: 15px 0 0 0; font-weight: 500;}
.UserJourneyMap p span {color: rgba(54, 118, 224, 1);}

.UserJourneyMapTable {font-family: 'Inter';}
.UserJourneyMapTable table { border-collapse: separate; border-spacing: 25px;}
.UserJourneyMapTable table tbody tr:first-child td {text-align: center; color: rgba(19, 21, 26, 1); font-weight: 500; font-size: 18px;}
.UserJourneyMapTable table tbody tr td:first-child .TdBox{text-align: center; font-weight: 600; font-size: 18px; background-color: rgba(235, 243, 254, 1);}
.UserJourneyMapTable table tbody tr td {width: 20%; vertical-align: top;}
.UserJourneyMapTable table tbody tr td .TdBox {padding: 20px; background-color: rgba(242, 243, 245, 1); border-radius: 8px; color: rgba(71, 84, 103, 1); font-weight: 500; font-size: 16px;}
.UserJourneyMapTable table tbody tr td .TdBox.Action {text-align: center;}
.UserJourneyMapTable table tbody tr td .TdBox ul {padding-left: 15px;}
.UserJourneyMapTable table tbody tr td .TdBox ul li {list-style-type: disc;}

.JobYodaArea {padding: 120px 60px 60px 60px; background-color: rgba(21, 25, 28, 1); position: relative;} 
.JobYodaArea .JobYodaRight {position: relative; z-index: 2;}
.JobYodaArea .JobYodaRight .MobileOverlay {position: absolute; left: 0; top: 0; bottom: 0; right: 0; 
    animation-name: sample;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes sample {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
.JobYodaArea .JobYodaLeft figure {width: 270px;}
.JobYodaArea .JobYodaLeft h2 {font-weight: 600; font-size: 30px; color: #fff; font-family: 'Inter';line-height: 55px; margin: 50px 0 25px; z-index: 1;}
.JobYodaArea .JobYodaLeft h2 .JobSearchTitle {background-color: rgba(255, 43, 103, 1);  padding: 10px;}
/* .JobYodaArea .JobYodaLeft h2::after {content: "";   left: 0; width: 37%; top: 0;  bottom: 50%; z-index: -1; position: absolute;} */
.JobYodaArea .JobYodaLeft p {color: rgba(255, 255, 255, 1); letter-spacing: 0.2px; line-height: 28px;}
.JobYodaArea::before {content: ""; position: absolute; width: 25%; background-color: rgba(58, 134, 255, 1); top: 0; right: 0; bottom: 0;}



.JobYodaArea2 {padding: 100px 60px; background-color: rgba(21, 25, 28, 1); position: relative;} 
.JobYodaArea2 .JobYodaLeft2 .JobYodaLeftBox {margin: 0 0 50px 0; padding: 0 20px 0 0;}
.JobYodaArea2 .JobYodaLeft2 .JobYodaLeftBox h1 {font-weight: 600; font-size: 38px; color: #fff; font-family: 'Inter';  position: relative; margin: 0 0 15px 0; z-index: 1;}
.JobYodaArea2 .JobYodaLeft2 .JobYodaLeftBox p {color: rgba(255, 255, 255, 1); letter-spacing: 0.2px; line-height: 28px;}
.JobYodaArea2::before {content: ""; position: absolute; width: 25%; background-color: rgba(255, 43, 103, 1); top: 0; left: 0; bottom: 0;}
.JobYodaArea2 .CaseStudyAreaOverlay {
    position: absolute;
    right: 0;
    bottom: 0;
}

.DesignProcessArea {background-color: rgba(58, 134, 255, 1); padding: 50px;}
.DesignProcessArea .section-title {margin: 0 0 75px 0; text-align: center;}
.DesignProcessArea .section-title h2 {color: #fff; font-family: 'Inter'; font-size: 36px;}
.DesignProcessArea .DpStepBox {display: flex; justify-content: space-between;}
.DesignProcessArea .DpStepBox li {color: #fff; padding: 0 10px; text-align: center;}
.DesignProcessArea .DpStepBox li .LiBox{width: 130px; height: 130px; margin: 0 auto; color: #000; margin-bottom: 10px; position: relative; background-color: #fff; border: 1px solid rgba(255, 43, 103, 1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column;}
.DesignProcessArea .DpStepBox li .LiBox img {margin: 0 0 10px 0;}
.DesignProcessArea .DpStepBox li .LiBox h6 {font-size: 14px;}
.DesignProcessArea .DpStepBox li .LiBox::after { content: url('../images/new_img_45.png'); position: absolute; z-index: 1; left: 100%;}
.DesignProcessArea .DpStepBox li:last-child .LiBox::after {display: none;}

.ProjectTimelineArea .ProjectTimelineBox {display: flex; align-items: center;}
.ProjectTimelineArea figure {margin: 50px 0 0 0;}
.ProjectTimelineArea figure img {width: 100%;}
.ProjectTimelineArea .ProjectTimelineBox span {width: 108px; height: 108px; border-radius: 50%; display: inline-flex;}
.ProjectTimelineArea .ProjectTimelineBox span.FirstSpan {background-color: rgba(194, 216, 252, 1);}
.ProjectTimelineArea .ProjectTimelineBox span.SecondSpan {background-color: rgba(255, 176, 198, 1);}
.ProjectTimelineArea .ProjectTimelineBox span.ThirdSpan {background-color: rgba(203, 203, 203, 1)}
.ProjectTimelineArea .ProjectTimelineBox h6 {color: #000; margin-left: -35px;}


.UserDetailsArea {background-color: rgba(21, 25, 28, 1); display: flex; padding: 0 0 25px 0;}
.UserDetailsLeft {width: 35%;}
.UserDetailsLeft .UserDetailsLeftBox {background-image: url('../images/new_img_46.png'); width: 100%; height: 634px; position: relative; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 20px 25px; color: #fff; background-size: cover; background-repeat: no-repeat;}
.UserDetailsLeft .UserDetailsLeftBox::before {position: absolute; content: ""; background-image: linear-gradient(rgba(0, 9, 17, 0), rgba(0, 9, 17, 0.7)); left: 0; right: 0; bottom: 0; top: 0;}
.UserDetailsLeft .UserDetailsLeftBox h1 {font-family: 'Inter'; font-size: 36px; font-weight: 600; margin: 0 0 20px 0;}
.UserDetailsLeft .UserDetailsLeftBox h6 {font-family: 'Inter'; font-size: 16px; font-weight: 700; margin: 0 0 10px 0;}
.UserDetailsLeft .UserDetailsLeftBox h5 {font-family: 'Inter'; font-size: 22px; font-weight: 600; margin: 0 0 30px 0;}
.UserDetailsLeft .UserDetailsLeftBox figure {width: 56px;}

.UserDetailsLeft img {width: 100%;}
.UserDetailsRight {width: calc(100% - 35%);}
.PainPointsProgress .progress {border-radius: 30px; background-color: rgba(95, 95, 95, 1);}
.PainPointsProgress .progress-bar {background-color: rgba(255, 43, 103, 1);}
.PainPointsProgress .Name {margin: 0 0 25px 0;}
.PainPointsProgress .Name h6 {margin: 0 0 10px 0; color: #fff; font-size: 15px;}

.UserDetailsArea .UserDetailsRight {padding: 50px;}
.UserDetailsArea .UserDetailsRight h1 {font-weight: 600; font-family: 'Inter'; font-size: 36px; color: #fff; margin: 0 0 50px 0;}
.UserDetailsArea .UserDetailsRight .UserBioDetails h4 {font-size: 30px; font-family: 'Inter'; font-weight: 600; color: #fff; margin: 0 0 20px 0;}
.UserDetailsArea .UserDetailsRight .UserBioDetails p {font-size: 16px; font-family: 'Inter'; font-weight: 500; color: #fff;}
.UserDetailsArea .UserDetailsRight .UserBioDetails .UserBioDetailsAside{display: flex; margin: 0 0 50px 0;}
.UserDetailsArea .UserDetailsRight .UserBioDetails .UserBioDetailsAside aside:last-child{margin-left: 100px;}
.UserDetailsArea .UserDetailsRight .UserBioDetails .UserBioDetailsAside p{font-family: 'Inter'; font-weight: 500; font-size: 16px; color: #fff;}
.UserDetailsArea .UserDetailsRight .UserBioDetails .UserBioDetailsAside p span{font-family: 'Inter'; font-weight: 700; width: 125px; position: relative; display: inline-block; font-size: 16px; color: #fff;}
.UserDetailsArea .UserDetailsRight .UserBioDetails .UserBioDetailsAside p span::after {content: ":"; margin: 0 30px 0 0; right: 0; position: absolute; color: #fff;}

.PainPointsProgress {margin: 50px 0 0 0; padding: 0 0 0 25px;}
.PainPointsProgress h5 {font-size: 22px; font-weight: 600; margin: 0 0 30px 0; font-family: 'Inter'; color: #fff;}
.PainPointsProgress p {font-size: 16px; font-weight: 400;line-height: 30px; color: #fff;}




.ProgressHeading {display: flex; justify-content: space-between;}
.ProgressHeading h6 {margin: 0; color: #fff; font-size: 15px;}

.UserDetailsLeft input[type=range]{height:10px;-webkit-appearance:none;margin:0 0 25px 0;width:100%; background-color: transparent;}
.UserDetailsLeft input[type=range]:focus{outline:none}
.UserDetailsLeft input[type=range]::-webkit-slider-runnable-track{width:100%;height:10px;cursor:pointer;animate:0.2s;background:#A8A8A8;border-radius:5px}
.UserDetailsLeft input[type=range]::-webkit-slider-thumb{height:15px;width:15px;border-radius:15px;background:rgba(255, 43, 103, 1);cursor:pointer;-webkit-appearance:none;margin-top:-2px}



.PopularMenu {padding: 75px 60px;}
.PopularMenu .section-title {text-align: center; margin: 0 0 50px 0;}
.PopularMenu .section-title h6 {color: rgba(25, 25, 25, 1); margin: 0 0 25px 0; font-size: 24px; font-family: 'SofiaProBold';}
.PopularMenu .section-title p {color: rgba(25, 25, 25, 1); margin: 0 0 15px 0; font-size: 16px; font-family: 'SofiaProRegular';}
.PopularMenu .section-title h6 span {color: rgba(245, 71, 72, 1);}
.PopularMenu .PopularMenuBox {border-radius: 30px 30px 15px 15px; height: 100%; background-color: rgba(255, 221, 204, 0.25); box-shadow: 2px 5px 12px 2px rgba(0, 0, 0, 0.15); padding: 10px 0 0 0; position: relative;}
.PopularMenu .PopularMenuBox figure {margin: 0 0 30px 0;}
.PopularMenu .PopularMenuBox::before {background-image: url(../images/new_img_51.png);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    height: 123px;
    border-radius: 30px 30px 15px 15px;
}
.PopularMenu .PopularMenuBox figure {text-align: center;}
.PopularMenu .PopularMenuBox .PopularMenuDetails {text-align: center; z-index: 1; position: sticky;}
.PopularMenu .PopularMenuBox .PopularMenuDetails h6 {font-size: 18px; font-family: 'SofiaProBold'; color: rgba(29, 29, 29, 1);}
.PopularMenu .PopularMenuBox .PopularMenuDetails p {font-size: 18px; font-family: 'SofiaProRegular'; color: rgba(25, 25, 25, 1);}
.PopularMenu .PopularMenuBox .PopularMenuRating {display: flex; justify-content: space-between; padding: 15px 20px 10px; z-index: 1; position: sticky;}
.PopularMenu .PopularMenuBox .PopularMenuRating p {color: rgba(29, 29, 29, 1); font-size: 16px;}


.UserPersonaArea { padding: 50px 100px;}
.UserPersonaArea .section-title {text-align: center; margin: 0 0 50px 0;}
.UserPersonaArea .section-title h2 {color: rgba(25, 25, 25, 1); font-family: 'SofiaProBold'; font-size: 36px; margin: 0 0 25px 0;}
.UserPersonaArea .section-title h2 span {color: rgba(245, 71, 72, 1);}
.UserPersonaArea .section-title  p{ font-size: 16px; font-family: 'SofiaProRegular'; color: rgba(25, 25, 25, 1);}
.UserPersonaBox {box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); background-color: rgba(255, 251, 249, 1); border-radius: 32px; padding: 40px 25px;}
.UserPersonaBox .UpbDetails p{margin: 0 0 50px 0; color: rgba(25, 25, 25, 1); font-size: 16px; }
.UserPersonaBox .UpbDetails .UpbDetailsBio {display: flex; align-items: center; margin: 0 0 50px 0;}
.UserPersonaBox .UpbDetails .UpbDetailsBio p {color: rgba(153, 153, 153, 1) ;font-family: 'Poppins'; font-weight: 500; font-size: 15px; margin-bottom: 20px!important;}
.UserPersonaBox .UpbDetails .UpbDetailsBio p span{color:rgba(13, 34, 58, 1);  margin: 0 10px 0 0; font-size: 15px;  font-family: 'SofiaProSemiBold'; }
.UserPersonaBox .UpbDetails .UpbDetailsBio .UpbDetailsName{margin: 0 0 0 15px!important;}
.UserPersonaBox .UpbContent {margin: 0 0 50px 0;}
.UserPersonaBox .UpbContent:last-child {margin-bottom: 0px;}
.UserPersonaBox .UpbContent h6 {color: rgba(245, 71, 72, 1); font-family: 'SofiaProBold'; font-size: 22px; margin: 0 0 15px 0;}
.UserPersonaBox .UpbContent ul {padding: 0 0 0 35px;}
.UserPersonaBox .UpbContent ul li {list-style-type: disc; color: rgba(25, 25, 25, 1); font-size: 16px; margin: 0 0 10px 0;}
.UserPersonaBox .UpbContent ul li::marker {color: rgba(245, 71, 72, 1);}


.NewHeader {background-image: url('../images/new_headerbg.png'); width: 100%; height: 788px; background-repeat: no-repeat; background-position: right; background-size: cover;}
.NewHeader nav {display: flex; align-items: flex-start; justify-content: space-between; padding: 25px 75px  0;}
.NewHeader nav 
.NewHeader .HeroSection {padding: 0 50px 0 75px;}
.NewHeader .DownloadAppBtn {border-radius: 100px; background-color: rgba(245, 71, 72, 1); color: #fff; padding: 10px 20px; display: inline-block; font-size: 14px;}
.NewHeader .HeaderLeft {padding: 50px 50px 0 75px;}
.NewHeader .HeaderLeft .PeopleTrustUs {background-color: rgba(245, 71, 72, 0.10); margin: 0 0 10px 0; display: inline-block; padding: 5px 20px 5px 5px; border-radius: 100px;}
.NewHeader .HeaderLeft .PeopleTrustUs img {margin: 0 10px 0 0;}
.NewHeader .HeaderLeft h1 {font-family: 'SofiaProBold'; font-size: 48px; color: rgba(25, 25, 25, 1); margin: 0 0 50px 0;}
.NewHeader .HeaderLeft h1 span {color: rgba(245, 71, 72, 1);}
.NewHeader .HeaderLeft h1 .Delivery {color: rgba(253, 197, 94, 1); position: relative;}
.NewHeader .HeaderLeft h1 .Delivery img {position: absolute; bottom: -15px; right: 0;}
.NewHeader .HeaderLeft figure {text-align: right; margin: 0 0 50px 0;}
.NewHeader .HeaderLeft p {color: rgba(25, 25, 25, 1); letter-spacing: -1px; font-size: 18px; line-height: 25px; font-family: 'SofiaProRegular'; }



.EmpathyBigBox {display: flex; flex-wrap: wrap; position: relative; margin-bottom: 50px;}
.EmpathyBigBox .EmpathyBigBoxOverlay {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px;} 
.EmpathyBigBox .EmpathyMediumBox {width: 50%;}
.EmpathyBigBox .EmpathyMediumBox.One {border-right: 1px solid rgba(245, 71, 72, 1); border-bottom: 1px solid rgba(245, 71, 72, 1); padding: 0 100px 100px 0;}
.EmpathyBigBox .EmpathyMediumBox.Two {padding: 0 0 100px 100px;}
.EmpathyBigBox .EmpathyMediumBox.Three {padding: 100px 75px 0 0;}
.EmpathyBigBox .EmpathyMediumBox.Four {border-left: 1px solid rgba(245, 71, 72, 1); border-top: 1px solid rgba(245, 71, 72, 1); padding: 100px 0 0 75px; } 
.EmpathyBigBox .EmpathyMediumBox .EmpathySmallBox {background-color: rgba(255, 251, 249, 1); box-shadow: 0 4px 4px 0 rgba(0,0,0,0.25); border-radius: 32px; padding: 25px; }
.EmpathyBigBox .EmpathyMediumBox .EmpathySmallBox h6 {font-family: 'Crimson Text'; font-size: 20px; text-align: center; margin: 0 0 20px 0; font-weight: 700; }
.EmpathyBigBox .EmpathyMediumBox .EmpathySmallBox ul {padding-left: 25px;}
.EmpathyBigBox .EmpathyMediumBox .EmpathySmallBox ul li {list-style-type: disc; font-family: 'SofiaProRegular'; font-size: 16px;}



.VisualDesignArea2 .section-title {margin: 0 0 35px 0; text-align: center;}
.VisualDesignArea2 .section-title h2 {color: rgba(47, 47, 49, 1); font-size: 36px; margin: 0 0 25px 0; font-family: 'SofiaProBold'; font-size: 36px;}
.VisualDesignArea2 .section-title h2 span {color: rgba(229, 74, 0, 1);}
.VisualDesignArea2 .section-title p {font-size: 16px;font-family: 'SofiaProRegular'; color: rgba(25, 25, 25, 1);}

.VisualDesignArea2 {padding: 50px 75px;}
.VisualDesignArea2 .VisualDesignBox { display: flex; align-items: center; justify-content: space-between; padding: 25px 0;}


.UserSearchArea {padding: 50px 75px;}
.UserSearchArea .UserSearchLeftBox  {padding: 0 100px 0 0; margin: 50px 0 0 0;}
.UserSearchArea .UserSearchLeftBox h2 {
    color: rgba(25, 25, 25, 1);
    font-family: 'SofiaProBold';
    font-size: 36px;
    margin: 0 0 25px 0;
}

.UserSearchArea .UserSearchLeftBox h2 span {
    color: rgba(245, 71, 72, 1);
}
.UserSearchArea .UserSearchLeftBox p {font-size: 18px; font-family: 'SofiaProRegular'; line-height: 30px;}


.ProblemSolutionArea {display: flex; padding: 50px 125px;}
.ProblemSolutionArea .ProblemBox {background-color: rgba(255, 251, 249, 1); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); padding: 75px 30px 50px; border-radius: 32px; position: relative;}
.ProblemSolutionArea .ProblemBox p {font-size: 18px; line-height: 30px; color: rgba(25, 25, 25, 1); opacity: 80%; font-family: 'SofiaProRegular';}
.ProblemSolutionArea .ProblemBox span {position: absolute; left: 0; top: 0; background-color: rgba(254, 51, 44, 1); color: #fff; font-family: 'SofiaProBold'; font-size: 22px; border-radius: 32px 0 24px 0; padding: 5px 25px;}
.ProblemSolutionArea .ProblemBoxVs {position: relative;}
.ProblemSolutionArea .ProblemBoxVs span {position: absolute; top: 75px; left: 50%; transform: translateX(-50%);}
.ProblemSolutionArea .ProblemBoxVs h6 {font-family: 'SofiaProBold'; color: rgba(254, 51, 44, 1); font-size: 24px; padding: 0 15px; display: flex; justify-content: center; align-items: center; height: 100%;}


.OurProcessArea {padding: 75px 75px 50px; position: relative;}
.OurProcessArea .OurProcessOverlay {position: absolute; right: 0; top: 0;}
.OurProcessArea .section-title {text-align: center;margin: 0 0 50px 0;}
.OurProcessArea .section-title h2 {color: rgba(25, 25, 25, 1);font-family: 'SofiaProBold';font-size: 36px;margin: 0 0 25px 0;}
.OurProcessArea .section-title h2 span {color: rgba(245, 71, 72, 1);}
.OurProcessArea .section-title p {font-size: 18px; font-family: 'SofiaProRegular'; color: rgba(25, 25, 25, 1);}
.OurProcessArea .OurProcessBox {background-image: linear-gradient(rgba(255, 255, 255, 1) 30%,rgba(251, 185, 185, .30)); padding: 10px 35px 25px; text-align: center; border-radius: 20px; }
.OurProcessArea .OurProcessBox h6 {color: rgba(245, 71, 72, 1); font-size: 20px; font-family: 'SofiaProBold'; margin: 0 0 15px 0;}
.OurProcessArea .OurProcessBox p {font-size: 14px; font-family: 'SofiaProRegular'; }




.ProjectOverviewArea {background-image: url('../images/project_overview_bg.png'); width: 100%; height: 700px; background-repeat: no-repeat; background-position: left; background-size: cover; display: flex; justify-content: flex-end; padding: 100px 100px 0 0;}
.ProjectOverviewArea .ProjectOverviewBox {width: 45%;}

.ProjectOverviewArea .ProjectOverviewBox .section-title {margin: 0 0 20px 0;}
.ProjectOverviewArea .ProjectOverviewBox .section-title h2 {color: rgba(25, 25, 25, 1);font-family: 'SofiaProBold';font-size: 36px;margin: 0 0 25px 0;}
.ProjectOverviewArea .ProjectOverviewBox .section-title h2 span {color: rgba(245, 71, 72, 1);}
.ProjectOverviewArea .ProjectOverviewBox  p {font-size: 18px; font-family: 'SofiaProRegular'; line-height: 30px; margin: 0 0 35px 0;}
.ProjectOverviewArea .ProjectOverviewBox .ToolsArea h4 {color: rgba(32, 34, 44, 1); font-family: 'SofiaProRegular'; font-size: 24px; margin: 0 0 15px 0;}
.ProjectOverviewArea .ProjectOverviewBox .ToolsArea .ToolsImgArea img {margin: 0 20px 0 0 ;}

.UserJourneyMapArea {padding: 50px 75px;}
.UserJourneyMapArea .section-title {text-align: center;margin: 0 0 50px 0;}
.UserJourneyMapArea .section-title h2 {color: rgba(25, 25, 25, 1);font-family: 'SofiaProBold';font-size: 36px;margin: 0 0 25px 0;}
.UserJourneyMapArea .section-title h2 span {color: rgba(245, 71, 72, 1);}
.UserJourneyMapArea .UserJourneyTable table { border-collapse: separate; border-spacing: 25px;}
.UserJourneyMapArea .UserJourneyTable table tr td {background-image:  linear-gradient(rgba(255, 255, 255, 1) 30%,rgba(251, 185, 185, .30)); border-radius: 15px; text-align: center; padding: 15px 10px; color: rgba(47, 47, 49, 1); font-size: 15px; font-family: 'SofiaProBold'}
.UserJourneyMapArea .UserJourneyTable table tr td:first-child {writing-mode: vertical-lr; transform: rotate(180deg); background-image:  linear-gradient(rgba(251, 185, 185, .30) 30%, rgba(255, 255, 255, 1)); font-family: 'Crimson Text'; font-size: 18px; font-weight: 700;}


.GetStartedArea {background-image: url('../images/getstarted_banner.png'); width: calc(100% - 100px); height: 633px; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; position: relative; margin: 85px 50px 25px;}
.GetStartedArea .GetStartedAreaOverlay {position: absolute; left: -50px; top: -100px;} 
.GetStartedArea .GetStartedBox {width: 37%; padding: 125px 0 0 75px;}
.GetStartedArea h1 {color: rgba(1, 15, 28, 1); font-size: 38px; font-family: 'Rubik'; font-weight: 700; margin: 0 0 30px 0;}
.GetStartedArea p {font-family: 'Poppins'; font-size: 16px; font-weight: 500; margin: 0 0 30px 0;}
.GetStartedArea .GetAppBtn {background-color: rgba(235, 0, 41, 1); padding: 15px 30px; border-radius: 50px; border: none; outline: none; color: #fff; font-family: 'Poppins'; font-weight: 500;}



.WhatWeServeArea {padding: 25px 60px 25px;}
.WeSearveBox {height: 100%;}
.WeSearveBox.WeSearveBox2 {display: flex; flex-direction: column; justify-content: flex-end;}
.WeSearveBox.WeSearveBox2 figure {margin-bottom: 0px; margin-top: 25px;}
.WeSearveBox.WeSearveBox2 h5 {position: relative; display: inline-block; text-align: center;}
/* .WeSearveBox.WeSearveBox2 h5::before {    content: "";
    background-image: url(../images/dot_line_img.png);
    left: 0;
    top: 0;
    position: absolute;
    width: 200px;
    height: 200px;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 99;} */
.WeSearveBox figure {margin: 0 0 25px 0;}
.WeSearveBox h5 {color: rgba(0, 0, 0, 1); font-size: 20px; font-weight: 700; margin: 0 0 10px 0; font-family: 'Montserrat';}
.WeSearveBox p {font-family: 'SofiaProRegular'; font-size: 16px; line-height: 20px;} 



.MoreEasyOrderArea {background-image: url('../images/moreeasy_banner.png'); width: 100%; height: 100vh; background-position: center; padding: 125px 0 0 50px; background-repeat: no-repeat; background-size: cover; }
.MoreEasyOrderArea .MoreEasyOrderBox {width: 50%;}
.MoreEasyOrderArea .MoreEasyOrderBox h1{color: rgba(0, 0, 0, 1); font-size: 42px; font-family: 'SofiaProBold'; margin: 0 0 50px 0;}
.MoreEasyOrderArea .MoreEasyOrderBox h1 span.Red {color: rgba(245, 71, 72, 1);}
.MoreEasyOrderArea .MoreEasyOrderBox h1 span.Yellow {color: rgba(253, 197, 94, 1);}
.MoreEasyOrderArea .MoreEasyOrderBox p {color: rgba(0, 0, 0, 1); font-size: 16px; font-family: 'SofiaProRegular'; }

.AlpHabetsAra {background-image: url('../images/alphabates_banner.png'); width: 100%; height: 895px; background-repeat: no-repeat; background-position: top center; background-size: cover;}

.GreatFoodArea {padding: 50px 50px 50px 25px;}
.GreatFoodArea .GreatFoodBox{background-image: url('../images/greatfood_banner4.png'); width: 100%; height: 475px; background-position: center; background-repeat: no-repeat; background-size: 100% 100%;}

section {overflow: hidden;}

.SkillsArea figure figcaption {color: #fff; font-size: 16px; font-family: 'Montserrat'; font-weight: 500; text-align: center; margin: 20px 0 0 0;}