/*
 * TABLE OF CONTENTS
 * -----------------
 * 1. Global Imports
 * 2. Root Variables
 * 3. Global Styles
 * 4. Body Section
 * 5. Hero Section
 * 6. Features Section
 * 7. About Section
 * 8. Video Section
 * 9. Pricing Section
 * 11. Testimonials Section
 * 12. Newsletter Section
 * 13. Footer Section
 * 14. Media Queries
 */


/* 1. Global Imports */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* 2. Root Variables */
:root{
--main-color:#5286E3;
--secondary-color-1:#0A1425;
--secondary-color-2:#FFF;
--secondary-color-3:#9BC995;
--secondary-color-4:#E5E7EB;
--secondary-color-5:#64728F;
--light-color-1:rgb(0,133,255, .14);
--lighter-color-1:rgb(184, 176, 159, .4);
--border-radius:12px
}


/* 3. Global Styles */
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* Chrome, Safari, Edge */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
background: var(--lighter-color-1);
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background-color: var(--secondary-color-3);
border-radius: 10px;
border: 2px solid #f0f0f0;
}


html {
scroll-behavior: smooth;
scrollbar-color: var(--secondary-color-3) var(--lighter-color-1);
scrollbar-width: thin;
overflow-x: hidden;

}


.elements_width{
width: 1140px;
}

.added-color{
  color:var(--secondary-color-3)
}
.added-color-bg{
  background-color: var(--secondary-color-3) !important;
}
.main-color{
  color: var(--main-color);
}
.subtitle {
color: var(--secondary-color-5);
}

a:hover {
  color: var(--main-color);
}

.btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main-color);
  color: var(--secondary-color-2);
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  height: 38px;
  outline: 0;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
}
.btn-2{
  background-color: var(--secondary-color-2);
  color: var(--main-color);
  border: 1px solid transparent;
}

.btn-3{
  background-color: var(--secondary-color-3);
  color: var(--secondary-color-2);
  border: 1px solid transparent;
}

.btn:hover {
  transform: scale(1.05);
  border: 1px solid var(--main-color);
  background-color: var(--secondary-color-2);
  color: var(--main-color);
}
.btn-2:hover {
  transform: scale(1.05);
  border: 1px solid var(--main-color);
  background-color: transparent;
  color: var(--main-color);
}


section {
padding: 60px 0;
}


.flex-half{
  flex: 1 1 47%;
}


 input {
  color: var(--secondary-color-1) !important;
  outline:0;
  border: 1px solid var(--light-color-1);
  height: 38px;
  padding: 8px 12px !important;
  font-size: 15px !important;
  width: 280px;
}
 input::placeholder{
  color:var(--light-color-1)
}

/* 4. Body Section */
body{
font-family: 'Montserrat', sans-serif;
min-height: 100vh;
width: 100%;
color: var(--secondary-color-1);
background-color: var(--secondary-color-2);
}

/* 5. Hero Section */
header{
height: 70px;
padding: 12px 0;
transition: height 0.3s ease-in-out;
}

.hero_section{
  background-image: url('../images/hero-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 90vh
}


.hero_section .woman_pic {
  background-image: url('../images/group.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100%;
  width: 100%;
  border-radius: var(--border-radius);
}

/* 6. Features Section */

.features_section .feature_box{
  border: 1px solid var(--secondary-color-4);
  border-radius: var(--border-radius);
  flex: 1 1 47%;
}
.features_section .feature_box .icon_box{
  width: 50px;
  height: 50px;
  background-color: var(--light-color-1);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(0,133,255);
  font-size: 20px;
}

/* 7. About Section */


/* 8. Video Section */
.video_section{
  background-image: url('../images/video-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}

/* 9. Pricing Section */
.pricing_section{
 background-color: var(--secondary-color-1);
}
.pricing_section .pricing_box {
  border-radius: var(--border-radius);
  border: 1px solid var(--main-color);
  padding: 16px 12px;
  color: var(--secondary-color-2);
}

/* 11. Testimonials Section */
.testimonials_section .reviews_boxes {
  overflow-x: auto;
  scrollbar-width: none; /* For Firefox */
}

.testimonials_section .reviews_boxes::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and other WebKit browsers */
}
.testimonials_section .review_box{
  border: 1px solid var(--secondary-color-4);
  border-radius: var(--border-radius);
}

.testimonials_section .review_box .avatar{
  width: 80px;
  height: 80px;
}
#prevBtn, #nextBtn{
  height: 30px;
  width: 30px;
  background-color: var(--main-color);
  color: var(--secondary-color-2);
  font-size: 16px;
  outline: 0;
  border:0;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* 12. Newsletter Section */
.newsletter_section {
  background-color: var(--main-color);
}

/* 13. Footer Section */

.footer {
  padding: 60px 20px 20px 20px;
  background-color: var(--secondary-color-1);
}

.footer p, footer li {
  color: var(--secondary-color-2);
}

/* Go to the top button */
#goUpBtn{
display: none;
background-color: var(--main-color);
width: 50px;
height: 50px;
bottom: 20px;
right: 20px;
cursor: pointer;
z-index: 1000;
}

/* Loading State */
.loading-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;  
    position: fixed;  
    width: 100%; 
    background-color: var(--secondary-color-2); 
    top: 0;
    left: 0;
    z-index: 1000; 
}
  .dots > div {
    width: 12px;
    height: 12px;
    background-color: var(--main-color);
    border-radius: 50%;
    display: inline-block;
    animation: dotFlashing 1s infinite linear alternate;
    animation-delay: 0s, 0.2s, 0.4s;
  }
  
  @keyframes dotFlashing {
    0% {
      background-color: var(--main-color);
    }
    50%, 100% {
      background-color: transparent;
    }
  }




/* 14. Media Queries */
@media (max-width: 1240px) {

html, body {
width: 100%;
overflow-x: hidden;
}
.header, .elements_width {
width: 90%;
}

}
@media (max-width: 768px) {
.header, .elements_width {
width: 100%;
}
section{
padding: 60px 16px;
}
.features_section .feature_box{

  flex-basis: 100%;
}
}

@media (min-width: 768px) {
.header, .elements_width {
width: 90%;
}
}

@media (max-width:991px) {
  .testimonials_section .review_box .avatar{
    width: 50px;
    height: 50px;
  }
  
}