@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla&family=Poppins:wght@200&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
}
body{
  font-family: "DM Serif Display", serif;
}
:root {
    /* Colors */
    --dark-violet: hsl(256, 26%, 20%);
    --grayish-blue: hsl(216, 30%, 68%);
    /* Neutral Colors*/
    --dark-violet: hsl(270, 9%, 17%);
    --dark-grayish-violet: hsl(273, 4%, 51%);
    --light-gray: hsl(0, 0%, 98%);
    /* Font size*/
    --font-size: 1em;
    /* Font Family for headings*/
    --heading-family: 'Poppins', sans-serif;
    --heading-weight: 400;
    /* Font Family for body*/
    --body-font-family: 'Poppins', sans-serif;
    --body-font-weights: 400, 700;
}

/*Navbar*/
a {
    text-decoration: none;
  }
  
  li {
    list-style: none;
  }
  /* NAVBAR STYLING STARTS */

.navbar {
    display: flex; 
    justify-content:space-between;
    align-items: center;
    color: var(--dark-violet);
    font-family: var(--body-font-family);
    font-size: var(--font-size);
    font-weight: bold;
    padding-block:1.2rem;
    width: 80%;
    margin: 0 auto; 
  }


  .nav-links a {
    color: var(--dark-violet);
  }
  
  /* LOGO */
  
  /* NAVBAR MENU */
  .menu {
    display: flex;
    gap: 3em;
    
  }
  .menu li{
     display: flex;
     align-items: center;
     gap: 1rem;
     list-style: none;
   }
   .view-plans:hover {
    background-color:#2d2640;
    color: #fafafa;
  }
  .view-plans a:hover{
    color: #fafafa;
  }
   .view-plans{
    border: 2px solid black;
    display: inline-block; 
}
.view-plans a{
    padding: 0.5rem 2rem;
    letter-spacing: 1.5px;  
}
.view-plan:hover {
  background-color:white-;
  
}
.view-plan a:hover{

  color:#2d2640 ;
}
  /* DROPDOWN MENU */
  input[type=checkbox] {
    display: none;
  } 
  
  /* HAMBURGER MENU */
  .hamburger {
    display: none;
    font-size: 24px;
    user-select: none;
  }
  
  /* APPLYING MEDIA QUERIES */
  @media (max-width: 768px) {
    .hero-section{
      padding-block: 0;
      max-height: 0%;
      background-image: none;
    }
   .menu {
      display:none;
      position: absolute;
      background-color:var(--dark-violet);
      right: 0;
      left: 0;
      text-align: center;
      padding: 12px 0;
      color: white;

      
    }  
    .menu li{
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-direction: column;
    }
    .menu li a{
      color: white;
    }
    .navbar{
        gap: 0;
    }
    .menu li:hover {
      display: inline-block;
      background-color:black;
      transition: 0.3s ease;
    }
  
    .menu li + li {
      margin-top: 12px;
    }
  
    input[type=checkbox]:checked ~ .menu {
      display: block;
    }
  
    .hamburger {
      display: block;
    }
  
    .dropdown {
      left: 50%;
      top: 30px;
      transform: translateX(35%);
    }
  
  }
  


   /*Hero section*/
  .hero-section{
    background-color:#2d2640;
    width: 100%;
    max-height: 38rem;
    padding-block: 5%;
    background-image: url("../images/bg-pattern-intro-right-desktop.svg");
    background-position: top right;
    background-repeat: no-repeat;
    
  }
  .hero-section .sub-hero{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 80%;
    margin: 0 auto;   
    flex-wrap: wrap;
  }
  .content{
   max-width:650px;
  }
  .hero-section .content h1{
    font-size:5.2em;
    line-height: 89%;
    letter-spacing: -1px;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
  }
  .hero-section .content p{
    font-family: 'Karla', sans-serif;
    font-size:1.2em;
    
  }
  .view-plan{
    border: 2px solid white;
    display: inline-block; 
    padding: 0.5rem 2rem;
}
.view-plan a{
    
    letter-spacing: 1.5px;  
    color: white;
}
  .aa img{
    position: absolute;
    top:300px;
    left: 0;
  }
  .hero-section .image-section img{
    width:100%;
  }
  h1,p{
    padding-block:29px;
    color: white;
  }
  .vl {
    border-bottom: 1px solid white;
    width:200px;
    margin-bottom:70px;
    
  }

  section{
    width: 80%;
    margin: 0 auto;
    padding-top:10%;    
  }
  .section-2{
    padding-bottom: 10%;
  }
  section h1{
    color: black;
    font-size: 4.5rem;
    line-height: 89%;
    letter-spacing: 2px;
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    padding-bottom: 100px;

  }
  section .cards .card,section .cards .card p{
    color:#2b3e5f;
    font-size:16px;
    line-height: 1.5rem;
    font-weight:10;
    font-family: 'Karla', sans-serif;

  }
  .cards{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:1.2rem;
    
  }
  section .vl{
    border-bottom: 1px solid black;
    width:200px;
    margin-bottom:70px;
  }

  .card img{
    padding-bottom:8%;
  }
  .border-box{
    background-color:#2d2640;
    padding: 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    background-image: url("../images/bg-pattern-how-we-work-mobile.svg");
    background-repeat: no-repeat;
    background-position: top right;
  }
  .border-box h2{
    color: white;
    font-size:3rem;
    line-height:3rem;
    letter-spacing:1px;
    font-family: "DM Serif Display", serif;
    font-weight:400;
    max-width:60%;
  }



footer{
  width: 100%;
  background-color: #fafafa;
  padding-block: 5%;
}
.footer-content{
  width: 80%;
  margin: 0 auto;
}
footer .footer-start{
  display: flex;
  justify-content: space-between;
}
.icons ul{
  display: flex;
  gap: 20px;
}
hr{
  margin-block:4%;
}
.footer-end{
  display:flex;
  justify-content:space-between;
  align-items: center;
  flex-direction: row;
}
.footer-end p{
  color:#888b9d; 
}
li{
  line-height: 1.5rem;
  font-size:0.8rem;
  letter-spacing:1.5px;
  color: #3e4458;
}

@media only screen and (max-width:768px) {

  .hero-section{
    padding-block: 0;
    max-height: 0%;
    background-image: none;
  }
  .hero-section .sub-hero{
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
    width: 100%;   
  }
.aa{
  display: none;
}
.hero-section .sub-hero h1{
  font-size:3em;
}
  .content{
    padding:10% 4%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-image: url("../images/bg-pattern-intro-left-mobile.svg"),url("../images/bg-pattern-intro-right-mobile.svg");
    background-position: top left,bottom right;
    background-repeat: no-repeat;
    width: 100%;
  }
  .content .vl{
    display:none;
  }
.content h1{
  font-size: 2px;
}
  section{
   padding-top:150px;
   padding-bottom:0px;
   width: 100%;
  }
  section .vl,h1{
    margin: 0 auto;
    text-align: center;
  }

  section h1{
    margin-top: 14px;
    font-size:2em;
    letter-spacing:0.1rem;
  }
  .cards{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .border-box{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 30px;
    padding-block:20%;
    margin-top: 0;
    background-image: none;
    background-image: url("../images/bg-pattern-how-we-work-mobile.svg");
    background-repeat: no-repeat;
    background-position: top right;
  }
  .border-box h2{
    font-size: 2em;
    color: white;
    font-size:2.7rem;
    line-height:2.3rem;
    letter-spacing:1px;
    font-family: "DM Serif Display", serif;
    font-weight:200;
    max-width:100%;
    
  }
  .footer-start{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .footer-end{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap:12px;
  }
  

}
@media screen and (max-width:1440px) and (min-width:1024px) {
.hero-section{
  flex-direction: row;
  max-height: 38rem;
}
.hero-section .sub-hero{
  flex-direction: row;
  flex-wrap: nowrap;
}
.image-section img{
   height: 100%;
}
}