@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
*{ box-sizing:border-box;}
html{font-smoothing:antialiased;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased; scroll-behavior: smooth;}
body{font:normal 16px/20px "Roboto", serif; margin: 0; background: #fff; color: #000;  counter-reset: my-sec-counter; overflow-x: hidden;}
.clear{content:".";display:block;clear:both;height:0;visibility:hidden;}
img{max-width:100%;width:auto\9;height:auto;border:0;-ms-interpolation-mode:bicubic; vertical-align: middle;}
i{display: inline-block; vertical-align: middle;}
a{text-decoration: none; color: inherit; display: inline-block; vertical-align: middle;}
ul{ margin:0; list-style: none; padding:0px; }
i,span{display: inline-block; vertical-align: middle;}
h1,h2,h3,h4,h5,h6{font-weight: normal; margin:0;}
:root {
	--black: #404040;
  --darkblack: #000000;
  --grey: #a2a2a2;
	--white: #fff;
  --red: #ff265d;
  --blue: #393957;
}
.title{font-family: "Changa One", serif;}

.container{max-width: 1160px; margin: 0 auto;}
.flex{display: flex; align-items: center;}
.text-transform{text-transform: uppercase;}
.text-center{text-align: center;}

header{ padding: 15px 0 65px; background: url("../images/header-curve.png"); background-size: 110%; background-repeat: no-repeat; background-position: bottom center; position: relative; z-index: 1; position: fixed; top: 0; left: 0; width: 100%; z-index: 9;  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;}
header .container{display: grid; grid-template-columns: auto max-content; align-items: center; max-width: 90%;}
.logo img{width: 310px;}
nav ul{text-transform: uppercase; display: flex; grid-gap: 40px;}
nav ul li a{color: #000; font-size: 14px; font-weight: bold;}

header.scrolled { background: #ffffff; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); padding: 10px 0;}

.hamburger {
  cursor: pointer;
  display: none;
  flex-direction: column;
  gap: 5px;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 25px;
  background-color: #333;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}

/* Add an animation effect for active state */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translateY(11px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-11px);
}

.body-wrapper{padding-top: 200px;}

.banner-wrapper{position: relative;}
.banner-wrapper::before{content: ""; background-image: url("../images/mid-curve.png"); position: absolute; bottom: -5px; width: 100%; height: 100px; background-size: 100%; z-index: 2;}
.banner-section{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0px; align-items: center;}
.banner-section h1{ font-size: 56px; line-height: 65px; font-weight: bold; text-transform: uppercase; margin-left: 20%; margin-top:-150px;}
.banner-right-panel{margin-top: -70px; position: relative; text-align: right;}
.banner-right-panel::before{ content: ""; width: 500px; height: 500px; border-radius: 50%; background: #ffb700; position: absolute; top: 15%; left: 8%; z-index: -1; transform: translatey(0); animation: 6s ease-in-out infinite float;}
.banner-right-panel img{ width: 800px;}
.banner-wrapper::after{content: ""; width: 150px; height: 150px; border-radius: 50%; background: #ffb700; position: absolute; bottom: 0; left: -40px; z-index: -1; transform: translatey(0); animation: 10s ease-in-out infinite slowfloat;}

.about-warpper{background-color: #f6f4f6;}
.aboutus-section{ padding: 200px 0 300px; position: relative;}
.aboutus-section::before{    content: "";
  background-image: url(../images/line.gif);
  width: 100%;
  height: 165%;
  position: absolute;
  background-size: 110%;
  top: 270px;
  background-repeat: no-repeat;
  left: -50px;}
.about-list{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 180px; align-items: center; margin-bottom: 460px;}
.about-list:last-child{margin-bottom: 0;}
.about-left-section { position: relative;}
.about-left-section:before{content: ""; width: 520px; height: 520px; background: #ffb700; border-radius: 50%; position: absolute; z-index: 0; top: 50%; left: 0; transform: translateY(-50%);}
.about-left-section img{ width: 215px; transform: scale(1); animation: 8s infinite pulse;}
.about-left-section h2{ text-transform: uppercase; font-weight: bold; font-size: 84px; line-height: 96px; text-shadow: 3px 3px #ffdd88;}
.about-left-section-content{ position: relative; display: flex; align-items: center; grid-gap: 30px; padding-left: 10%;}
.about-content{ font-size: 26px; line-height: 34px; font-weight: bold;}
.about-content p{ margin-bottom: 20px; color: #020202;}
.about-content p:last-child{ margin-bottom: 0px; color: #080808;}

.about-list.order-change{ grid-gap: 50px; position: relative;}
.about-list.order-change::before{content: none; width: 40px; height: 40px; border-radius: 50%; background: #ffb700; position: absolute; top: -62%; right: 50%; z-index: 1;}
.about-list.order-change::after{content: none; width: 40px; height: 40px; border-radius: 50%; background: #ffb700; position: absolute; bottom: -67%; right: 50%; z-index: 1;}
.about-list.order-change .about-left-section{order: 2;}
.about-list.order-change .about-content{order: 1;}
.about-list.order-change .about-left-section img{ order: 2; position: absolute; right: -95px; width: 535px; top: -130px;}
.about-list.order-change .about-left-section h2{order: 1;}
.about-list.order-change .about-left-section-content{padding-left: 0; padding-right: 15%;}
.about-list.order-change .about-left-section:before{right: 0; left: auto;}

.how-do-we-section{ background-color: #70d0d6; padding: 80px 0;}
.how-section{ text-align: center;}
.how-section h3{text-transform: uppercase; font-weight: bold; font-size: 60px; line-height: 60px; text-shadow: 2px 1px #fff; word-spacing: 5px;}
.how-section p{ font-size: 28px; margin: 20px 0 0; font-weight: bold; text-transform: uppercase; font-style: italic;}
.how-do-grid{display: grid; grid-template-columns: 7fr 5fr; grid-gap: 50px; align-items: center; margin-top:100px;}
.how-list > div{margin-bottom: 35px;}
.how-list h4{ background-color: #fff; display: inline-block; font-size: 24px; margin-bottom: 10px; padding: 5px; font-weight: bold;}
.how-list p{ margin: 0; font-size: 24px; line-height: 34px; font-weight: bold;}
.how-right-section{position: relative;}
.how-right-section::before{content: ""; position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%); border: 2px dashed #ffffff; width: 500px; height: 500px; border-radius: 50%; margin-top: 3px;}
.how-right-section img{position: relative;}
.how-right-section::after{content: ""; position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%); background-color: #fff; width: 35px; height: 35px; border-radius: 50%; animation:  wiggle 3s infinite;}

.why-section{padding: 80px 0; background-color: #fff;}
.why-section h2{text-align: center; font-size: 60px; line-height: 60px; text-transform: uppercase;}
.why-list{margin: 80px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 60px;}
.why-list > div{background-color: #f8f8f8; padding: 30px 20px; border-radius: 15px; text-align: center;}
.why-list > div h4{ font-size: 20px; line-height: 26px; font-weight: bold; font-style: italic;}
.why-list > div p{font-size: 20px; line-height: 26px; font-weight: bold; color: #030303;}

.join-header{background-color: #e98a78; padding: 100px 20px; text-align: center; font-size: 60px; line-height: 60px; text-transform: uppercase; text-shadow: 2px 1px #fff; position: relative; z-index: 1;}
.join-header::before{content: ""; background: url(../images/join.jpg) #e98a78; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-repeat: no-repeat; background-size: 100%; z-index: -1; opacity: .2; background-position: 0 80%;}
.join-list{ display: grid; grid-template-columns: repeat(2, 1fr); position: relative;}
.join-list-content{ position: absolute; bottom: 0; left: 0; background-color: #e8e7ec; padding: 20px 40px; width: 50%; text-align: right; font-weight: bold; font-size: 26px; line-height: 34px; font-style: italic;}
.list-content{width: 420px; display: grid; justify-self: end;}

.join-content-section .join-list:nth-child(even) > div:nth-of-type(1){order: 2;}
.join-content-section .join-list:nth-child(even) > div:nth-of-type(3){order: 1;}
.join-content-section .join-list:nth-child(even) .join-list-content{ left: auto; right: 0; text-align: left;}

.join-list-content::before{content: ""; background-color: #ff957d; width: 110px; height: 150px; position: absolute; bottom: 100%; right: 0; animation: wiggle 3s infinite;}
.join-content-section .join-list:nth-child(even) .join-list-content::before{left: 0; right: auto;}
.join-content-section .join-list:nth-child(even) .list-content{ justify-self: flex-start;}

.join-content-section{position: relative;}
.join-content-section::before{content: "";
  background-image: url(../images/join-line.gif);
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 110%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-repeat: no-repeat;}

.join-list-content::after{content: none; width: 40px; height: 40px; border-radius: 50%; background: #ff957d; position: absolute; bottom: 256%; right: 55%; z-index: 1; transform: scale(1); animation: 2s infinite pulse;}
.join-list:nth-of-type(2) .join-list-content::after{right: 40%;}
.join-list:nth-of-type(3) .join-list-content::after{bottom: 210%; right: 58%;}
.join-list:nth-of-type(4) .join-list-content::after{bottom: 380%; right: 57%;}

.success-stories-wrapper{ background: #6fd0d6; padding: 100px 0px;}
.success-header{text-align: center;}
.success-header h3{text-transform: uppercase; font-weight: bold; font-size: 60px; line-height: 60px; text-shadow: 2px 1px #fff; word-spacing: 5px;}
.success-header p{ font-size: 28px; margin: 20px 0 0; font-weight: bold; text-transform: uppercase; font-style: italic;}
.stories-slider{margin: 0;}
.testimonial-section{ position: relative; background-color: #fff; border-radius: 200px; display: grid; grid-template-columns: 1fr; align-items: center;}
.testimonial-content{ padding: 30px 50px 30px 250px;}
.testimonial-content p{margin: 0 0 14px; font-size: 22px; line-height: 28px; font-weight: bold; color: #030303; font-style: italic;}
.testimonial-content h6{color: #347d83; font-size: 18px; text-transform: uppercase; font-weight: bold; font-style: italic; margin-bottom: 5px;}
.testimonial-content h5{color: #347d83; font-size: 18px; font-weight: bold;}
.testi-quote{ position: absolute; width: 255px; left: -10px; top: -9px; }
.testi-quote::before{content: none; font-family: "Passion One", serif; font-size: 100px;}
.stories-item{ padding: 180px 0 220px;}

.form-wrapper{ background-color: #f7f7f7; padding: 100px 20px 200px;}
.form-header{text-align: center;}
.form-header h3{text-transform: uppercase; font-weight: bold; font-size: 60px; line-height: 60px; text-shadow: 2px 1px #6fd0d6; word-spacing: 5px;}
.form-header h6{ font-size: 28px; margin: 20px 0 0; font-weight: bold; text-transform: uppercase; font-style: italic;}
.form-header p{font-size: 18px; line-height: 24px; font-weight: 500; margin: 30px auto 0; max-width: 70%;}

.form-section{ max-width: 60%; margin: 60px auto 0; background-color: #fff; border-radius: 10px; box-shadow: 1px 1px 5px rgba(0,0,0,0.16);}
.form-section h1{ background-color: #ff957d; text-transform: uppercase; padding: 40px 0; text-align: center;  border-radius: 10px 10px 0 0; border-bottom: 6px solid #d8d8d8; font-weight: bold; font-size: 40px;}
.form-section form{padding: 30px;}
.form-section .two-grid{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 30px;}
.input-style{position: relative;}
.input-style img{ position: absolute; top: 4px; left: 0; width: 28px;}
.input-style input{width: 100%; border: 0; border-bottom: 1px solid #cccccc; padding: 10px 38px 10px; margin-bottom: 24px; font-size: 18px; outline: none;}
.input-style.without-icon input{padding-left: 0;}
.checkbox{ font-size: 12px; color: #bebebe;}
.checkbox input{display: inline-block; vertical-align: middle; margin-right: 6px;}
.cta{text-align: center;}
.cta button{background-color: #ff957d; border: 0; border-bottom: 4px solid #d8d8d8;  text-transform: uppercase; font-size: 25px; font-weight: bold; padding: 12px 26px; border-radius: 6px; margin-top: 20px;}

footer{padding: 50px 0; background-color: #ffb600; color: #fff; position: relative;}
footer:before{content: ""; background-image: url(../images/footer-mid-curve.png); position: absolute; top: -80px; left: 0; width: 100%; height: 100px; background-size: 100%; z-index: 2; background-repeat: no-repeat;}
footer .footer-logo{margin-bottom: 30px;}
footer .footer-logo img{width: 50%;}
footer p{font-size: 18px;}
.social-icons{display: flex; grid-gap: 30px; justify-content: center; margin-top: 30px;}
.social-icons img{width: 30px;}

@keyframes float {
  0%,100% {
      transform: translatey(0)
  }

  50% {
      transform: translatey(-50px)
  }
}

@keyframes slowfloat {
  0%,100% {
      transform: translatey(0)
  }

  50% {
      transform: translatey(-30px)
  }
}

@keyframes pulse {
  0%,100% {
      transform: scale(.85)
  }

  70% {
      transform: scale(1)
  }
}

@keyframes wiggle {
  0%, 100% {
      transform: translateY(0); /* Original position */
  }
  25% {
      transform: translateY(-5px); /* Move up */
  }
  75% {
      transform: translateY(5px); /* Move down */
  }
}

.blog-wrapper {}
.blog-header{position: relative; height: 200px; background: #000;}
.blog-header:before{background-image: url("../images/blog-bg.png"); content: ""; background-size: 100%; height: 100%; width: 100%; position: absolute; left:0; top: 0; opacity: 0.5; background-position: 0 50%;}
.blog-header h1{position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); text-align: center; font-weight: bold; font-size: 90px; line-height: 90px;}
.blog-header h1 span{display: inline-block; letter-spacing: 5px;}
.blog-header h1 span:first-of-type{text-shadow: 4px 1px #ffb600; color: #fff;}
.blog-header h1 span:last-of-type{text-shadow: 4px 1px #fff; color: #ffb600;}
.blog-list{display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 60px; padding: 100px 0;}

#typed, .typed-cursor{color: #ffb700; display: inline-block; vertical-align: middle;}

.team-wrapper{padding: 100px 0;}
.team-wrapper h1{text-transform: uppercase; font-weight: bold; font-size: 60px; line-height: 60px; text-shadow: 2px 1px #ffb700; word-spacing: 5px; text-align: center;}
.team-list{ margin-top: 100px; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 50px;}
.team-list > div{background-color: #fff; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.16); text-align: center; padding: 0 20px 30px; margin-bottom: 20px;}
.team-list > div img{width: 180px; height: 180px; border-radius: 50%; object-fit: cover; border: 2px dashed #ffb700; margin-top: -45px; padding: 4px; margin-bottom: 20px;}
.team-list > div h5{ font-weight: bold; font-size: 20px; line-height: 26px; margin-bottom: 8px;}
.team-list > div h6{ font-size: 16px; color: #585555;}
.team-list.center-align-team{display: flex; flex-wrap: wrap; justify-content: center;}
.team-list.center-align-team > div{width: 260px;}

.checkbox input[type="checkbox"] {
  display: none; /* Hide the default checkbox */
}

.checkbox label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  color: #333;
  gap: 8px;
}

.checkbox label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 0px; /* Rounded corners */
  background-color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
  position: relative;
}

.checkbox input[type="checkbox"]:checked + label::before {
  background-color: #26abe0; /* Green background when checked */
  border-color: #26abe0;
}

.checkbox input[type="checkbox"]:checked + label::before::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 6px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox input[type="checkbox"]:checked + label::before {
  content: '✔'; text-align: center; color: #fff;
}

.form-iframe {width: 100%; height: 960px; border: 0;}

.container.blog-container{padding: 160px 0 0;}
.blog-container h1{ text-transform: uppercase;}
.blogmain-list{display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; margin-top:40px;}
 .blog-item{background: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); border-radius: 10px;}
.blog-item img {width: 100%; border-radius: 10px 10px 0 0;}
.blog-content{padding: 16px;}
.blog-content h1, .blog-post h1{text-transform: uppercase; font-size: 20px;
    line-height: 26px; font-weight: bold;}
.blog-content p{color: #666666; font-size: 14px; line-height: 22px;}
.category-date-time{ display: grid; grid-template-columns: auto max-content; grid-gap: 5px; align-items: center;}
 {padding: 0;}
.category span{    color: #242976;
    background: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #242976;}
  .blog-content a  {width: 100%;
    text-align: center;
    background: #242976;
    padding: 10px;
    color: #fff;
    border-radius: 10px;}
     .blog-post h1{margin: 36px 0;}
     
     .home-blog-list .blog-list{padding: 60px 0 50px;}
     .blog-all{margin-bottom: 50px;
    display: grid;
    justify-content: center;}
     .blog-all a{text-transform: uppercase;
    border: 1px solid #ffb600;
    padding: 10px 50px;
    border-radius: 5px;
    background: #ffb600;
    font-weight: bold;}
     
     .truncate-title-line{ display: -webkit-box; /* Enables the flexbox container for text */
    -webkit-line-clamp: 3; /* Limits the text to 3 lines (adjust as needed) */
    -webkit-box-orient: vertical; /* Specifies the box's orientation */
    overflow: hidden; /* Hides the overflowing content */
    text-overflow: ellipsis;}
    
    .truncate-desc-line{ display: -webkit-box; /* Enables the flexbox container for text */
    -webkit-line-clamp: 5; /* Limits the text to 3 lines (adjust as needed) */
    -webkit-box-orient: vertical; /* Specifies the box's orientation */
    overflow: hidden; /* Hides the overflowing content */
    text-overflow: ellipsis;}
    .related-blogs{padding-top: 20px; padding-bottom: 150px;}
    
    .container.blog-container.blog-listing-page{padding-bottom: 150px !important;}
    
@media only screen and (max-width: 767px) {
  header{ background-color: #f7f7f7; padding: 20px 15px 20px; background-image: none;}
  header.scrolled{padding: 20px 15px;}
  .logo img {width: 200px; }
  nav{display: none;}
  .body-wrapper{padding-top: 80px;}
  .banner-wrapper{padding: 15px;}
  .banner-section{grid-template-columns: repeat(1, 1fr); grid-gap: 20px;}
  .banner-section h1{font-size: 26px; line-height: 36px; margin-left: 0; margin-top: 0; text-align: center;}
  .banner-right-panel{margin-top: 0;}
  .banner-wrapper::before{background-repeat: no-repeat; background-position: bottom center; left: 0;}
  .banner-wrapper::after{width: 90px; height: 90px; animation: none;}
  .banner-right-panel::before{width: 200px; height: 200px;}
  .about-warpper{padding: 0 15px;}
  .aboutus-section{padding: 70px 0 100px;}
  .about-list{grid-template-columns: repeat(1, 1fr); grid-gap: 30px; margin-bottom: 40px;}
  .about-left-section:before{width: 150px; height: 150px;}
  .about-left-section img { width: 70px; }
  .about-left-section-content{padding-left: 5%;}
  .about-left-section h2{font-size: 38px; line-height: 40px;}
  .about-content { font-size: 20px; line-height: 26px;}
  .aboutus-section::before, .about-list.order-change::before, .about-list.order-change::after, .join-content-section::before, .join-list-content::before, .join-list-content::after, .how-right-section::before, .how-right-section::after{content: none;}
  .about-list.order-change .about-left-section{order: 1;}
  .about-list.order-change .about-left-section img{right: 0; width: 160px; top: -15px;}
  .about-list.order-change{margin-bottom: 70px;}
  .how-section h3, .why-section h2, .join-header h2, .join-header h2, .success-header h3, .form-header h3, .blog-header h1, .team-wrapper h1{font-size: 40px; line-height: 50px;}
  .how-section p, .success-header p, .form-header h6{font-size: 26px; line-height: 34px;}
  .how-do-we-section{padding: 60px 15px;}
  .how-do-grid{margin-top: 50px; grid-template-columns: 1fr; grid-gap: 0;}
  .why-section{padding: 60px 15px;}
  .why-list { margin: 30px 0 0; grid-template-columns: repeat(1, 1fr); grid-gap: 30px;}
  .join-header{padding: 40px 15px;}
  .join-list{grid-template-columns: repeat(1, 1fr);}
  .join-list .empty { display: none; }
  .join-list-content{ position: static; padding: 20px; width: 100%; text-align: center;}
  .list-content{width: 100%;}
  .success-stories-wrapper{padding: 40px 15px;}
  .testimonial-section{grid-template-columns: 100px 1fr; border-radius: 10px; padding: 20px; grid-gap: 10px;}
  .testi-quote{width: 100px; position: static;}
  .form-wrapper{padding: 40px 15px;}
  .form-header p{max-width: 100%;}
  .form-section { max-width: 100%; margin: 40px auto 0; }
  .form-section h1{font-size: 30px;}
  .form-section form{padding: 20px;}
  .form-section .two-grid{grid-template-columns: repeat(1, 1fr); grid-gap: 0;}
  .cta button{font-size: 20px;}
  footer {padding: 15px; margin-top: 40px;}
  .stories-item{ padding: 60px 0;}
  .testimonial-content{padding: 0px;}
  .testimonial-content h6, .testimonial-content h5{font-size: 14px;}
  .testimonial-content p{font-size: 20px; line-height: 26px;}
  footer:before{top: -45px;}
  .hamburger{display: flex;}
  nav ul{display: block;}
  nav ul li a {
    color: #ffffff;
    font-size: 14px;
    font-weight: bold;
    padding: 15px;
    display: block;
}
.menu {
  display: none;
  position: absolute;
  top: 70px; /* Adjust based on your header height */
  right: 0;
  background-color: #fff;
  width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.menu.show {
  display: block;
  position: fixed;
  background: #242976;
  top: 0;
  width: 82%;
  height: 100%;
  left: 0;
  padding-top: 15px;
}
.blog-list{grid-gap: 20px; padding: 40px 15px;}
.team-wrapper{padding: 40px 15px;}
.team-list{grid-template-columns: repeat(2, 1fr); grid-gap: 20px;}
.team-list > div{margin-bottom: 50px;}
.team-list > div img{width: 130px; height: 130px;}
.home-blog-list .blog-list {grid-template-columns: repeat(1, 1fr); padding: 60px 15px 50px; }
.container.blog-container {
    padding: 100px 15px;
}
.blogmain-list{grid-template-columns: repeat(1, 1fr);}
.team-list:nth-of-type(2), .team-list:nth-of-type(3) {
    margin-top: 30px;}
    .team-list.center-align-team{display: grid;}
    .team-list.center-align-team > div{width: 100%;}
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  header{background-color: #f7f7f7; padding: 15px; background-image: none;}
  .logo img { width: 200px; }
  nav ul{grid-gap: 20px;}
  .banner-section h1 { font-size: 30px; line-height: 42px;}
  .banner-right-panel::before{width: 250px; height: 250px;}
}