@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;600;700;900&display=swap');
html {
    scroll-behavior: smooth;
}
.main-div {
    font-family: 'Roboto', sans-serif;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 140px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    text-align: left;
  }
  .navbar {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  
  .navbar.show {
    opacity: 1;
  }
  
  .header {
    width: 100%;
    margin-bottom: 40px;
  }
  
  .header h2 {
    
    margin-bottom:-10px;
    font-size: 16px;
  }
  
  .header h1 {
    font-weight: 500;
    font-size: 53px;
  }
  
  .header p {
    font-weight: 500;

    letter-spacing: 0.7px;
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .floater {
    flex: 1 1 300px;
    float: right;
    margin-left: 40px;
    text-align: right;
  }
  
body {
     margin: 0;
     padding: 0;
     font-family: 'Roboto', sans-serif;
}
 .navbar {
     background-color: #ffffff;
     z-index: 2;
     width: 100%;
     display: flex;
     margin-top: -3px ;
     font-family: -apple-system, BlinkMacSystemFont, sans-serif;
     justify-content: flex-end;
     position: fixed;
     top: 0;
     align-items: center;
     text-overflow: ellipsis;
     box-sizing: border-box;
     border-bottom: 1px solid rgba(0, 0, 0, 0.07);
     height: 53px;
}
#navbar {
    background-color: #ffffff;
    z-index: 2;
    width: 100%;
    display: flex;
    margin-top: -3px ;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    justify-content: flex-end;
    position: fixed;
    top: 0;
    align-items: center;
    text-overflow: ellipsis;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    height: 53px;
}
ul {
     list-style-type: none;
}
 a {
     cursor: pointer;
     color: white;
     text-decoration: none;
}
 .close-nav {
     display: none;
     font-size: 20px;
     width: 100px;
     color: #585656;
     border: none;
     background-color: transparent;
     margin-left: 70% ;
     cursor: pointer;
}
 .navbar-nav {
     display: flex;
     list-style: none;
     margin: 0 ;
     padding: 0;
}
 .nav-item {
     margin-right: 10px ;
}
 .nav-link {
     font-size: 15px;
     color: #585656;
     text-decoration: none;
     padding: 10px;
     font-weight: 600;
     border-radius: 5px;
     transition: all 0.2s ease-in-out;
}
 .nav-link:hover {
     color: black;
}
 .menu-icon {
     display: none;
}
 .child {
     height: 100%;
     width: 500px;
}
 .left img {
     margin-bottom:-5% ;
     width: 150px;
}
 .left p {
     font-family: 'Abel', sans-serif;
     letter-spacing: 1px;
     font-size: 29px;
     color: white;
     margin-bottom: 40px ;
}
 button {
     width: 200px;
     height: 60px;
     border-radius: 10px;
     background-color: #EB7F67;
     color: white;
     font-size: 20px;
     border: none;
     cursor: pointer;
}
 .right img {
     object-fit: cover;
     height: 100%;
     width: 140%;
}
 .container {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     height: 780px;
     width: 100%;
     background-color: #060724;
}
 .left {
     margin-top: 50px ;
     height: 70%;
     display: flex;
     flex-direction: column;
}
 .right {
     height: 100%;
     display: flex;
}
 .left > h1 {
     text-transform: uppercase;
     color: #edeced;
     font-size: 65px;
     line-height: 1em;
     font-family: 'Abel', sans-serif;
     font-weight: 100;
     letter-spacing: 4px;
     color: white;
     margin-bottom: 10px ;
}
 .r8v7r6-container {
     height: 770px;
     justify-content: center;
     align-items: center;
     background-color: #EB7F67;
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 20px;
}
 .r8v7r6-left {
     width: 500px;
     text-align: left;
}
 .r8v7r6-left h1 {
     margin-top:-100px ;
     letter-spacing: 3px;
     font-family: 'Abel', sans-serif;
     font-size: 86px;
     line-height: 1.2;
     color:white;
}
 .r8v7r6-right {
     color:white;
     width: 500px;
     letter-spacing: 1px;
     font-weight: 600;
     text-align: start;
     font-family: 'Abel', sans-serif;
     font-size: 26px;
     line-height: 37px;
}
 .parent {
     height: 750px;
     background-color: #EDECED;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .left-child {
     width: 600px;
     height: 100%;
}
 .left-child >img{
     height: 100%;
}
 .right-child {
     margin-top:-50px ;
     width: 500px;
     margin-left: 60px ;
}
 .right-child > h1 {
     height: 100px;
     font-family: 'Abel', sans-serif;
     font-size:97px;
     font-weight:500;
}
 .right-child > p {
     font-family: 'Abel', sans-serif;
     font-weight: 500;
     line-height: 32px;
     font-size:24px;
}
 .offer-container {
     height: 770px;
     background-color: #060724;
}
 .offer-heading {
     font-family: 'Abel', sans-serif;
     letter-spacing: 2px;
     font-size: 65px;
     color: white;
     margin: 0 ;
     padding: 80px 0 0 0;
     text-align: left;
     margin-left: 17% ;
}
 .offer-cards {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 500px;
     margin-top: 50px ;
}
 .card {
     position: relative;
     width: 380px;
     height: 500px;
     margin-right: 30px ;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     overflow: hidden;
}
 .card img, .card video {
     width: 100%;
     height: 100%;
     object-fit: cover;
}
 .card video {
     transform: scale(1.1);
}
 .card-content {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 20px;
     box-sizing: border-box;
     background: linear-gradient(to top, rgba(6,7,36,0.9), rgba(6,7,36,0));
}
 .card-heading {
     letter-spacing: 2px;
     font-family: 'Abel', sans-serif;
     font-size: 37px;
     color: white;
     margin-bottom: 5px ;
}
 .card-text {
     font-family: 'Abel', sans-serif;
     font-size: 23px;
     color: white;
     margin-bottom: 20px ;
}
 .main-container {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 770px;
     background-color: #EB7F67;
}
 .left-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     width: calc(50% - 25px);
     height: 100%;
     width: 650px;
}
 .small-text {
     font-size: 15px;
     color: white;
     font-family: 'Abel', sans-serif;
     margin-bottom: -30px ;
}
 .big-text {
     font-size: 65px;
     font-weight: 700;
     color: #edeced;
     line-height: 1;
     font-family: 'Abel', sans-serif;
}
 .image-container {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .images-left {
     display: flex;
     flex-direction: column;
}
 .images-left img {
     object-fit: cover;
     max-width: 265px;
     width: 100%;
     margin-bottom: 10px ;
}
 .image-right img {
     margin-bottom: 10px ;
     width: 100%;
     max-width: 226px;
     height: auto;
     margin-left: 10px ;
}
 .container-234 {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 770px;
     background-color: #EDECED;
}
 .left-234 {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     width: 25%;
     margin-left: 220px ;
     padding: 0 20px;
     color: #000000;
     font-family: 'Abel', sans-serif;
}
 .left-234 h1 {
     letter-spacing: 2px;
     margin: 0 ;
     font-family: 'Abel', sans-serif;
     margin-bottom: 40px;
     font-size: 50px ;
}
 .left-234 p {
     margin-bottom: 60px ;
     letter-spacing: 0.5px;
     font-size: 21px;
}
 .packages-234 {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 170px;
     height: 60px;
     border-radius: 10px;
     background-color: #EB7F67;
     color: #f5f5f5;
     font-size: 18px;
     cursor: pointer;
     border: none;
}
 .right-234 {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50%;
}
 .laptop-234 {
     position: relative;
}
 .laptop-234 img {
     max-width: 80%;
     height: auto;
}
 .laptop-234 video {
     position: absolute;
     width: 60%;
     left: 10.3%;
     top: 1%;
     height: 90%;
     object-fit: cover;
     border-radius: 10px;
}
 .child-jbl {
     display: flex;
     justify-content: center;
     align-items: center;
     height: 730px;
     background-color: #060724;
     gap: 150px;
}
.main-container-jbl {
    background-color: #060724;

}
 .left-container-jbl {
     margin-top:30px ;
     max-width: 500px;
     margin-top: -94px ;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}
 .left-container-jbl > img {
     width: 140%;
}
 .main-heading-jbl {
     margin-top: 30px ;
     font-size: 40px;
     font-family: 'Abel', sans-serif;
     color: white;
     text-transform: uppercase;
}
 .right-container-jbl {
     margin-top: -120px ;
     max-width: 500px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}
 .image-container-jbl {
     max-width: 500px;
     height: fit-content;
}
 .image-jbl {
     min-width: 30%;
     min-height: 30%;
     object-fit: contain;
}
 .title-jbl {
     margin-top: 30px ;
     font-size: 25px;
     font-family: 'Abel', sans-serif;
     color: white;
}
 .description-jbl {
     margin-top: -10px ;
     font-size: 18px;
     font-family: 'Abel', sans-serif;
     color: white;
}
 .offer-heading-jbl {
     font-family: 'Abel', sans-serif;
     letter-spacing: 2px;
     font-size: 65px;
     color: white;
     background-color: #060724;
     margin: 0 ;
     padding: 80px 0 0 0;
     text-align: left;
     margin-left: 19% ;
}
 #offer-heading-jbl-div {
     width: 100%;
     background-color: #060724;
}
/* Container for pricing cards */
 .pricing-cards-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 780px;
     background-color: #EB7F67;
     color: white;
}
 #services {
     display: flex ;
     flex-direction: row;
     gap: 50px;
     margin-top: -60px ;
}
/*packages navbar*/
 #packages-nav {
     width: 100%;
     height: 150px;
     display: flex;
     justify-content: space-around;
     align-items: center;
     z-index: 1;
}
 #packages-title {
     font-size: 70px;
     font-weight: 400;
}
 #online-form-btn {
     width: 180px;
     height: 50px;
     font-size: 15px;
     font-weight: 700;
     border-radius: 30px;
     background-color: #060724;
}
 #navbar-part {
     display: flex;
}
.bi {
    padding-right: 10px;

}
.icons-ngl i {
    font-size: 2em;
  }
 .book-now-gif {
     width: 180px;
     height: 50px;
     margin-right: 40px ;
}
/*packages footer*/
 #packages-footer {
     display: flex;
     flex-direction: column;
     column-gap: -15px;
     font-size: 20px;
     letter-spacing: 1px;
     width: 80%;
     text-align: left;
}
 #packages-footer > h1 {
     font-size: 30px;
}
 #packages-footer > p {
     margin-top: -18px ;
}
 #add-on {
     height: 120px;
     width: 400px;
     background-color: #060724;
     border-radius: 30px;
     text-align: center;
     margin-top: -100px ;
}
 #add-on > h1 {
     font-size: 25px;
     margin-top: 10px ;
     font-weight: 500;
}
 #add-on > p {
     margin-top: -10px ;
}
/* Individual pricing card */
 .pricing-cards {
     margin-top: 100px ;
     width: 180px;
     height: fit-content;
     background-color: #060724;
     text-align: center;
     font-size: 19px;
}
 .card-circle-2 {
     width: 115px;
     height: 115px;
     background-color: #EB7F67;
     margin-top: -60px ;
     margin-right: auto ;
     margin-left: auto ;
     border-radius: 50%;
     border: 10px #060724 solid;
     display: flex;
     justify-content: center;
     align-items: center;
}
.offer-heading-94a {
    font-family: 'Abel', sans-serif;
    letter-spacing: 4px;
    font-size: 70px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 80px 0 0 0px;
    text-align: left;
    margin-left: 13%;
}
.text-wrapper-94a p {
    font-size: 22px;
}
.author-94a {
    font-size: 15px !important;
}
.main-94a {
    margin:0 ;
    height: 990px;
    background-color: #edeced;
    width: 100%;
    }

    .container-94a {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 50px;
    height: 910px;
    margin-top:-100px ;
    }
    
    .image-wrapper-94a {
    width: 650px;
    display: flex;
    justify-content: center;
    margin-top:-30px ;
    align-items: center;
    }
    
    .image-94a {
    width: 100%;
    }
    
    .text-wrapper-94a {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
    
    .testimonial-94a {
    font-family: 'Abel', sans-serif;
    font-size: 26px;
    text-align: left;
    margin-bottom: 10px ;
    }
    
    .author-94a {
    font-size: 17px;
    font-weight: 700;
    font-style: italic;
    text-align: right;
    }
 .card-circle-2 > p {
     font-size: 60px;
     font-weight: 500;
}
 #description-1 {
     margin-top: -18px ;
     font-weight: 400;
}
 #description-1 > h1 {
     font-size: 23px;
     margin-bottom: 30px ;
}
 #first-price {
     margin-bottom: 20px ;
}
 #desc-p {
     font-size: 14px;
     font-weight: 300;
     padding-bottom: 15px;
}
 #description-1 > p {
     margin-top: -16px ;
}
/* Button to choose pricing option */
 .pricing-button {
     background-color: #060724;
     color: #fff;
     padding: 10px 20px;
     border: none;
     border-radius: 5px;
     font-size: 16px;
     cursor: pointer;
}
 .pricing-button:hover {
     background-color: #fff;
     color: #060724;
}
.main-container-ngl {
    height: 780px;
    background-color: #060724;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .left-child-ngl {
    height: 20%;
    margin-top:-30% ;
    font-size: 97px;
    font-family: 'Abel', sans-serif;
    color: white;
  }
  
  .right-child-ngl {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: left;
  }
  
  .right-child-ngl h1 {
    font-family: 'Abel', sans-serif;
    font-size: 37px;
    color: white;
    margin-bottom: 30px ;
  }
  .left-child-ngl, .right-child-ngl{
    width: 500px;
}

  .icons-ngl {
    display: flex;
  
  }
  
  .icons-ngl a {
    margin-right: 30px ;
  }
  
  .icons-ngl i {
    color: white;
  }
  

  .contact-details-ngl {
    display: flex;
    flex-direction: column;
 
    color: white;
    font-size: 24px;
    font-family: 'Abel', sans-serif;
    margin-top: 50px ;
  }
  
  .contact-details-ngl p {
    margin: 0 ;
    padding: 5px 0;
  }
/*Blogs page*/
#main {
    display: flex;
    gap: 50px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}
#pic {
    width: 470px;
    height: 470px;
    object-fit: cover;
}
#left-side {
    width:500px ;
    display: flex;
   width:30%;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    row-gap: 30px;
}
#left-side p {
    margin-bottom: 30px;
    margin-right:60%;
    font-size: 55px;
}
.answer {
    font-size: 19px;
}
#right-side {
    margin-top:100px ;
    width: 50%;
}
.question {
    font-size: 25px;
    font-weight: 600;
    text-decoration: underline;
}
/* responsive starts from here */
/* Add media query */
 @media only screen and (max-width: 1400px) {
     .navbar {
         justify-content: space-between;
         padding-left: 10px;
    }
     .close-nav {
         display: block;
    }
     .navbar-nav {
         flex-direction: column;
         position: fixed;
         top: 0;
         border: 12px solid #ffffff;
         margin: 0 0 0 auto ;
         z-index: 3;
         font-size: 1.5rem;
         right: -100%;
         width: 60%;
         height: 100%;
         background-color: #ffffff;
         z-index: 3;
         padding: 20px;
         transition: right 0.36s ease-in;
        /* Updated transition */
    }
     ul {
         list-style-type: none;
    }
     .sj {
         list-style: none;
         flex-direction: column;
         position: fixed;
         top: 0;
         border: 12px solid #ffffff;
         margin: 0 0 0 auto ;
         z-index: 3;
         font-size: 1.5rem;
         right: -100%;
         width: 400px;
         height: 100%;
         background-color: #ffffff;
         z-index: 3;
         padding: 20px;
         transition: right 0.30s ease-in;
    }
     .nav-item {
         margin-bottom: 30px ;
         margin-right: 0 ;
    }
     .nav-link {
         font-size:30px;
    }
     .menu-icon {
         display: block;
         cursor: pointer;
         margin-left:20px ;
    }
     .navbar.show-nav .navbar-nav {
         display: flex;
         right: 0;
    }
}
 @media (max-width: 1100px) {
    .left-child-ngl {
        margin-left:13% ;
        padding-top:270px;
    }
      .right-child-ngl {
        margin-top:-100px ;
        padding-bottom:100px;
      }
     .packages-234 {
         margin-top:60px ;
    }
     .laptop-234 {
         margin-top:-30px ;
    }
     .right-234, .left-234{
         width: 80%;
    }
     .right-234 {
        margin-left:305px ;
         margin-bottom:100px ;
         margin-top:-60px ;
    }
     .offer-cards {
         display: flex;
         flex-direction: column;
         align-items: center;
    }
     .close-nav {
         font-size: 55px;
    }
     .container {
         padding-top:50px;
    }
     .navbar {
         height: 100px;
    }
     .menu-icon {
         font-size: 50px;
    }
    .text-wrapper-94a {
        width: 60%;
    }


    .right-top-ngl {
        display: flex;
        flex-direction: column;
        width: 100%;
        color: white;
        font-size: 24px;
        font-family: 'Abel', sans-serif;
        margin-top: 50px ;

    }
     .container, .r8v7r6-container, .parent, .offer-cards, .main-container, .container-234, #services, .child-jbl , .container-94a, .main-container-ngl, #main{
         flex-wrap: wrap;
         height: auto;
    }

    #left-side {
        display: block;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        margin-top: 50px;
    }

    #pic {
        width: 500px;
    }

    #left-side p {
        font-size: 50px;
    }

    #main, #right-side p {
        font-size: 25px;
    }

    .container-94a {
        margin-top:100px ;
        padding-bottom: 100px ;
    }     .card {
         margin-top:30px ;
    }
    .main-94a {
        height: auto;
    }

    .testimonial-94a {
        font-size: 40px;
    }
    .author-94a {
        font-size: 21px;
    }
     .left-234 {
         margin-top:50px ;
         display: block;
         margin-left: auto ;
         margin-right: auto ;
    }
    .offer-heading-94a {
        text-align: center;
        display: block;
        margin-left: auto ;
        margin-right: auto ;

    }
     .left-container {
         width: 80%;
         margin-top:60px ;
    }
    .main-container-jbl {
        height:1400px;
        margin-top:10px ;
    }
    .child-jbl {
        margin-top:140px ;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
.pricing-cards-container {
    height: auto;
}
    #services  {
        display: flex;
        justify-content: center;
        align-items: center;
    }

     .right-top-container {
         font-size: 45px;
    }
    #online-form-btn {
        width: 300px;
        font-size: 21px;
        height: 60px;
    }
     .offer-container {
         height: 1900px;
    }
     .r8v7r6-left > h1 {
         margin-top:20px ;
    }
     .r8v7r6-right {
         margin-top:-40px ;
    }
     .r8v7r6-container {
         height: 950px;
    }
     .left {
         padding-left:16%;
         margin-top:100px ;
    }
     .right-child {
         padding-right: 50px;
         padding-bottom: 40px;
    }
     .left-child > img {
         width: 95%;
         margin-top:30px ;
         margin-bottom:30px ;
         display: block;
         margin-left: auto ;
         margin-right: auto ;
    }
     .child {
         width: 100%;
    }
     .right img {
         filter: brightness(70%);
         width: 70%;
         margin-top:50px ;
         margin-bottom:70px ;
         display: block;
         margin-left: auto ;
         margin-right: auto ;
    }
     .offer-heading {
         text-align: center;
         margin-left: 0px ;
    }
    #add-on {
        margin-top:70px ;
        font-size: 10px;
        height: fit-content;
    }
    #add-on > h1 {
        font-size: 12px;
    }
    #packages-footer {
        margin-top:40px ;
    }
    .workwithme {
        width: 290px;
        margin-top:50px ;
        
        height: 80px;
        font-size: 27px;
    }
    .pricing-cards {
        width: 25%;
        font-size: 25px;
    }

}