@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;500;600&family=Roboto:wght@400;500;900&display=swap');
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
.onoffswitch {
    position: relative; width: 100px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    margin-top: 20px;
}
.onoffswitch-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 26px; padding: 0; line-height: 26px;
    border: 0px solid #FFFFFF; border-radius: 38px;
    background-color: #9E9E9E;
}
.onoffswitch-label:before {
    content: "";
    display: block; width: 38px; margin: -6px;
    background: #FFFFFF;
    position: absolute; top: 0; bottom: 0;
    right: 91px;
    border-radius: 38px;
    box-shadow: 0 6px 12px 0px #757575;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    background-color: #42A5F5;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
   border-color: #42A5F5;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
    right: 0px;
    background-color: #2196F3;
    box-shadow: 3px 6px 18px 0px rgba(0, 0, 0, 0.2);
}
.masthead {
  font-family: 'Hind', sans-serif;
  height: 45vh;
  min-height: 450px;
  background-image: url('../images/banner-2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}
.no-bottom{padding-bottom: 0px !important;}
.lead{width: 45%;margin:0 auto;font-size: 22px;}
.masthead .tagline{font-size: 24px;text-transform: uppercase;}
.masthead .username-title{font-size: 48px; font-weight: 800; text-transform: uppercase;}
.section-heading{text-align: center;margin:40px 0;text-transform: uppercase;}
.doer{color: #9e9e9e;font-size:48px}
.doer-achiever{color: #6c15aa;font-size:48px}
.section-spacing{overflow: hidden;padding-bottom: 40px;}
.section-blue{background: #f9fbff;}
.section-gray{background: #f0eeef;}
.chart-row{padding: 40px 0}
.chart-info {padding: 10px;border-radius: 5px;margin: 15px 0;}
.chart-info h3{font-size: 1rem;margin-bottom: 5px}
.chart-info p{font-size: 14px; line-height: 15px;margin-bottom: 5px}
.info-pink{background: #feb3c4}
.info-lightblue{background: #a7e0e1}
.info-yellowish{background: #ffe19a}
.info-green{background: #6ef892}
.info-purple-light{background: #b398fa}
.info-orange{background: #f5a248}
.competitor-points{
  padding:20px 10px;color: #565656;border: 1px solid #cccccc; border-radius: 10px;
  -webkit-box-shadow: 0px 10px 32px -5px rgba(166,163,166,0.68);
  -moz-box-shadow: 0px 10px 32px -5px rgba(166,163,166,0.68);
  box-shadow: 0px 10px 32px -5px rgba(166,163,166,0.68);
   background:#fff;
}
.competitor-points span{font-weight: bold;font-size: 18px;padding: 10px}
.resume-heading{
  padding:10px;color: #565656; border-radius: 10px; overflow: hidden;
  margin-bottom: 15px;border: 1px solid #cccccc; background:#fff;
  -webkit-box-shadow: 0px 10px 30px -1px rgba(166,163,166,0.5);
  -moz-box-shadow: 0px 10px 30px -1px rgba(166,163,166,0.5);
  box-shadow: 0px 10px 30px -1px rgba(166,163,166,0.5);
}
.icon-sec{float: left;width: 20%}
.iconsec{width: 80px;height: 80px; background: #f94f58;border-radius: 50%; text-align: center
}
.iconsec i{font-size: 48px; padding:15px; color: #fff;}
.resume-info{width: 80%;float: right;margin-top: 5px}
.resume-info h3{font-size: 18px;margin: 0 0 5px 0;}
.resume-info p{font-size: 13px}
.flaticon-graduated:before, .flaticon-user-1:before, .flaticon-refer:before,.flaticon-pie-chart:before{font-size: 48px !important; margin: 5px 0 0 0px !important;}
h2.vs-heading{text-align: center;font-size: 42px}
/* h2.vs-heading img{float: right} */
h2.vs-heading1:after{content: url('../images/vs-3.png'); }
h2.vs-heading2:after{content: url('../images/vs-2.png');}
.gradient-1{
  background: rgb(211,89,186);
  background: linear-gradient(90deg, rgba(211,89,186,1) 0%, rgba(245,79,107,1) 100%);
}
.gradient-2{
  background: rgb(95,81,177);
  background: linear-gradient(90deg, rgba(95,81,177,1) 0%, rgba(168,94,237,1) 100%);
}
.gradient-3{
  background: rgb(255,100,86);
  background: linear-gradient(90deg, rgba(255,100,86,1) 0%, rgba(255,190,86,1) 100%);
}
.gradient-4{
  background: rgb(8,147,226);
  background: linear-gradient(90deg, rgba(8,147,226,1) 0%, rgba(78,200,241,1) 100%);
}
.gradient-5{
  background: rgb(56,1,111);
  background: linear-gradient(90deg, rgba(56,1,111,1) 0%, rgba(167,28,147,1) 100%);
}
.gradient-6{
  background: rgb(34,193,195);
  background: linear-gradient(96deg, rgba(34,193,195,1) 0%, rgba(45,253,113,1) 100%);
}
.gradient-footer{
  background: rgb(24,44,186);
  background: linear-gradient(96deg, rgba(24,44,186,1) 0%, rgba(228,71,210,1) 100%);
}
.flip-card {
  background-color: transparent;
  width: 250px;
  height: 200px;
  margin: 10px auto 20px auto;
  border-radius: 10px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 10px;
}
.section-gray-2{background:#fdfbfc;}
.sample-glance img{border: 1px solid #ccc;}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: dodgerblue;color: white;
  transform: rotateY(180deg);padding: 15px;
}
.text-icon{font-size: 8em; color: #fff;margin: 0}
.text-sub{font-size: 1em; color: #fff;margin: 0}
#accordion button.btn.btn-link {
  display: block;width: 100%;text-decoration: none;color: #fff;
  text-align: left;font-size: 18px;background: #071c35;font-weight: 500;
}
.openvideo {cursor: pointer;}
#accordion .card{margin-bottom: 20px}
#accordion .card-header{padding: 0px}
#accordion .collapsed{background: #3246d2 !important}
#accordion .fa{float: right;margin-top: 6px;}
.footer{margin-top: -30px}
.order-div{border-top-right-radius:20px; width: 30%;float: left;padding-left: 10%;height: 235px;}
.order-div .order-heading{color: #fff; margin: 50px 0 20px 0;text-transform: uppercase;text-shadow:0px 0px 1px rgba(18, 18, 18, 1)}
.order-div ul{padding-left:0}
.order-div ul li a, .order-div ul li{color:#fff;font-weight: 600;list-style: none;margin-bottom: 10px}
.order-div ul li:before {
  content: "\f101"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  width: 1em;
  font-weight: 400;font-size: 18px
}
.contact-div{width: 70%;float: left;margin: 26px 0 0 0;background: #3cadd9;padding: 20px 0 4px 50px;height: 209px;}
.contact-div .order-heading{color: #fff; margin: 0px 0 20px 0;text-transform: uppercase; text-shadow:0px 0px 1px rgba(18, 18, 18, 1)}
.contact-div ul{padding-left:0}
.contact-div ul li a, .contact-div ul li{color:#fff;font-weight: 600;list-style: none;margin-bottom: 10px}
.contact-div ul li:before {
  content: "\f101"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  width: 1em;
  font-weight: 400;font-size: 18px
}

.ba-for-mobile{display: none;}
footer{width: 100%; float: left; background:#333; text-align: center;}
footer p{color: #fff; text-align: center; margin:10px 0;}
ul.social-link{color: #fff;padding: 0;margin: 10px}
ul.social-link li{display:inline-block; list-style: none;margin-right: 15px}
ul.social-link li a{color: #fff}

@media screen and (min-width: 1024px) and (max-width: 1224px){
  .lead{width: 55%;}
}

/* Tablets, iPads (portrait and landscape) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
 .mobile.float-left{float: none !important;}
 .cv-speak{text-align: center;}
 .iconsec i {
    font-size: 21px;
  }
  .iconsec {
    width: 50px;
    height: 50px;
  }

.flaticon-graduated:before, .flaticon-user-1:before, .flaticon-refer:before, .flaticon-pie-chart:before {
    font-size: 21px !important;
    margin: 5px 0 0 0px !important;
    line-height: 47px;
}
.order-div{width: 100%; padding-left: 5%;}

.contact-div {
    width: 100%;
    float: left;
    margin: 0px 0 0 0;
    background: #3cadd9;
    padding: 20px 0 4px 34px;
  }
}


/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 481px) and (max-width: 767px){
 .navbar-brand{margin:0 auto;}
  .masthead .tagline{margin:20px auto;}
  .lead {
    width: 100%;
    margin: 0 auto;
    font-size: 22px;
    text-align: center;
    display: grid;
}
.cv-speak{text-align: center;}
.onoffswitch {
    position: relative;
    width: 60px;
    margin-top: 26px;
}
h3.doer-achiever{    font-size: 27px;
    margin-top: 20px;}
.onoffswitch-label:before{right: auto;}
.chart-row{padding:0;}
.iconsec i {
    font-size: 21px;
  }
  .iconsec {
    width: 50px;
    height: 50px;
  }

.flaticon-graduated:before, .flaticon-user-1:before, .flaticon-refer:before, .flaticon-pie-chart:before {
    font-size: 21px !important;
    margin: 5px 0 0 0px !important;
    line-height: 47px;
}
.ba-for-mobile{display: block;}
.ba-for-desktop{display: none;}

.sample-glance{text-align: center;}
.sample-glance img{margin-top: 20px; text-align: center;     border: 1px solid #ccc;
    padding: 10px;}
.order-div{width: 100%;}

.contact-div {
    width: 100%;
    float: left;
    margin: 0px 0 0 0;
    background: #3cadd9;
    padding: 20px 0 4px 34px;
  }
    .section-blue-video{text-align: center;}
    .section-blue-video img{text-align: center;}

}

/* Smartphones (portrait and landscape) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
  .navbar-brand{margin:0 auto;}
  .masthead .tagline{margin:20px auto;}
  .lead {
    width: 100%;
    margin: 0 auto;
    font-size: 22px;
    text-align: center;
    display: grid;
}
.cv-speak{text-align: center;}
.onoffswitch {
    position: relative;
    width: 60px;
    margin-top: 26px;
}
h3.doer-achiever{    font-size: 27px;
    margin-top: 20px;}
.onoffswitch-label:before{right: auto;}
.chart-row{padding:0;}
.iconsec i {
    font-size: 21px;
  }
  .iconsec {
    width: 50px;
    height: 50px;
  }

.flaticon-graduated:before, .flaticon-user-1:before, .flaticon-refer:before, .flaticon-pie-chart:before {
    font-size: 21px !important;
    margin: 5px 0 0 0px !important;
    line-height: 47px;
}
.ba-for-mobile{display: block;}
.ba-for-desktop{display: none;}

.sample-glance{text-align: center;}
.sample-glance img{margin-top: 20px; text-align: center;     border: 1px solid #ccc;
    padding: 10px;}
.order-div{width: 100%;}

.contact-div {
    width: 100%;
    float: left;
    margin: 0px 0 0 0;
    background: #3cadd9;
    padding: 20px 0 4px 34px;
  }
    .section-blue-video{text-align: center;}

  
}