/*------------------------------------------------------------------
[Master Stylesheet]
Project: Alegada
Version:  1.0
Assigned to:  Templines
Primary use: Alegada
-------------------------------------------------------------------*/

/* FONTS*/
@import "https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700|Roboto:300,300i,400,400i,500,500i,700,700i";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";
@import "../fonts/stroke/style.css";
@import "../fonts/elegant/style.css";
@import "../fonts/flaticon/font/flaticon.css";

/* PLUGIN CSS */

@import "../libs/bootstrap/bootstrap-grid.css"; /* bootstrap */
@import "../libs/bootstrap/bootstrap.min.css"; /* bootstrap */
@import "../libs/headers/header.css"; /* header */
@import "../libs/headers/yamm.css"; /* header */
@import "../libs/slider-pro/slider-pro.css"; /* main slider */
@import "../libs/owl-carousel/owl.theme.css"; /* other sliders */
@import "../libs/bxslider/jquery.bxslider.css"; /* other sliders */
@import "../libs/magnific-popup/magnific-popup.css"; /* modal */
@import "../libs/animate/animate.css"; /* animations */

/* MAIN CSS */

@import "theme.css";
@import "forum.css";
@import "color.css";
@import "responsive.css";

.clr-white {
  color: white !important;
}
.cust-gap {
  padding-top: 60px !important;
}
.case-gap {
  padding: 60px 0 !important;
}

/* Button */
.open-modal {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-family: "Roboto";
}

/* Overlay */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
}

/* Modal Box */
.modal-content {
  background: #1D95F8;
  padding: 80px 100px;
  width: 80%;
  border-radius: 8px;
  position: relative;
  animation: fadeIn 0.3s ease;
  /* top: 36%; */
  height: 95vh;
  overflow-y: auto;
}

/* Close Button */
.close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.box-pack {
  background-color: #1D95F8;
  padding: 25px 30px;
  border-radius: 8px;
  max-width: 31% !important;
}
.box-pack h3 {
  color: #fff;
  font-size: 28px;
  font-family: "Libre Baskerville";
  font-weight: 700 !important;
}
.box-pack h4 {
  color: #fff;
  font-size: 18px;
  font-family: "Libre Baskerville";
  font-weight: 700 !important;
  padding-bottom: 8px;
}
.box-pack p {
  font-size: 16px;
  color: #fff;
  font-family: "Roboto";
  line-height: 26px;
  padding-bottom: 10px;
}

.modal-content h3 {
  font-size: 45px;
  font-family: "Libre Baskerville";
  font-weight: 700;
  color: #fff;
}
.modal-content h5 {
  font-size: 18px;
  font-family: "Libre Baskerville";
  font-weight: 700;
  color: #fff;
  padding: 16px 0 0;
}
.modal-content h4 {
  font-size: 26px;
  font-family: "Libre Baskerville";
  font-weight: 700;
  color: #fff;
  padding: 12px 0;
}
.modal-content p {
  font-size: 16px;
  font-family: "Roboto";
  font-weight: 700;
  color: #fff;
  padding: 12px 0;
  margin: 0;
  font-weight: 400;
}
.gap-row{
    gap: 14px;
}