@font-face {
  font-family: 'regular';
  src: url('Roboto_Condensed-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'thin';
  src: url('Roboto_Condensed-Light.ttf') format('truetype');
}

html,body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-family: 'regular', sans-serif;
    font-size: 20px;
    background-color: #E8E8E3;
    -webkit-font-smoothing: antialiased;
}
* {box-sizing:border-box;}
.mb0,.mb0 * {margin-bottom:0px;}
.col12{width:100%;display:flex;flex-wrap:wrap;}
.w100 {width:100%;}
h1,h2,h3,h4,h5,h6{margin-bottom:0px;}
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span{color: #2B9EFF;}
h1{font-size:3.5vw;}
h2{font-size:40px;}
h3{font-size:1.3vw;}
.MainContainer{width:100%;max-width:1270px;margin:0px auto;display:flex;}
.flex{display:flex;}
.wrap{flex-wrap:wrap;}
.flexwrap{flex-wrap:wrap;}
.textcenter{text-align:center;}
.justifycenter{display:flex;justify-content:center;justify-items:center;justify-self:center;}
.aligncenter{display:flex;align-content:center;align-items:center;align-self:center;}
.mt1{margin-top:10px;}.mt2{margin-top:20px;}.mt3{margin-top:30px;}.mt4{margin-top:40px;}.mt5{margin-top:50px;}.mt6{margin-top:60px;}
.mb1{margin-bottom:10px;}.mb2{margin-bottom:20px;}.mb3{margin-bottom:30px;}.mb4{margin-bottom:40px;}.mb5{margin-bottom:50px;}.mb6{margin-bottom:60px;}
.pt1{padding-top:10px;}.pt2{padding-top:20px;}.pt3{padding-top:30px;}.pt4{padding-top:40px;}.pt5{padding-top:50px;}.pt6{padding-top:60px;}
.pb1{padding-bottom:10px;}.pb2{padding-bottom:20px;}.pb3{padding-bottom:30px;}.pb4{padding-bottom:40px;}.pb5{padding-bottom:50px;}.pb6{padding-bottom:60px;}
.whitebg{background-color:white;}
.white{color:white;}
img{max-width: 100% !important;height: auto;}
.hide {display: none !important;}


::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background: #000a1b;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #02397C;
}
::-webkit-scrollbar-thumb:hover {
    background: #014aa3;
}

header {
    width: 100%;
    padding: 25px 0 0 0;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9999999999999999;
}
header .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header img.HeadBrand {
    width: 190px;
    height: auto;
}
header nav {
    background: white;
    border-radius: 80px;
    padding: 5px 0px 5px 8px;
    display: flex;
    align-items: center;
}
header nav a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: black;
    margin-left: 15px;
    margin-right: 15px;
}
header nav a:first-child {
    margin-left: 5px;
    margin-right: 15px;
}
header nav a:first-last {
    margin-left: 5px;
    margin-right: 0px;
}
header nav a img {
    margin-right: 5px;
    width:33px;
}
header nav a span {
    display: block;
    font-size: 16px;
    font-weight: 600;
}
header nav a span span {
    font-size: 12px;
    font-weight: 400;
}
header nav a.navConsultation {
    margin-right: 5px;
    font-size: 16px;
}
.responsiveicon {
    display: none;
}
a.navConsultation {
    border-radius: 60px;
    color: white;
    padding: 5px 5px 5px 20px;
    background: #00347D;
    background: linear-gradient(90deg,rgba(0, 52, 125, 1) 0%, rgba(0, 52, 125, 1) 100%);
}
a.navConsultation img {
    margin-right: 0px;
    margin-left: 10px;
    width: 33px;
}

.glow {
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 60px;
}

.glow:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -1px;
    left:-1px;
    background-size: 400%;
    z-index: -1;
    filter: blur(2px);
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    animation: glowing 20s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 60px;
}
.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00347D;
    background: linear-gradient(90deg,rgba(0, 52, 125, 1) 0%, rgba(0, 52, 125, 1) 100%);
    left: 0;
    top: 0;
    border-radius: 60px;
    transition: all 0.3s ease-in-out;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

section.insidebody {
    border: solid 10px #E8E8E3;
    border-radius: 20px;
}
section.hero {
    width: auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 120px;
    padding-bottom: 30px;
    background: url(../images/herobg.webp) no-repeat center center #000f3a;
    background-size: cover;
}

.btnwhite {
    border: none;
    border-radius: 60px;
    background: white;
    color: black;
    font-size: 18px;
    font-weight: 600;
    padding: 14px 28px;
    cursor: pointer;
}
.btnwhite:before {display: none;}
.btnwhite:hover:before {display: unset;}
.btnwhite::after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    left: 0;
    top: 0;
    border-radius: 60px;
    transition: all 0.3s ease-in-out;
}
.btnblue {
    border: none;
    border-radius: 60px;
    background: #00347D;
    background: linear-gradient(90deg,rgba(0, 52, 125, 1) 0%, rgba(0, 52, 125, 1) 100%);
    color: white;
    font-size: 18px;
    font-weight: 500;
    padding: 14px 28px;
    cursor: pointer;
}
.btnblue::after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #00347D;
    background: linear-gradient(90deg,rgba(0, 52, 125, 1) 0%, rgba(0, 52, 125, 1) 100%);
    left: 0;
    top: 0;
    border-radius: 60px;
    transition: all 0.3s ease-in-out;
}
.HeroLeft h3 {
    color: #2B9EFF;
}
.HeroLeft {
    width: 50%;
    color: white;
}
.HeroLeft h1 {
    display: inline !important;
}
.HeroRight {
    width: 50%;
    color: white;
}
.HeroRight {
    padding-left: 50px;
    display: flex;
    align-items: center;
    text-align: center;
}
.HeroLeft button {
    margin-top: 10px;
}
.HeroLeft ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding: 0px;
    margin: 0px;
    padding-top: 30px;
}
.HeroLeft ul li img {
    width: 90%;
}
.HeroForm {
    width: 100%;
    background: white;
    padding: 15px;
    border-radius: 15px;
    outline: solid 2px #f5f5f5;
    outline-offset: 5px;
    transition: all 0.3s ease-in-out;
}
.HeroForm h3 {
    color: black;
    font-size: 26px;
    font-weight: 700;
    margin: 20px 0;
}
.HeroForm h3 span {
    color: #005FE3;
}
.badges ul {
    list-style: none;
    padding: 40px 10px 70px;
    margin: 0px;
    display: flex;
    column-gap: 54px;
    background: white;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.badges ul li {
    width: 14.28%;
    text-align: center;
    border: solid 1px rgba(222, 30, 39, 0.22);
    background-color: #F6F6F6;
    border-radius: 10px;
    padding: 40px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.badges ul li:hover {
    box-shadow: 0px 0px 5px rgba(222, 30, 39, 0.22);
}
.badges ul li img {
    max-width: 100%;
    height: auto;
}
.badges ul li:nth-child(1),
.badges ul li:nth-child(3),
.badges ul li:nth-child(5),
.badges ul li:nth-child(7) {
    margin-top: 30px;
    margin-bottom: -30px;
}



.Greatappdesign {
    width: 100%;
    margin-top: 120px;
    padding: 40px 0;
    background: rgba(167, 218, 255, 0.42);
}
.greatcontent,
.greatimage {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.greatimage {
    margin-top: -110px;
    margin-bottom: -110px;
}
.greatcontent h2 {
    font-weight: 800;
    margin-bottom: 0px;
}
.LoveWorking {
    padding-top: 60px;
}
.LoveWorking ul {
    list-style: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.LoveWorking ul li {
    width: 33.33%;
    padding: 10px;
    display: flex;
}
.LoveWorking ul li .col12 {
    background: url(../images/LoveWorkingTabs.webp) no-repeat center center #021732;
    background-size: cover;
    border-radius: 10px;
    padding: 40px;
    color: white;
}
.LoveWorking ul li .col12 h3 {
    width: 100%;
}
.LoveWorking ul li .col12 img {
    width: auto;
    height: 60px;
}
.Getfor {
    width: 100%;
    margin-top: 60px;
    padding-bottom: 20px;
}
.Getfor .MainContainer {
    max-width: 1174px;
}
.getforcontent {
    width: 40%;
    display: flex;
    align-items: center;
    padding-right: 40px;
}
.getforcontent h2 {
    font-size: 80px;
    margin-top: 0px;
}
.getforcontent p {
    margin-bottom: 0px;
    width: 100%;
}
.getforcontent h3 {
    margin-top: 10px;
}
.getforcontent h3 span {
    margin-left: 6px;
}
.getforcontent p:last-child {font-weight: 600;}
.getforcontent ul {
    list-style: none;
    padding: 10px 0;
    margin: 0px;
}
.getforcontent ul li {
    padding: 10px 0 10px 30px;
    background: url(../images/bullet.webp) no-repeat 0px 11px transparent;
    background-size: 20px 20px;

}
a.colorshare {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: white;
    margin-top: 20px;
}
.getforimage {
    width: 60%;
    text-align: end;
    position: relative;
}
.getforimage img {
    width: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
}

.getforimage img.reelchecksize {
    position: unset;
    opacity: 0;
}
.reelmob {
    animation: reelmob 3.5s cubic-bezier(.25,.1,.25,1) infinite;
}
@keyframes reelmob {
    0%{right: 0%;}
    50%{right: 2%;}
    100%{right: 0%;}
}
.reelpen {
    animation: reelpen 18s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes reelpen {
    0%{top: 0%;}
    10%{top: 3%; right: 9%;}
    20%{top: 5%; right: 2%;}
    30%{top: 3%; right: -5%;}
    40%{top: 28%; right: 8%;}
    50%{top: -12%; right: 16%;}
    60%{top: 0%; right: 0%;}
    70%{top: 10%; right: -3%;}
    80%{top: 0%; right: 8%;}
    90%{top: 16%; right: 5%;}
    100%{top: 0%;right: 0%;}
}
section.hassle {
    width: 100%;
    padding-top: 40px;
    padding-bottom: 40px;
}
.hasslecontent {
    width: 50%;
    display: flex;
    align-items: center;
    padding-right: 40px;
}
.hasslecontent .col12 {
    display: block;
}
.hassleimage {
    width: 50%;
    text-align: end;
}
.hassleimage img {
    border-radius: 40px;
}
.hassle h2,
.hassle h3,
.hassle p {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
}
.hastab {
    width: 100%;
    display: flex;
    margin-top: 30px;
    margin-bottom: 30px;
}
.hastab span {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    padding-left: 15px;
}
.hasimg {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Choose {
    background: url(../images/choosBG.webp) no-repeat center center #010920;
    background-size: cover;
    padding: 40px 0;
}
.Choose ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}
.Choose ul li {
    width: 44%;
    padding: 30px 40px;
    display: flex;
}
.Choose ul li .cho {
    border: solid 1px rgba(255, 255, 255, 0.5);
    background: rgba(0,0,0,0.14);
    border-radius: 10px;
    padding: 35px;
    position: relative;
    display: flex;
}
.Choose ul li .cho .col12 {
    display: block;
}
.Choose ul li .cho h4,
.Choose ul li .cho p {
    width: 100%;
    margin: 0px;
}
.Choose ul li .cho img {
    position: absolute;
    top: -40px;
    left: -40px;
}
.stories {
    padding: 40px 0;
}
#automyvideo {width: 80%;border-radius: 60px;}
.stories h2,
.stories h3,
.stories p {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 0px;
}
.stories img {
    border-radius: 40px;
}
.tgsvideo {
    display: flex;
    justify-content: center;
    text-align: center;
    position: relative;
    margin-top: 30px;
}
.tgsvideo img.tgsplay {
    position: absolute;
    top: calc(50% - 70px);
    left: calc(50% - 70px);
    cursor: pointer;
}


.calendar {
    background: black;
}
.isosec {
    background: #00347D;
    background: linear-gradient(90deg,rgba(0, 52, 125, 1) 0%, rgb(3, 79, 185) 100%);
}
.isosecrow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
}
.isosec .isoimage {
    display: flex;
    width: 25%;
    justify-content: flex-end;
    padding-right: 30px;
}
.isosec .isoimage img {
    width: 60%;
}
.isosec .isoContent {
    width: 50%;
}
.isosec .isoContent h3 {
    font-size: 1.6vw;
    font-weight: 400;
    margin-top: 0px;

}
.isosec .isoContent a {
    text-decoration: none;
    color: white;
    font-weight: 800;
    font-size: 1.6vw;
    margin-top: 6px;
    display: inline-block;
}
.isosec .isoButton {
    width: 25%;
    position: relative;
    display: flex;
    justify-content: flex-end;
}
.isosec .isoButton::before {
    content: '';
    display: block;
    width: 5px;
    height: 100%;
    background: white;
    border-radius: 10px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.isosec .isoButton button {
    display: inline-block;
    background: white;
    border: none;
    color: #015FE2;
    font-weight: 500;
    border-radius: 60px;
    padding: 12px 36px;
    font-size: 1.1vw;
    cursor: pointer;
}
section.FootSubscribe {
    background: black;
    padding: 40px 0;
}
.FootSubscribe .MainContainer .fotsubrow {
    width: 100%;
    background: url(../images/FooterToper.webp) no-repeat center center #00347D;
    background-size: cover;
    border: solid 1px rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    padding: 10px 30px;
}
.fotsubrow {}
.fotleft,
.fotright {
    width: 50%;
    
}
.fotleft {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.fotleft h2 {
    width: 100%;
    margin-top: 0px;
}

.Testimonials {
    background: black;
    padding: 10px 0 50px 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

footer {
    width: 100%;
    background: black;
}
.ftleft {
    width: 20%;
    display: flex;
    align-items: center;
    color: #005FE3;
}
.ftcenter {
    width: 60%;
    display: flex;
    align-items: center;
    font-family: "thin", sans-serif;
}
.ftright {
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.ftright a {
    text-decoration: none;
    color: #005FE3;
}
.ftright a:hover {
    color: #FFFFFF;
}


.ftbottom {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items: center;
    border-top: solid 1px #005FE3;
    margin-top: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
}
.ftbleft {
    width: 50%;
    font-family: "thin", sans-serif;
    font-size: 16px;
    color: #637189;
}
.ftbright {
    width: 50%;
    display: flex;
    justify-content: flex-end;
}



.HeroForm ul {
    list-style: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: black;
    padding: 0px;
    margin: 15px 0 0 0;
}
.HeroForm ul li {
    width: 49%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px #005FE3;
    border-radius: 30px;
    padding: 10px 10px;
    cursor: not-allowed;
    opacity: 0.6;
}
.HeroForm ul li.active {
    background: #005FE3;
    color: white;
    cursor: pointer;
    opacity: 1;
}
.HeroForm ul li.active span {
    color: #FFFFFF;
}
.HeroForm ul li span {font-weight: bold;margin-right: 5px; position: relative;color: #005FE3;}
.HeroForm ul li span i {font-weight: 400;font-style: normal;font-size: 11px;}
.HeroForm form {
    width: 100%;
    margin: 10px 0 0 0;
    padding: 0px;
}
.HeroForm form input,
.HeroForm form input:focus {
    width: 100%;
    margin: 10px 0;
    border: solid 1px #005FE3;
    border-radius: 60px;
    padding: 15px 18px;
    outline: none;
    font-size: 14px;
}
.HeroForm form input[type=submit] {
    width: 100%;
    margin: 10px 0;
    background: #005FE3;
    border: solid 1px #005FE3;
    border-radius: 60px;
    padding: 10px 18px;
    cursor: pointer;
    font-weight: bold;
    color: white;
    font-size: 20px;
}
.HeroForm form span,.networkerror {color: rgb(165, 0, 0);font-size: 14px;}

.stepform {
    position: relative;
}
.stepload {
    width: 100%;
    height: 100%;
    background: url(../images/loader.svg) no-repeat center center white;
    background-size: 80px 80px;
    position: absolute;
    top: 1px;
    left: 0px;
    z-index: 999999999;
}
.stepstripe {
    width: 100%;
    max-width: 800px;
    background: white;
    color: black;
}

.Paynowstrip {
    width: 100%;
    padding: 40px 0 0 0;
    font-size: 20px;
    font-weight: 500;
}
.Paynowstrip i {
     width: 100%;
    font-size: 26px;
    margin-bottom: 10px;
    color: #000000;
    font-weight: 800;
    font-style: normal;
    text-align: left;
}
.Paynowstrip span {
    color: #005FE3;
    display: inline-block;
    margin: 0 5px;
}
.payrow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-content: center;
    border: solid 1px gray;
    border-radius: 0px;
    padding: 8px 10px;
    background: black;
    color: white;
}
.payrow a {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 130px;
    font-size: 16px;
    text-decoration: none;
    color: white;
    background-color: #005FE3;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}
.payrow a:hover {
    background-color: #003f97;
}
.payrow a img {
    width: 40px;
    margin-right: 10px;
}
.nopayrow {
    justify-content: center;
}
.nopayrow p {
    display: block;
    width: 100%;
    font-size: 16px;
    text-align: center;
    color: #5f6f85;
}
.nopayrow button {
    display: inline-block;
    border: solid 1px #005FE3;
    color: #005FE3;
    border-radius: 40px;
    padding: 8px 40px;
    background: transparent !important;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.nopayrow button:hover {
    border: solid 1px #005FE3;
    color: #FFFFFF;
    background: #005FE3 !important;
}

.directschedule {
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: rgba(0,0,0,0.96);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999999999999;
    display: none;
    justify-content: center;
    align-items: self-start;
    color: white;
}
.directschedule.active {
    display: flex;
}
.directschedule-place {
    width: 90%;
    position: relative;
    z-index: 99;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 40px;
}
.directschedule-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
}


.directschedule button.closesche:before {
    font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
    font-size: 25px;
    line-height: 35px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 35px;
    content: "\00d7";
    text-align: center;
}
.directschedule  button.closesche, .directschedule  button.closesche:focus {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999999999999;
    display: block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    color: rgb(149, 151, 156);
    overflow: visible;
    margin: 0px;
    padding: 0px;
    outline: 0px;
    transition: color 0.2s;
    text-decoration: none;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    background: 0px 0px;
}

.Portfolio {
    margin-top: 40px;
}
.Portfolio,
.PortHead,
.PortItems {
    width: 100%;
    overflow: hidden;
}
.Portfolio .MainContainer {
    flex-wrap: wrap;
    position: relative;
    padding-left: 100px;
    padding-right: 100px;
}
.Portfolio .PortSlidehead,
.Portfolio .PortSlideRoot {
display: flex;
transition: transform 1.3s ease;
will-change: transform;
}

.Portfolio .PortSlidehead .liqitem {
    flex: 0 0 100%;
    text-align: center;
}
.Portfolio .PortSlideRoot .liqitem {
    flex: 0 0 calc(100% / 3);
    padding: 0 5%;
    scale: 0.9;
    opacity: 0.6;
}

/* Highlight active */
.Portfolio .PortSlidehead .liqitem.active,
.Portfolio .PortSlideRoot .liqitem.active {
    scale: 1;
    opacity: 1;
}
.device-mob {
    width: 100%;
    /* background: url(../images/mob.webp) no-repeat center center transparent; */
    background-size: 100% auto;
}
.MobCover {
    position: absolute;
    z-index: 9;
}
.device-set {
    width: 100%;
    position: relative;
    z-index: -1;
    border-radius: 40px;
    overflow: hidden;
    padding: 16px;
}

.device-set img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Adjust as needed */
}

.device-set img {
  transition: transform 1s ease;
  transform: translateY(0px); /* all images start down */
  position: relative; /* or absolute, based on your layout */
}
.portprev,.portnext {
    position: absolute;
    top: calc(60% - 20px);
    border: none;
    background-color: transparent;
    font-size: 22px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 9999999;
    width: 50px;
    height: 30px;
    font-size: 0px !important;
    transition: all 0.3s ease-in-out;
}
.portprev {
    left:00px;
    background: url(../images/IconArrowPrev.svg) no-repeat center center white;
    background-size:100% auto;
}
.portnext {
    right:0px;  
    background: url(../images/IconArrowNext.svg) no-repeat center center white;
    background-size:100% auto;
}
.portprev:hover {
    left:00px;
    background: url(../images/IconArrowPrevH.svg) no-repeat center center white;
    background-size:100% auto;
}
.portnext:hover {
    right:0px;  
    background: url(../images/IconArrowNextH.svg) no-repeat center center white;
    background-size:100% auto;
}
.HeroAct {
    width: 100%;
    transition: all 0.3s ease-in-out;
}
.HeroAct.active {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 99999999999999;
}
.HeroAct button.mondio-close {display: none;}
.HeroAct.active button.mondio-close {display: block;}
.HeroAct.active .HeroForm {
    position: relative;
    z-index: 999999;
    width: 100%;
    max-width: 800px;
}
.HeroFormOver {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    position: absolute;
    top: -110%;
    left: 0px;
    z-index: 1;
    transition: all 0.3s ease-in-out;
}
.HeroAct.active .HeroFormOver {
    top: 0%;
}

.ctatext {
    font-size: 14px;
    font-style: italic;
    margin-top: 22px;
}

.herobadgs {
    width: 100%;
}
.portload {
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: url(../images/loader.svg) no-repeat center center white;
    background-size: 80px 80px;
}
.hassleContainer
/* ,
.Getfor .MainContainer  */
{
    width: 100%;
    max-width: 1024px;
    display: flex;
    margin-top: 30px;
}
.CtnControl {
    width: 100%;
    display: flex;
}





.AfterSchedule {
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: rgba(0,0,0,0.96);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 999999999999;
    display: none;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    color: white;
}
.AfterSchedule.active {
    display: flex;
}
.AfterSchedule-place {
    width: 100%;
    max-width: 800px;
    padding: 0 30px 40px 30px;
    background-color: white;
    border-radius: 10px;
    position: relative;
    z-index: 99999999999999999;
}
.AfterSchedule-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 9;
}


.AfterSchedule a.closescheEnds {
    background: #005FE3 !important;
    color: white !important;
    font-size: 16px;
    font-weight: 500;
    padding: 8px 35px;
    text-decoration: none;
    border-radius: 5px;
}








.form-group-mob { position: relative; margin-bottom: 20px; }
#phone {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid #ddd;
    border-radius: 60px;
    font-size: 16px;
    transition: border-color 0.3s;
}
#phone:focus { border-color: #007bff; outline: none; }
.msg { font-size: 13px; margin-top: 5px; display: none; }
#valid-msg { color: #28a745;     text-align: left;}
#error-msg { color: #dc3545;     text-align: left;}
.iti__selected-dial-code {
    color: #005FE3;
    font-size: 14px;
}
.iti__country-list {
    width: 290px !important;
    flex-wrap: wrap !important;
    overflow-x: hidden !important;
}
.iti__country-list li {
    width: 100% !important;
    align-items: start !important;
    justify-content: start !important;
    border: none !important;
    border-bottom: solid 1px #005FE3 !important;
    border-radius: 0px !important;
    padding: 10px 10px;
    cursor: pointer !important;
    opacity: 1 !important;
}
.iti__country-list.iti__hide {
    display: none;
}
.iti__selected-flag {
    border-radius: 60px;
}
.iti--show-flags {
    width: 100% !important;
}