@import url('https://fonts.googleapis.com/css?family=Montserrat:500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans&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;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');
*
 {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: poppins;
}

html {
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
background: #FFF;
font-family: 'Open Sans', sans-serif;
}
#loader
{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 100;
  background-color: #fff;
}
#loader img
{
  width: 300px;
  height: 300px;
}
::selection
{
background-color: none;
color: #ff8400;
}

.black {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
background-color: #fff;
}
nav
{
  padding-bottom: 6px;
  top: 0;
  position: fixed;
  display: flex;
  width: 100%;
  height: 82px;
  z-index: 1;
  background-color: #ffffff00;
  backdrop-filter: blur(25px);
  transition: 1s;
  align-items: center;
}
nav ul {
display: flex;
align-items: center;
margin-left: 60px;
/* background-color: #20bf1d; */
}
nav ul li {
list-style: none;
margin: 5px 10px;
}
nav ul li a {
padding: 2px 10px;
color: #2e2e2e;
cursor: pointer;
transition: .5s;
text-decoration: none;
}
nav ul li a:hover {
color: #fff;
border-radius: 5px;
background: #2e1baa;
}
.get-started {
margin-left: 40px;
padding: 5px 20px;
border: 2px solid #2e1baa;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: .4s;
color: #2e1baa;
cursor: pointer;
}
.get-started:hover
{
  background-color: #2e1baa;
  color: #fff;
}
.logo img{
width: 320px;
cursor: pointer;
transition: all 1s;
margin-left: 15px;
}
.logo .smalllogo
{
  display: none;
}

a, button {
float: left;
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 15px;
color: #2E3D49;
display: block;
text-decoration: none;
text-align: center;
}
.head-container {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
/* background-color: #d82727; */
}
.head-container .reception
{
  width: 100%;
  height: 100%;
  background-image: url(images/receptionimage.jpg);
  background-position: center;
  background-size: cover;
}
/* .head-container .headervideo
{
  position: absolute;
} */



/* SIDE MENU */
.menu {
cursor: pointer;
width: 25px;
display: none;
}
.side-menu {
width: 100%;
height: 100%;
background: #b6215afd;
position: absolute;
top: 0;
transition: .8s;
z-index: 1000;
transform: translateX(-100%);
}
.side-menu ul {
margin-top: 2%;
display: flex;
flex-direction: column;
justify-content: center;
/* background: #e71010; */
}
.side-menu ul li {
list-style: none;
/* background: #009900; */
display: flex;
justify-content: center;
align-items: center;
/* border-bottom: 1px solid #fff; */
/* padding: 10px 0px; */
}
.side-menu ul li:hover a{
background: #fff;
color: #2e1baa;
}
.side-menu ul li a{
color: #FFF;
width: 100%;
font-size: 1em;
/* background: #2E3D49; */
text-decoration: none;
padding: 15px 0px;
}
.close img{
float: right;
width: 35px;
cursor: pointer;
margin: 10px;
}
.user {
  /* background-color: #20bf1d; */
display: flex;
justify-content: center;
align-items: center;
margin-top: 10%;
}
.user center {
  display: flex;
  justify-content: center;
  align-items: center;
font-size: 35px;
font-weight: 600;
color: #fff;
cursor: pointer;
}
.user center {
opacity: 1;
}
/*Common things in all sections*/
#about_section, #portfolio_section, #team_section, #services_section, #contactus_section {
font-family: 'Open Sans', sans-serif;
color: #2E3D49;
position: relative;
/* background-color: #fff; */
}
.diffSection {
width: 100%;
justify-content: center;
align-items: center;
}
.diffSection .content {
margin: 10px;
text-align: center;
padding: 10px 100px;
font-size: 1.1em;
}

/*PORTFOLIO*/
.extra {
width: 100%;
}
.extra p {
padding: 30px;
padding-bottom: 150px;
font-size: 50px;
text-align: center;
color: #fff;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)),url("images/b1.jpg");
background-size: cover;
background-attachment: fixed;
font-family: cursive;
z-index: -9;
}
.smbox {
display: flex;
flex-wrap: wrap;
transform: translateY(-100px);
justify-content: center;
}
.smbox span {
margin: 1%;
background: #fff;
box-shadow: inset 0px 0px 25px rgba(0,0,0,0.2),
                0 0 40px rgba(0,0,0,0.3);
border-radius: 10px;
padding: 10px 20px 10px;
cursor: pointer;
}
.smbox span:hover {
transform: scale(1.1);
transition: .5s ease;
}
.smbox .data {
font-size: 80px;
color: #FA6146;	
}
.smbox .det {
font-size: 20px;
color: #272529;
font-family: cursive;
}

/*Title*/
.title {
margin-top: 0px; 
font-family: 'Open Sans', sans-serif;
font-size: 30px;
text-align: center;
color: #2E3D49;
}

/*ABOUT*/


.about-content {
width: 100%;
position: relative;
justify-content: center;
flex-wrap: wrap;
display: flex;
align-items: center;
}
.about-content .side-text {
width: 550px;
padding: 50px 40px;
background: #fff;
box-shadow: 2px 0 100px rgba(0,0,0,0.3);
border-radius: 5px;
text-align: justify;
line-height: 22px;
opacity: 0;
transform: translateX(-100px);
transition: 1s ease-in-out;
}
.about-content .side-text-appear {
opacity: 1;
transform: translateX(0px);
}
.about-content .side-text h2 {
padding: 10px;
}
.about-content .side-text p {
padding: 10px;
}
.about-content .side-image{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 626px;
  height: 382.28px;
}
.about-content .side-image img {
  width: 95%;
  height: 95%;
border-radius: 5px;
}
.sideImage {
transform: translateX(100px);
opacity: 0;
transition: .8s ease-in-out;
overflow: hidden;
}
.sideImage-appear {
opacity: 1;
transform: translateX(0px);
}


/*POPULAR SUBJECTS*/
.cbox {
position: relative;
width: 100%;
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
}
.cbox .det {
width: 250px;
height: 80px;
margin: 10px;
background: #fff;
cursor: pointer;
}
.cbox .det a{
justify-content: space-around;
width: 250px;
padding: 28px;
border-radius: 10px;
border: 1px solid #e71010;
font-size: 15px;
color: #272529;
font-family: cursive;
text-decoration: none;
}
.cbox .det a:hover {
background: linear-gradient(to right, #e71010, #2e1baa);
color: white;
}
.cbox .det a:hover img{
filter: brightness(100);
}
.cbox img {
width: 20px;
margin-right: 20px;
}

/*TEAM SECTION*/
.totalcard {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-bottom: 50px;
}
.totalcard .car {
margin: 25px;
width: 260px;
border-radius: 10px;
background: #fff;
}
.totalcard .car{
box-shadow: inset 0 0 10px rgba(0,0,0,0.4),
            0 0 10px rgba(0,0,0,0.3);
}

.totalcard .car img {
width: 100px;
height: 100px;
margin-top: 5px;
cursor: pointer;
border-radius: 50px;
transition-duration: .8s;
}
.totalcard .car img:hover {
transform: scale(1.5);
border-radius: 6px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

#detail a {
  width: 60%;
  text-decoration: none;
  margin-bottom: 30px;
  margin-left: 20%;
  margin-top: 10px;
  align-self: center;
  }

#detail a .button-team {
  width: 100%;
outline: none;
padding: 8px;
border-radius: 10px;
border-style: none;
border: 1px solid black;
cursor: pointer;
transition-duration: .2s;
}
.button-team:hover {
background: #1a18a1d8;
color: #fff;
}
.card-title {
font-size: 17px;
color: #343A40;
padding: 20px;
font-weight: 700;
}
/* Service section */
.service-swipe {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)),url("images/lab.jpg");
background-size: cover;
background-attachment: fixed;
}
.service-swipe .s-card img {
width: 100px;
}
.service-swipe .a {
padding: 0;
margin: 40px 10px;
}
.service-swipe a {
padding: 0;
margin: 40px 10px;
}
.service-swipe .s-card {
display: flex;
justify-content: space-around;
padding: 10px;
align-items: center;
text-align: center;
width: 350px;
height: 200px;
background-color: #1e229c79;
box-shadow: inset 0 0 20px rgba(255,255,255,0.05),
            0 0 50px rgba(0,0,0,0.8);
border-radius: 5px;
cursor: pointer;
transition-duration: .5s;
}
.service-swipe .s-card p {
color: #f2f2f2;
font-size: 1.4em;
font-family: 'Open Sans',sans-serif;
}
.service-swipe .s-card:hover {
box-shadow: 0 0 50px rgba(255,255,255,0.8);
transform: translateY(-10px);
}

/*Contact Us Section*/


#contactus_section
{
  background: url(images/csspattern.png);
}

.back-contact {
transform: translateY(-50px);
display: flex;
align-items: center;
justify-content: space-around;
}

.cc
{
  display: flex;
  width: 500px;
  height: auto;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.466);
}
.imp 
{
color: red;
}



.cc form {
  margin: 5%;
  margin-top: 40px;
  width: 90%;
  height: 90%;
  }
  .cc form label {
  position: absolute;
  color: #2E3D49;
  font-size: 10px;
  font-weight: 800;
  }
  .cc form input {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: inset 0 0 5px lightgray;
  border: 1px solid rgba(0,0,0,0.2);
  outline: none;
  color: #2E3D49;
  font-weight: 600;
  }




form textarea {
width: 100%;
height: 80px;
box-shadow: inset 0 0 5px lightgray;
border: 1px solid rgba(0,0,0,0.2);
border-radius: 5px;
outline: none;
color: #2E3D49;
font-weight: 600;
padding: 15px;
}
#csubmit {
margin-top: 20px; 
background: linear-gradient(to right, #e71010, #2e1baa);
border-radius: 5px;
border-style: none;
outline: none;
width: 100%;
padding: 15px 25px;
color: #fff;
font-size: 12px;
cursor: pointer;
}

/* Countries */
.cxcx
{
  width: 100%;
  height: 110vh;
}
.bobo
{
  display: flex;
  padding: 0 35px;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  background: #dfe0e0;
}
.wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;
}
.wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.wrapper i:first-child{
  left: -22px;
}
.wrapper i:last-child{
  right: -22px;
}
.wrapper .carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 25px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* background-color: #6A6D78; */
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel.no-transition {
  scroll-behavior: auto;
}
.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
.carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel .card {
  scroll-snap-align: start;
  width: 345px;
  height: 362px;
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
}
.carousel .card .img {
  /* background: #8B53FF; */
  width: 100%;
  height: 75%;
  border-radius: 8px;
}
.carousel .card h2 {
  font-weight: 600;
  font-size: 28px;
  margin: 30px 0 5px;
  user-select: none;
}
.carousel .card a 
{
  color: #6A6D78;
  font-size: 17px;
  transition: 0.2s;
  user-select: none;
}
.carousel .card a:hover
{
    text-decoration: underline;
}
.carousel .c1 .img
{
    background-image: url(images/australia.jpg);
    background-position: center;
    background-size: cover;
}
.carousel .c2 .img
{
    background-image: url(images/japan.jpg);
    background-position: center;
    background-size: cover;
}
.carousel .c3 .img
{
    background-image: url(images/newzealand.jpeg);
    background-position: center;
    background-size: cover;
}
.carousel .c4 .img
{
    background-image: url(images/europe.jpg);
    background-position: center;
    background-size: cover;
}
.carousel .c5 .img
{
    background-image: url(images/usa.jpg);
    background-position: center;
    background-size: cover;
}
.carousel .c6 .img
{
    background-image: url(images/canada.jpg);
    background-position: center;
    background-size: cover;
}


/*REVIEW SECTION*/
#makeitfull {
display: flex;
justify-content: center;
transform: translateY(50px);
}
#makeitfull img {
width: 50px;
}
.review {
background: #F8F8F8;
width: 100%;
}
.rev-container {
padding: 10px 10%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.rev-container .rev-card {
/*overflow: hidden;*/
width: 420px;
height: 240px;
margin-bottom: 40px;
background: #fff;
display: flex;
padding: 6px;
box-shadow: 2px 2px 20px rgba(0,0,0,0.2);
}
.rev-card:hover {
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}
.identity {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
.identity img {
width: 100px;
height: 100px;
transition-duration: .8s;
border-radius: 50%;
}

.identity p {
width: 155px;
font-weight: bold;
color: #2E3D49;
text-align: center;
}
.identity h6 {
width: 150px;
text-align: center;
}
.identity .rating img {
width: 12px;
height: 12px;
margin-right: 5px;
}
.rev-cont {
overflow: hidden;
}
.rev-cont #title {
padding: 10px;
color: #2E3D49;
font-weight: bold;
}
.rev-cont #content {
padding: 10px;
font-size: .9em;
color: #2E3D49;
line-height: 22px;
text-align: justify;
}

/*SCROLLING TEXT*/
.marqu {
text-align: center;
justify-content: center;
color: #fff;
font-size: 20px;
padding: 10px;
}

/*FOOTER*/
footer {
color: #E5E8EF;
background: #000D;
padding: 15px 0 12px 0px; 
}
footer .footer-container {
max-width: 1300px;
margin: auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap-reverse;
}
footer .footer-container .left-col .lili
{
  width: 250px;
  height: 50px;
  font-size: 34px;
  font-weight: 600;
  margin-left: 5px;
  margin-bottom: 15px;
  border-radius: 12px;
}
footer .footer-container .left-col .map
{
  width: 120px;
  height: 30px;
  background-color: #FA6146;
}
footer .right-col h1{
font-size: 26px;
}
footer .border{
width: 100px;
height: 4px;
background: linear-gradient(to right, #e71010, #2e1baa);
margin: 2px;
}
footer .newsletter-form {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
footer input::placeholder {
color: white !important;
}
footer .txtb {
flex: 1;
padding: 18px 40px;
font-size: 16px;
background: #343A40;
border: none;
font-weight: 700;
outline: none;
border-radius: 5px;
min-width: 260px;
margin-top: 20px;
color: white;
}
footer .btn {
margin-top: 20px;
padding: 18px 40px;
font-size: 16px;
color: #f1f1f1;
background: linear-gradient(to right, #e71010, #2e1baa);
border: none;
font-weight: 700;
outline: none;
border-radius: 5px;
margin-left: 20px;
cursor: pointer;
transition: opacity .3s linear;	
}
footer .btn:hover {
opacity: .7;
}
.creator
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  text-align: center;
  padding: 6px;
  font-size: 16px;
  background-color: #3b3b3b;
  margin-top: 20px;
}


/*PROPERTIES FOR MAKING WEBSITE RESPONSIVE*/


@media screen and (max-width: 1250px)
{
  .get-started
  {
    display: none;
  }
}

@media screen and (max-width: 1130px)
{
  nav ul
  {
    margin-left: 20px;
  }
}
@media screen and (max-width: 1100px) 
{	
  .logo img
  {
    margin-left: 0;
  }
}
@media screen and (max-width: 1080px) 
{	
  nav ul{
    margin-left: 10px;
  }
  nav ul li
  {
    margin: 5px 5px;
  }
}

@media screen and (max-width: 1024px)
{
  nav .innfo
  {
    display: none;
  }
  nav .pox
  {
    margin-top: 0;
  }
}


@media screen and (max-width: 1000px) {
  .footer-container {
  max-width: 600px;
  }
  .right-col {
    display: none;
  }
  .left-col {
  width: 100%;
  text-align: center;
  }
  .social-media {
  display: flex;
  justify-content: center;
  }
  .logo {
  transition: 1s;
  margin-left: 30%;
  }
  nav ul, .srch, .get-started{
  display: none;
  }
  .menu {
  display: block;
  margin-left: 15%;
  }
  nav {
    height: 75px;
  padding-bottom: 20px;
  border-bottom: 1px solid #0005;
  /* position: fixed; */
  /* top: 0; */
  }
  nav .pox
  {
    margin-top: 0px;
  }
  .quote p, .quote h5, .play {
  justify-content: center;
  text-align: center;
  }
  .quote p {
    margin-top: 20px;
  font-size: 30px;
  }
  .quote p::before {
      width: 162px;
      left: 32%;
  }
  .service-container .right-side img {
  width: 90%;
  }
  .title {
  margin-top: 0px;
  }
  
}

@media screen and (max-width: 950px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
}


@media screen and (max-width: 700px) 
{
  .wrapper .carousel {
    grid-auto-columns: calc((60% / 1) - 9px);
  }
}



@media screen and (max-width: 665px)
{
  .head-container .headervideo
  {
    top: 75px;
  }
  #about_section
  {
    top: -150px;
  }
}


@media screen and (max-width: 630px)
{
  .about-content .side-image
  {
    width: 600px;
    height: 356.28px;
  }
  .logo
  {
    margin-left: 10%;
  }
}


@media screen and (max-width: 600px)
{
  .wrapper .carousel 
  {
    grid-auto-columns: 80%;
  }
  .about-content .side-image
  {
    width: 520px;
    height: 276.28px;
  }
}


@media screen and (max-width: 520px)
{
  .logo img
  {
  width: 300px;
  margin-left: 0px;
  }
  .menu
  {
    margin-left: 5%;
  }
}


@media screen and (max-width: 360px) 
{
  .logo img
  {
    display: none;
  }
  .logo .smalllogo
  {
    width: 70px;
    height: 70px;
    display: block;
  }
  .logo
  {
    margin-left: 44%;
  }
  .menu
  {
    margin-left: 20%;
  }
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 1) - 9px);
  }
  .wrapper .carousel .card
  {
    width: 100%;
  }
  .service-swipe .s-card {
  width: 300px;
  height: 150px;
  }
  .side-image #hehe
  {
    width: 300px;
    height: 200px;
    margin-left: 0px;
  }
  .about-content .side-text
  {
    width: 320px;
  }
  .rev-container .rev-card
  {
    display: flex;
    flex-direction: column;
    width: 300px;
    height: auto;
  }
  .rev-cont
  {
    overflow: scroll;
  }
  .csec {
    top: 350px;
    }
  .quote p::before
  {
    left: 28%;
  }
  .cc
  {
    width: 310px;
    height: 448px;
  }
  .cc form
  {
    margin-top: 12px;
  }
  form textarea
  {
  height: 40px;
  }
  #csubmit
  {
    padding: 12px 25px;
    height: 40px;
    margin-top: 8px;
  }
}