/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Poppins", sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 12px;
  line-height: 28px;
  color: #1e1e1e;
  text-align: justify;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: "Poppins", sans-serif;
}

::selection {
  background: #0071f8;
  color: #fff;
}

::-moz-selection {
  background: #0071f8;
  color: #fff;
}

.section {
  margin-top: 80px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading h2 {
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 50px;
  line-height: 44px;
  color: #02314c;
}

.section-heading h2 em {
  font-style: normal;
  color: #02314c;
}

.section-heading h6 {
  color: #1e1e1e;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
    -webkit-transform: translateX(96px);
    transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
    -webkit-transform: translateX(-31px);
    transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #63bbd6;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #63bbd6;
  border-radius: 50%;
}

/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #63bbd6 !important;
  border-radius: 0px 0px 25px 25px;
  height: 80px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.background-header .logo img {
  max-width: 110px;
}

.header-area {
  position: absolute;
  background-color: transparent;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
}

.header-area .main-nav .logo h1 {
  font-size: 36px;
  text-transform: uppercase;
  color: #fff;
  font-weight: 600;
  margin-right: 30px;
  padding-right: 30px;
  border-right: 1px solid rgba(250, 250, 250, 0.3);
}

.background-header .main-nav .logo {
  margin-top: 18px;
}

.header-area .main-nav ul.nav {
  border-radius: 0px 0px 25px 25px;
  flex-basis: 100%;
  margin-top: 10px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  height: 40px;
  line-height: 40px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 15px;
  height: 40px;
  line-height: 40px;
  text-transform: capitalize;
  color: #1e1e1e;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border: transparent;
  letter-spacing: 0.25px;
}

.header-area .main-nav .nav li:nth-last-child(1) a,
.header-area .main-nav .nav li:nth-last-child(2) a {
  background: linear-gradient(to bottom, #02314c, #0573b2);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  text-transform: uppercase;
  font-weight: 500;
  color: #ffffff;
}

.header-area .main-nav .nav li:nth-last-child(1):hover a,
.header-area .main-nav .nav li:nth-last-child(2):hover a {
  background: linear-gradient(to bottom, #0573b2, #02314c);
}

.header-area .main-nav .nav li:hover a {
  background-color: rgba(255, 255, 255, 0.1);
}

.header-area .main-nav .nav li a.active {
  color: #1e1e1e;
  background-color: rgba(255, 255, 255, 0.1);
}

.background-header .main-nav .nav li a.active {
  color: #1e1e1e;
  background-color: rgba(255, 255, 255, 0.1);
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 22px;
}

.background-header .main-nav ul.nav {
  margin-top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky .nav li a.active {
  color: #1e1e1e;
}

.visible {
  display: inline !important;
}

.header-sticky .logo img {
  max-width: 60px; /* Adjust the logo width when sticky */
  height: auto;
  transition: all 0.3s ease; /* Smooth transition for size change */
}
@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media (max-width: 767px) {
  .background-header .main-nav {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
    border-radius: 0px 0px 25px 25px;
    width: 100%;
  }
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background-color: #fff;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 500;
    color: #1e1e1e;
    background-color: #fff;
  }
  .header-area .main-nav .nav li a {
    display: block;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0;
    font-weight: 500;
    font-size: 15px;
    height: 0px;
    line-height: 40px;
    text-transform: capitalize;
    color: #1e1e1e;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    border: transparent;
    letter-spacing: 0.25px;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #ddd;
    background-color: #f1f0fe;
    height: 50px;
    border-radius: 0px 0px 25px 25px;
  }
  .background-header .main-nav .nav li:last-child(1) a,
  .background-header .main-nav .nav li:last-child(2) a,
  .header-area .main-nav .nav li:nth-last-child(1) a,
  .header-area .main-nav .nav li:nth-last-child(2) a {
    background: none;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #02314c !important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area .nav li:last-child a {
    background-color: transparent !important;
    font-weight: 300 !important;
    text-transform: capitalize !important;
  }
  .header-area {
    background-color: transparent;
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
    margin-top: 30px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background: linear-gradient(to bottom, #63bbd6 47%, #def4ff 100%);
  border-radius: 0px;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 125px 0px 0px 0px;
}
.main-banner .caption h6 {
  font-size: 20px;
  text-transform: uppercase;
  color: #1e1e1e;
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-top: 40px;
}

.main-banner .caption h2 {
  font-size: 36px;
  color: #1e1e1e;
  margin-top: 20px;
  position: relative;
  padding-bottom: 5px;
  margin-bottom: 20px;
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.main-banner .caption p {
  color: #1e1e1e;
  margin-bottom: 30px;
}

.main-banner .right-image {
  position: relative;
}
.right-image {
  display: flex;
  justify-content: center; /* Center the image horizontally */
  align-items: center; /* Center the image vertically */
  overflow: hidden; /* Hide any overflow */
  max-width: 100%; /* Ensure container does not exceed the column width */
  max-height: 100%; /* Ensure container does not exceed the column height */
}

.right-image img {
  height: 500px;
  width: 500px;
  object-fit: cover; /* Ensures the image covers the area without stretching */
  max-width: 100%;
  height: auto;
}

.button {
  background: linear-gradient(to bottom, #02314c, #0573b2);
  color: white;
  border: none;
  border-radius: 50px; /* Adjust the radius for roundness */
  padding: 10px 50px;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Bottom shadow */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for hover effect */
  font-weight: 500;
}

.button:hover {
  background: linear-gradient(to bottom, #0573b2, #02314c);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/
.button-container {
  display: flex; /* Enable Flexbox */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  height: 100%; /* Ensure the container takes up the full height of its parent */
}

.custom-button {
  background-color: #f6fcff; /* White background */
  color: #1e1e1e; /* Black font color */
  border: none; /* No border */
  border-radius: 50px; /* Rounded corners */
  padding: 10px 40px; /* Padding to make it look like a button */
  display: inline-block; /* Inline-block display */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Box shadow for depth */
  font-size: 16px; /* Font size to make it look prominent */
  text-align: center; /* Center text alignment */
  cursor: pointer; /* Pointer cursor on hover */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.custom-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Slightly deeper shadow on hover */
  background-color: rgba(173, 225, 255, 0.5);
}

.item {
  display: flex;
  align-items: center; /* Center vertically */
  padding: 10px;
  border: 1px solid #ddd; /* Optional: Border for better visual separation */
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Box shadow for depth */
  transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
  background-color: #ade1ff;
  height: 100px;
}

.item:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Slightly deeper shadow on hover */
  background-color: rgba(173, 225, 255, 0.5);
}

.icon {
  width: 50px; /* Adjust the size as needed */
  height: 50px; /* Adjust the size as needed */
  margin-right: 15px; /* Space between the icon and the content */
}

.content {
  display: flex;
  flex-direction: column;
}

.category {
  font-size: 14px;
  font-weight: bold;
  color: #333; /* Darker color for category text */
  margin-bottom: 5px;
}

h4 {
  font-size: 16px;
  color: #555; /* Slightly lighter color for heading */
  margin: 0;
}
.content-paragraph {
  font-size: 12px;
  color: #1e1e1e;
  text-align: justify;
  line-height: 18px;
  margin-right: 15px;
}
.item {
  display: flex;
  align-items: center; /* Center vertically */
  padding: 10px;
  border: 1px solid #ddd; /* Optional: Border for better visual separation */
  border-radius: 10px; /* Optional: Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Box shadow for depth */
  transition: box-shadow 0.3s ease; /* Smooth transition for hover effect */
}

.item:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Slightly deeper shadow on hover */
}

.icon-background {
  background-color: #63bbd6; /* Background color for the circle */
  border-radius: 50%; /* Make the background a circle */
  padding: 10px; /* Space around the icon */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px; /* Space between the icon and the content */
}

.icon-background .icon {
  width: 50px; /* Adjust the size as needed */
  height: 50px; /* Adjust the size as needed */
  margin-right: 0px;
}

.content {
  display: flex;
  flex-direction: column;
}

.category {
  font-size: 14px;
  font-weight: bold;
  color: #333; /* Darker color for category text */
  margin-bottom: 5px;
}

h4 {
  font-size: 16px;
  color: #555; /* Slightly lighter color for heading */
  margin: 0;
}

/* 
---------------------------------------------
Most Played Style
--------------------------------------------- 
*/

.most-played {
  background: linear-gradient(to bottom, #63bbd6 47%, #def4ff 100%);
  padding: 100px 0px;
}

.most-played .main-button {
  margin-top: 32px;
  text-align: right;
}

.most-played .item {
  background-color: #fff;
  position: relative;
  border-radius: 25px;
  text-align: center;
  margin-bottom: 40px;
}

.most-played .item .thumb {
  position: relative;
  overflow: hidden;
}

.most-played .item .down-content {
  padding: 20px 15px 40px 15px;
}

.most-played .item .down-content span.category {
  font-size: 14px;
  color: #7a7a7a;
  margin-bottom: 5px;
  display: inline-block;
}

.most-played .item .down-content h4 {
  font-size: 17px;
  font-weight: 600;
  transition: all 0.3s;
}

.most-played .item .down-content a {
  position: absolute;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  height: 40px;
  padding: 0px 15px;
  background-color: #ee626b;
  color: #fff;
  border-radius: 20px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  left: 50%;
  transform: translateX(-50%);
  bottom: -20px;
  transition: all 0.3s;
}

.most-played .item:hover .down-content h4 {
  color: #0071f8;
}

.most-played .item:hover .down-content a {
  background-color: #0071f8;
}
/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/
.services {
  text-align: center; /* Center-align the content */
  background-color: #f6fcff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
  margin-top: 10px;
  height: 550px;
  overflow: hidden;
}

.services:hover {
  transform: translateY(-10px); /* Move up slightly on hover */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Slightly deeper shadow on hover */
}

.services-thumb {
  margin-bottom: 15px; /* Space between the image and the content */
}

.services-thumb img {
  width: 100%; /* Make the image responsive */
  height: auto; /* Maintain aspect ratio */
  border-radius: 10px 10px 0px 0px;
}

.services-content {
  padding: 10px 20px 20px 20px;
}

.services-content h4 {
  margin-bottom: 10px; /* Space between the heading and the line */
  font-size: 22px; /* Adjust font size */
  font-weight: bold; /* Make the heading bold */
  color: #02314c;
  text-align: left;
}

.services-content .line {
  height: 0.8px; /* Line height */
  background-color: #02314c; /* Line color */
  margin: 10px 0; /* Margin above and below the line */
  width: 50%;
}

.services-content p {
  font-size: 14px; /* Adjust font size */
  color: #555; /* Font color */
  margin-top: 10px; /* Space above the paragraph */
}
.services_paragraph {
  text-align: center;
  margin: 20px 120px 10px 120px;
  font-size: 14px;
}
.benefits-content {
  padding: 0 20px 0 20px; /* Add padding inside the container */
  margin: 40px 0 40px 0; /* Add vertical margin between the benefits */
}
.benefits-content h6 {
  margin-bottom: 12px;
  font-size: 20px;
}
.benefits-content p {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 20px;
}
.boxes-container {
  display: flex; /* Use flexbox for the boxes */
  justify-content: space-around; /* Space evenly between boxes */
  flex-wrap: wrap; /* Allow boxes to wrap */
}

.box {
  width: calc(50% - 20px); /* 50% width with space between */
  margin-bottom: 20px; /* Bottom margin between boxes */
  position: relative; /* Position relative for pseudo-element */
  overflow: hidden; /* Hide overflowing content */
  border-radius: 12px; /* Rounded corners */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow */
}

.box-inner {
  position: relative; /* Position relative for image */
  overflow: hidden; /* Hide overflowing content */
  border-radius: 12px; /* Rounded corners */
}

.box img {
  display: block; /* Ensure images behave as block elements */
  width: 100%; /* Full width of container */
  height: auto; /* Maintain aspect ratio */
  transition: transform 0.3s ease; /* Smooth transition for hover effect */
  padding: 30px;
}

.box::before {
  content: ""; /* Empty content for pseudo-element */
  position: absolute; /* Position absolutely */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f1faff; /* Semi-transparent background */
  /* z-index: 1000; Place behind the image */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.box:hover::before {
  background-color: rgba(173, 225, 255, 0.5); /* Darken background on hover */
}

.box:hover img {
  transform: scale(1.1); /* Scale up image on hover */
}

.pricing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #f6fcff; /* Dark blue background */
  color: #1e1e1e; /* White text color */
  padding: 40px 0 40px 0;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  max-width: 600px; /* Adjust max-width as needed */
  margin: 0 auto; /* Center horizontally */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Box shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
  margin-top: 10px;
  text-align: center; /* Center-align the content */
}

.pricing:hover {
  transform: translateY(-5px); /* Move up on hover */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.3); /* Box shadow on hover */
}

.pricing-thumb {
  background-color: #02314c; /* Dark blue background for recommended label */
  padding: 5px 20px;
  margin-bottom: 20px;
  width: 100%;
}

.pricing-thumb p {
  margin: 0;
  font-weight: bold;
  color: #ffffff; /* White text color */
  text-align: center;
}

.pricing-content {
  margin-bottom: 20px;
}

.pricing-content h4 {
  margin: 10px 0;
  font-size: 24px;
  color: #1e1e1e;
}

.pricing-content p {
  margin: 5px 0;
  font-size: 10px;
  text-align: center;
}

.pricing-content div {
  margin-bottom: 20px;
}

.pricing-list {
  text-align: left;
  margin-bottom: 20px;
  padding: 0 40px 0 40px;
}

.pricing-list ul {
  list-style-type: none;
  padding: 0;
}

.pricing-list ul li {
  margin-bottom: 10px;
  font-size: 14px;
  list-style: circle;
}
.contact_us {
  background-image: url(../images/email_background.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  align-items: center;
  justify-content: center;
}

.center {
  text-align: center;
}
/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

.footer {
  background-color: #02314c;
  color: #ffffff;
  padding: 50px 0 80px 0;
  font-family: Arial, sans-serif;
}

.footer-col {
  margin-bottom: 20px;
}

.footer-logo {
  max-width: 150px;
  margin-bottom: 20px;
}

.footer h4,
.footer h6 {
  margin-top: 15px;
  margin-bottom: 15px;
  font-weight: bold;
  color: #f1faff;
}

.footer p {
  line-height: 1.6;
  color: #f1faff;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer ul li {
  margin-bottom: 10px;
  text-align: center;
  font-size: 12px;
}

.footer ul li a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer ul li a:hover {
  color: #dddddd;
}

.footer form {
  display: flex;
  flex-direction: row;
  align-items: left;
}

.footer input[type="email"] {
  width: 70%;
  padding: 10px;
  border: none;
  border-radius: 5px;
  margin-right: 4px;
  background-color: #e5e5e5;
  color: #02314c;
  font-size: 16px;
}
.footer input[type="email"]:hover,
.footer input[type="email"]:focus {
  border-color: none; /* Change to your desired color */
  box-shadow: 0 0 5px rgba(173, 225, 255, 0.8); /* RGB color with opacity */
  outline: none;
}

.footer input[type="email"]::placeholder {
  color: #aaaaaa;
}

.footer input[type="submit"] {
  padding: 5px 20px;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  font-size: 16px;
  width: 30%;
  background-color: #820303;
}

.footer input[type="submit"]:hover {
  background-color: #0573b2;
  color: #ffffff;
}

@media (max-width: 768px) {
  .footer-col {
    text-align: center;
  }

  .footer input.footer-input {
    width: 60%;
    margin-bottom: 10px;
  }
}
.social-icons h4 {
  margin-top: 20px;
}

.social-icons ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
}

.social-icons ul li {
  display: flex;
  align-items: center;
}

.social-icons ul li a {
  color: #02314c;
  text-decoration: none;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* Adjust size as needed */
  height: 40px; /* Adjust size as needed */
  background-color: #63bbd6; /* Light blue color */
  border-radius: 50%;
}

.social-icons ul li a i {
  font-size: 20px; /* Adjust size as needed */
}

.social-icons ul li a:hover {
  color: #dddddd;
}
hr {
  width: 30%;
  margin: 10px auto;
}
/* Footer Bottom */
.footer-bottom {
  padding: 20px 0;
  text-align: center;
}

.footer-hr {
  width: 80% !important;
  border-top: 1px solid #ffffff;
  margin: 20px auto;
}

.footer-copyright {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/
body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area {
    top: 0;
  }
  .main-banner .right-image span.offer {
    left: 20px;
    bottom: 20px;
  }
  .cta .subscribe form button {
    position: relative;
    width: 100%;
    margin-top: 15px;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .logo img {
    max-width: 60px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 10px;
    font-weight: 500;
    border-radius: none;
  }
  .header-area .main-nav ul.nav {
    margin-top: 0px;
  }
  .background-header .main-nav ul.nav {
    margin-top: 20px;
  }
  .header-area .main-nav .nav li:nth-last-child(1) a,
  .header-area .main-nav .nav li:nth-last-child(2) a {
    background: none;
    text-transform: uppercase;
    font-weight: 500;
    color: #1e1e1e;
    font-size: 10px;
  }
  .main-banner .caption {
    margin-bottom: 45px;
    text-align: left;
  }
  .content-paragraph {
    font-size: 10px;
    color: #1e1e1e;
    text-align: justify;
    line-height: 18px;
    margin-right: 15px;
  }
  .about_paragraph {
    font-size: 12px;
    line-height: 23px;
    margin-top: 10px;
    margin-bottom: 20px;
  }
  .item {
    margin: 8px 0;
  }
  .category {
    font-size: 12px;
    font-weight: bold;
    color: #333; /* Darker color for category text */
    margin-bottom: 5px;
  }
  .services {
    height: 400px;
  }
  .services-content p {
    font-size: 10px;
    color: #555;
    margin-top: 10px;
    line-height: 20px;
  }
  .services_paragraph {
    text-align: center;
    margin: 20px 10px 10px 10px;
    font-size: 12px;
  }
  .services-content h4 {
    font-size: 16px;
  }

  .section-heading h2 {
    font-size: 25px;
    font-weight: 700;
    text-transform: capitalize;
    margin-top: 30px;
    line-height: 44px;
    color: #02314c;
  }
  .section-heading {
    margin-bottom: 20px;
  }
  .benefits-content h6 {
    margin-bottom: 12px;
    font-size: 16px;
  }
  .benefits-content {
    padding: 0 20px 0 20px;
    margin: 30px 0 30px 0;
  }
  .pricing-list ul li {
    margin-bottom: 10px;
    font-size: 12px;
    list-style: circle;
  }
  .footer input[type="email"] {
    width: 70%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-right: 4px;
    background-color: #ffffff;
    color: #02314c;
    font-size: 16px;
    height: 40px;
  }
  .social-icons ul li a {
    color: #02314c;
    text-decoration: none;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: #63bbd6;
    border-radius: 50%;
  }
  .main-banner .caption h6 {
    font-size: 15px;
    text-transform: uppercase;
    color: #1e1e1e;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 40px;
  }
  .footer h4,
  .footer h6 {
    margin-top: 15px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #f1faff;
    font-size: 14px;
  }
  .footer p {
    line-height: 1.6;
    color: #f1faff;
    font-size: 10px;
  }
  .footer ul li {
    margin-bottom: 10px;
    text-align: center;
    font-size: 10px;
  }
  .main-banner .caption form,
  .main-banner .caption form input {
    max-width: 100%;
  }
  .features .item {
    margin-bottom: 30px;
  }
  .trending .main-button,
  .cta::after,
  .most-played .main-button,
  .related-games .main-button {
    display: none;
  }
  .most-played .section-heading {
    text-align: center;
  }
}
@media (max-width: 767.98px) {
  .row {
    padding: 0 40px;
  }
  .services {
    height: auto;
  }
  .pricing {
    margin: 10px 0;
  }
  .footer p {
    margin-right: 20px;
    margin-bottom: 10px;
  }
}
@media (max-width: 575.98px) {
}
/* Webkit browsers (Chrome, Safari) */
::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: #f6fcff; /* Background color of the scrollbar track */
  border-radius: 10px; /* Rounded corners for the track */
}

::-webkit-scrollbar-thumb {
  background: #02314c; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
  border: 3px solid #f6fcff; /* Adds a border around the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: #ade1ff; /* Color of the thumb on hover */
}

/* Firefox */
html {
  scrollbar-width: thin; /* Set the width of the scrollbar */
  scrollbar-color: #02314c #f6fcff; /* Set the color of the thumb and track */
}

html::-webkit-scrollbar-track {
  background: #f6fcff; /* Background color of the scrollbar track */
}

html::-webkit-scrollbar-thumb {
  background-color: #02314c; /* Color of the scrollbar thumb */
  border: 3px solid #f6fcff; /* Adds a border around the thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
}

html::-webkit-scrollbar-thumb:hover {
  background: #ade1ff; /* Color of the thumb on hover */
}