@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");


:root{
    --white: #fff;
    --brown: #a1a1a1;
    --blue: #4578A4;
    --btn-blue: #4A95B0;
    --black : #000;
    --font-family :  "Libre Baskerville";
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    /*overflow: hidden;*/
    /* font-family: var(--font-family); */
    font-family: "Libre Baskerville", serif;
}

section{
    overflow-x: hidden;
}

.container{
    max-width: 1312px;
    width: 100%;
    padding: 16px;
    margin: auto;
}

ul{
    list-style-type: none;
}

header{
    background: var(--white);
    box-shadow: 0px 2px 10px -1px rgba(0, 0, 0, 0.05);
}


nav.custom-nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a.navbar-brand{
    font-size: 36px;
    font-weight: 600;
    color: var(--white);
    text-transform: uppercase;
    text-decoration: none;
   
}

.success-msg{
    padding: 16px 20px;
    background: #64be6436;
    border-radius: 6px;
    border: 1px solid green;
    text-align: center;
}

.error-msg{
    padding: 16px 20px;
    background: #ffd9d9;
    border-radius: 6px;
    border: 1px solid red;
    text-align: center;
}

a.navbar-brand img{
max-width: 300px;
vertical-align: middle;

}

nav .nav-link{
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    color: var(--blue);
    text-transform: uppercase;
    font-family: var(--font-family);
    font-family: "Libre Baskerville", serif;
}

.right-nav{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 12px;
}

.hero_sec{
    background-image: url(./images/hero_img.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: calc(100vh - 82px);
    max-height: 900px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.hero_sec .container{
   display: flex;
   justify-content: center;
   align-items: center;
}

.hero_sec .container img.main-logo{
   width: 80vw;
   max-width: 550px;
 }

 footer{
    background-color: var(--blue);
    padding-top: 40px;
    padding-bottom: 40px;
 }

 footer .page-width{
    display: flex;
    flex-direction: column;
    gap: 20px;
 }
 footer .page-width .site-footer__linklist{
    display: flex;
    /* flex-direction: column; */
    gap: 20px;
    margin: auto;
    width: max-content;
 }

 footer .container{
    display: flex;
    flex-direction: column;
    gap: 20px;
 }

 footer .page-width .site-footer__linklist a{
    text-decoration: underline;
    color: var(--white);
    font-weight: 500;
    font-size: 16px;
 }

 footer .site-footer__bottom{
    display: flex;
    justify-content: space-between;
    align-items: center;
 }

 footer .footer-p{
    color: var(--white);
    padding: 0 20px;
    text-align: center;
    font-size: 12px;
 }

 footer .footer-p.first{
    border: 2px solid var(--white);
    padding: 10px;
    color: var(--white);
    font-size: 12px;

 }

 footer .site-footer__copyright{
    color: var(--white);
    font-size: 16px;
 }

 .our_mission{
    background-color: var(--white);
    padding-top: 80px;
    padding-bottom: 40px;

 }

 .our_mission .our-mission-inner{
    text-align: center;
    max-width: 80%;
    margin: auto;
 }

 .main-heading,
 .our_mission .our-mission-inner h1{
    font-size: 40px;
    margin: auto;
    text-align: center;
    /* text-transform: uppercase; */
    text-transform: capitalize;
    color: var(--btn-blue);
    position: relative;
    width: max-content;
 }

 .our_mission .our-mission-inner p{
    font-size: 18px;
    line-height: 28px;
    margin: auto;
    /* text-align: left; */
    margin-top: 20px;
    color: var(--black);
 }

 .products{
    padding-bottom: 80px;
 }
 .products .row{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px;
    place-items: center;
 }

 .products .row .aspect-grid{
aspect-ratio: 1/1;
max-width: 200px;
height: auto;
 }

 .products .row .aspect-grid img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
     }

     .reviews{
        /* background: var(--btn-blue); */
        /* background: linear-gradient(to bottom, var(--white), var(--blue)); */
        padding-top: 80px;
        padding-bottom: 80px;
     }

     .reviews .review-inner{
        display: flex;
        flex-direction: column;
        gap: 20px;
     }

     .reviews .main-heading{
        color: var(--btn-blue);
        max-width: 70%;
     }

     .review-inner .review-subhead{
        display: flex;
            flex-direction: column;
            gap: 20px;
            color: var(--black);
            max-width: 95%;
            font-size: 18px;
            line-height: 28px;
            text-align: center;
            margin: auto;
     }

     .review-inner ul{
        display: flex;
        flex-direction: column;
        gap: 20px;
        color: var(--black);
        font-size: 16px;
        background: var(--white);
        padding: 20px;
        /* border: 2px solid var(--blue); */
        border-radius: 8px;  
        max-width: 80%;   
        margin: auto;
        
     }

     
     .review-inner ul li{
        margin-left: 20px;
        color: rgba(0,0,0,0.7);    
        font-style: italic;   
        text-align: center; 
        margin: auto;
     }

     .trust{
        /* background-color: var(--blue); */
        padding-top: 60px;
        padding-bottom: 60px;
        background: url(./images/footer_img.jpg) center fixed no-repeat;
        background-size: cover;
        position: relative;
     }

    .trust:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #FFF;
        background-color: rgba(0,0,0,0.6);
        z-index: 1;
    }

    .achievement .achievement-inner,
     .trust .trust-inner{
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 95%;
        margin: auto;
        text-align: center;
        z-index: 2;
        position: relative;
  
     }
     .achievement .achievement-inner .main-heading,
     .trust .trust-inner .main-heading{
       color: var(--white);
     }

     .trust .trust-inner p,
     .achievement .achievement-inner p{
        /* display: flex;
        flex-direction: column;
        gap: 20px; */
        max-width: 90%;
        margin: auto;
        text-align: center;
        font-size: 18px;
        line-height: 28px;
        color: var(--white);
     }

     .achievement{
        padding-top: 60px;
        padding-bottom: 60px;
        /* background: var(--btn-blue); */
        background-image: url("./images/final-images/IM4.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: unset;
        background-attachment: fixed;
        z-index: 1;
        position: relative;
     }

     .achievement::after{
        content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
     }
/* 

     .main-heading::after{
        content: "";
        width: 55%;
        height: 6px;
        position: absolute;
        top: 100%;
        background: var(--blue);
        left: 0;
        border-radius: 10px;
     } */

.signup{
    padding: 60px;
    margin-top: 50px;
}
/* 
     .signup .form-group{
        padding: 100px;
     } */

     .signup .inner_container{
        max-width: 730px;
        margin: auto;
        width: 100%;
     }

     .signup .inner_container form{
       margin-top: 50px;
       display: flex;
       flex-direction: column;
       gap: 20px;
     }
     .signup .inner_container form .col-md-6{
       flex: 1;
     
     }

     .signup .inner_container form .col-md-6 textarea,
     .signup .inner_container form .col-md-6 input{
       width: 100%;
       flex: 1;
       padding: 12px 8px;
       font-size: 16px;
       border: 1px solid var(--btn-blue);
       /* border: none; */
       background: #f4f4f4;
       border-radius: 4px;
       font-family: var(--font-family);
       resize: vertical;
     }


     .signup .inner_container form .col-md-6 textarea::placeholder,
     .signup .inner_container form .col-md-6 input::placeholder{
       font-family: var(--font-family);
     }

     .signup .inner_container form .col-md-6 input:focus{
       outline: none;
        outline: 2px solid var(--btn-blue);
        
      }

      .form-signup-btn{
        width: max-content;
        margin: auto;
      }

      .form-signup-btn button{
     background-color: var(--btn-blue);
     border-radius: 4px;
     border: 2px solid var(--btn-blue);
     padding: 10px 16px;
     font-size: 16px;
     color: white;
     text-transform: uppercase;
     transition: all 0.5s ease;
     cursor: pointer;
      }

      .form-signup-btn button:hover{
        background-color: var(--white);
        border: 2px solid var(--btn-blue);
    
        color: var(--btn-blue);
         }
     .signup .inner_container h1{
        font-size: 30px;
    margin: auto;
    text-align: center;
    text-transform: capitalize;
    color: var(--btn-blue);
    position: relative;
    width: max-content;
    /* max-width: 90%; */
     }

     .signup .inner_container p{
        font-size: 16px;
    margin: auto;
    /* text-align: center; */
    margin-top: 8px;
    color: rgba(0,0,0,0.5);
     }

     .a-color{
     color: var(--blue);
     text-decoration: underline;
     transition: all 0.5s ease;
     }

     .a-color:hover{
        color: var(--blue);
        text-decoration: none;
        }

     .form-group{
        width: 100%;
        display: flex;
        gap: 20px;
     }
     .form-group .row{
       flex: 1;
       display: flex;
       gap: 20px;
     }

     .trust-section h2{
        font-size: 40px;
    margin: auto;
    text-align: center;
    text-transform: capitalize;
    color: var(--btn-blue);
    position: relative;
    width: max-content;
     }

     
     .trust-section .trust-section-inner{
      display: flex;
      flex-direction: row;
      
     }

     .trust-section .trust-section-inner .trust-left,
     .trust-section .trust-section-inner .trust-right{
        flex: 1 0 50%;
        
       }

       .container-img {
        display: flex;
        /* align-items: center; */
        justify-content: space-between;
        background-color: var(--blue);
        color: white;
        /* padding: 50px; */
        min-height: 500px;
        padding-left: calc((100% - 1312px)/2);
    }

    .container-img.container-img-2{
        /* padding-left: calc((100% - 1312px)/2); */
        padding-left: 0px !important;
        /* min-height: 300px; */

    }
    .container-img.container-img-2 .left-content{
        padding-right:max(calc((100% - 1312px)/2), 16px) ;
        /* padding-right: 20px; */

    }

    .left-content {
        flex: 1;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 20px;
        padding-right: 30px;
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: center;

    }

    .left-content h2 {
        margin-bottom: 15px;
        font-size: 36px;
    }

    .left-content p {
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 1.5;
    }

  
    .right-content {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
       
    }

    .right-content img {
        width: 100%;
        /* max-width: 500px; */
        border-radius: 10px 0px 0px 10px;
        height: 100%;
        object-fit: cover;
    }
    
    .container-img.container-img-2 .right-content img {
  
        border-radius: 0px 10px 10px 0px;
      
    }


    .idea-wrap .idea-wrap-inner{
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 80px;
        padding-bottom: 80px;
        /* padding-right: 20px; */
        /* padding-right: calc((100% - 1312px)/2); */
    }
    /* .idea-wrap .idea-wrap-inner .idea-grid{
        display: flex;
        gap: 20px;
        padding-right: 20px;
        padding-right: calc((100% - 1312px)/2);
    } */

    .relative{
        position: relative;
    }

    .idea-wrap .idea-wrap-inner .idea-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
    }

    .idea-wrap .idea-wrap-inner .main-heading+p{
        max-width: 90%;
    margin: auto;
    text-align: center;
    font-size: 18px;
    line-height: 28px;
    /* color: var(--white); */
    }

    .grid-content h2{
        font-size: 30px;
        line-height: normal;
        color: var(--white);
        text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
        flex: 1;
    }

    .grid-content p{
        font-size: 18px;
        /* margin-top: 12px; */
        line-height: normal;
        color: var(--white);
        flex: 1;
    }

    
    .idea-wrap .idea-wrap-inner blockquote{
        color: rgba(0, 0, 0, 0.7);
        font-style: italic;
        text-align: center;
        margin: auto;
        font-size: 15px;
    }

    
    
    .idea-wrap .idea-wrap-inner .idea-grid div:first-child{
         flex: 1;
         width: 100%;
         /* height: 100%; */
    }

    .idea-wrap .idea-wrap-inner .idea-grid .grid-img{
       aspect-ratio: 16/9;
       overflow: hidden;
       border-radius: 8px;
   }
    .idea-wrap .idea-wrap-inner .idea-grid .grid-img img{
         width: 100%;
         height: 100%;
         border-radius: 8px;

    }

    .idea-wrap .idea-wrap-inner .idea-grid .grid-img::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    border-radius: 8px;
    transition: all 0.5s ease;

   }

   /* .check-bg{
    color: var(--white);
    background: var(--blue);
    border-radius: 50%;
    padding: 7px;
    width: 36px;
    height: 36px;
    font-size: 24px;
    margin-right: 6px;
   } */

   
   .idea-wrap .idea-wrap-inner .idea-grid .relative:hover .grid-img::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #FFF;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1;
    border-radius: 8px;

   }
    .idea-wrap .idea-wrap-inner .idea-grid .grid-content{
         padding: 24px 20px;
         position: absolute;
         top: 0px;
         z-index: 1;
         color: var(--white);
         display: flex;
         flex-direction: column;
         gap: 0px;
         height: 100%;
    }

    /* .idea-wrap .idea-wrap-inner>div:first-child{
      
    } */

.quality{
    background-color: var(--btn-blue);
}

.quality .quality-inner{
    display: flex;
    gap: 80px;
    padding-right: calc((100% - 1312px)/2);
}
.quality .quality-inner .quality-image{
  flex: 1;
  
}
.quality .quality-inner .quality-image img{
    width: 100%;
    border-radius:0px 10px 10px 0px;
    height: 100%;
    object-fit: cover;
  
}
.quality .quality-inner .quality-content{
  flex: 1;
  padding: 50px 0px;
  display: flex;
  flex-direction: column;
  gap: 20px;

}
.quality .quality-inner .quality-content h2{
    /* margin-bottom: 15px; */
    font-size: 36px;
    color: var(--white);

}
.quality .quality-inner .quality-content p{
    /* margin-bottom: 15px; */
    font-size: 18px;
    color: var(--white);
    line-height: 1.5;

}

.quality .quality-inner .quality-content .content-list{
    display: flex;
    flex-direction: column;
    gap: 12px;


}

.quality .quality-inner .quality-content .content-list>li{
  color: white;
  font-size: 16px;
    

}
.quality .quality-inner .quality-content blockquote{
  font-style: italic;
  color: white;
    

}

.quality .quality-inner .quality-content .content-list>li .content-list-head{
    font-weight: 800 !important;
      
  
  }

  .quality.quality-alt{
    background: var(--white);
    margin-top: 80px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .quality.quality-alt .quality-inner{
    padding-right: 16px;
  }
  .quality.quality-alt h2,
  .quality.quality-alt p,
  .quality.quality-alt li,
  .quality.quality-alt blockquote{
    color: black !important;
  }
  .quality.quality-alt .quality-inner .quality-content{
   padding: 0px !important;
  } 

  .quality.quality-alt .quality-inner .quality-image{
    border-radius: 30% 70% 65% 35% / 47% 69% 31% 53% ;
    overflow: hidden;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.23));
  }

  .flex-gap{
    display: flex;
    gap: 6px;
  }

  .contact-text-center{
    text-align: center;
    font-size: 18px !important;
    margin-top: 40px !important;
    color: var(--black) !important;
  }

  .trust .italic-text{
    font-size: 22px !important;
    font-style: italic;
    text-shadow: 4px 4px 2px black;
  }


@media only screen and (max-width: 768px){
    .container {
        flex-direction: column;
        text-align: center;
    }

    a.navbar-brand {
        font-size: 24px;
        max-width: 40%;
    }

    .right-nav {
        gap: 6px;
        font-size: 12px;
    }

    a.navbar-brand img {
        max-width: 100%;
    }

    .main-heading, .our_mission .our-mission-inner h1 {
        font-size: 24px;
    }

    .reviews .main-heading {
        max-width: 100%;
    }

    .reviews {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .review-inner .review-subhead {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.4;
    }

    .review-inner ul {
        gap: 20px;
        font-size: 14px;
        padding: 0px;
        max-width: 100%;
    }

    .products .row {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .left-content {
        flex: 1;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .left-content h2 {
        margin-bottom: 15px;
        font-size: 24px;
    }   
    .left-content p {
        margin-bottom: 15px;
        font-size: 16px;
        line-height: 1.4;
    }

    .right-content img {
        width: 100%;
        border-radius: 10px 10px 0px 0px;
        height: 100%;
        object-fit: cover;
    }

    .main-heading, .our_mission .our-mission-inner h1 {
        width: 100%;
    }

    .container-img {
        display: flex;
        flex-direction: column;
    }

    .achievement {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .achievement .achievement-inner, .trust .trust-inner {
        max-width: 100%;
        margin: auto;
    }

    .trust .trust-inner p, .achievement .achievement-inner p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.4;
    }

    .idea-wrap .idea-wrap-inner {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    
    .idea-wrap .idea-wrap-inner .main-heading+p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.4;
    }

    .idea-wrap .idea-wrap-inner blockquote {
        font-size: 14px;
        line-height: 1.4;
    }

    .idea-wrap .idea-wrap-inner .idea-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 26px;
    }

    .grid-content h2 {
        font-size: min(6vw,24px);
        line-height: 1.4;
        text-align: left;
    }
    
    .grid-content p {
        font-size: min(5vw,16px);
        line-height: 1.4;
        text-align: left;
    }
    .idea-wrap .idea-wrap-inner .idea-grid>div.relative {
      max-width: 400px;
      margin: auto;
    }
    nav .nav-link {
        font-size: 10px;
    }

    .features {
        justify-content: center;
    }

    .right-content {
        margin-top: 20px;
    }

    body section.quality:nth-child(odd) .quality-inner{
        flex-direction: column !important;
    }

    body section.quality:nth-child(even) .quality-inner{
        flex-direction: column-reverse !important;
    }

    .quality.quality-alt {
        margin-top: 0px;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .quality .quality-inner .quality-content h2 {
        /* margin-bottom: 15px; */
        font-size: 24px;
        color: var(--white);
        text-align: left;
    }

    .quality .quality-inner .quality-content p {
        font-size: 16px;
        color: var(--white);
        line-height: 1.4;
        text-align: left;
    }

    .quality .quality-inner .quality-content .content-list>li {
        color: white;
        font-size: 14px;
        text-align: left;
    }

    .quality .quality-inner .quality-content blockquote {
        font-size: 14px;
        line-height: 1.4;
    }

    .container-img.container-img-2 {
        flex-direction: column-reverse;
    }

    .signup .inner_container h1 {
        font-size: 24px;
        width: 100%;
        
    }

    .signup .inner_container p {
        font-size: 14px !important;
        line-height: 1.4;
        text-align: left;
        margin-top: 8px;
    }

    footer .site-footer__bottom {
       flex-direction: column;
       gap: 16px;
    }

    footer .page-width .site-footer__linklist a {
        font-size: 14px;
    }
    .signup .inner_container form .col-md-6 textarea, .signup .inner_container form .col-md-6 input {
        padding: 12px 8px;
        font-size: 14px;
    }


    .form-group .row {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .signup {
        padding: 20px;
        margin-top: 20px;
    }

    .quality.quality-alt .quality-inner .quality-image {
        width: 100%;
        margin: auto;
    }

    .quality .quality-inner {
        gap: 16px;
        padding-right: 16px !important;
    }
} 

@media only screen and (min-width: 769px) and (max-width: 900px){

   body section.quality:nth-child(odd) .quality-inner{
        flex-direction: column !important;
    }

    body section.quality:nth-child(even) .quality-inner{
        flex-direction: column-reverse !important;
    }

    .quality.quality-alt {
        margin-top: 40px;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .quality.quality-alt .quality-inner .quality-content {
        padding: 40px !important;
    }
}

@media only screen and (min-width: 769px) and (max-width: 1024px){
    .reviews .main-heading {
        max-width: 100%;
    }

    .review-inner .review-subhead {
        max-width: 100%;
    }

    .review-inner ul {
 
        max-width: 90%;
      
    }
    .main-heading, .our_mission .our-mission-inner h1 {
        width: unset;
    }

    .idea-wrap .idea-wrap-inner .idea-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    .quality.quality-alt .quality-inner .quality-image {
        width: 60%;
        margin: auto;
    }

    .quality .quality-inner {
        gap: 24px;
        padding-right: 16px !important;
    }
}