/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,700i,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,800i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Baloo+2');


/*****----------------------------------------
 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/* VARIABLES  DOWNLOADED FROM BNB WEB PAGE */

 body {
     --wp--preset--color--black: #000000;
     --wp--preset--color--cyan-bluish-gray: #abb8c3;
     --wp--preset--color--white: #ffffff;
     --wp--preset--color--pale-pink: #f78da7;
     --wp--preset--color--vivid-red: #cf2e2e;
     --wp--preset--color--luminous-vivid-orange: #ff6900;
     --wp--preset--color--luminous-vivid-amber: #fcb900;
     --wp--preset--color--light-green-cyan: #7bdcb5;
     --wp--preset--color--vivid-green-cyan: #00d084;
     --wp--preset--color--pale-cyan-blue: #8ed1fc;
     --wp--preset--color--vivid-cyan-blue: #0693e3;
     --wp--preset--color--vivid-purple: #9b51e0;
     --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);
     --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);
     --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);
     --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);
     --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
     --wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);
     --wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);
     --wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);
     --wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);
     --wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);
     --wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);
     --wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);
     --wp--preset--duotone--dark-grayscale: url(#wp-duotone-dark-grayscale);
     --wp--preset--duotone--grayscale: url(#wp-duotone-grayscale);
     --wp--preset--duotone--purple-yellow: url(#wp-duotone-purple-yellow);
     --wp--preset--duotone--blue-red: url(#wp-duotone-blue-red);
     --wp--preset--duotone--midnight: url(#wp-duotone-midnight);
     --wp--preset--duotone--magenta-yellow: url(#wp-duotone-magenta-yellow);
     --wp--preset--duotone--purple-green: url(#wp-duotone-purple-green);
     --wp--preset--duotone--blue-orange: url(#wp-duotone-blue-orange);
     --wp--preset--font-size--small: 13px;
     --wp--preset--font-size--medium: 20px;
     --wp--preset--font-size--large: 36px;
     --wp--preset--font-size--x-large: 42px;
     --wp--preset--spacing--20: 0.44rem;
     --wp--preset--spacing--30: 0.67rem;
     --wp--preset--spacing--40: 1rem;
     --wp--preset--spacing--50: 1.5rem;
     --wp--preset--spacing--60: 2.25rem;
     --wp--preset--spacing--70: 3.38rem;
     --wp--preset--spacing--80: 5.06rem;
 }

 :root {
    --swiper-navigation-size: 44px;
}
:root {
    --swiper-theme-color: #007aff;
}

 :root {
    --bs-indigo: #6610f2;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #00ffc5;
    --bs-secondary: #f7ede2;
    --bs-pink: #f5cac3;
    --bs-red: #ed3f40;
    --bs-purple: #592d9c;
    --bs-purple-gray: #71658c;
    --bs-beige: #f7ede2;
    --bs-lillac: #a8a0fb;
    --bs-gray: #595663;
    --bs-gray-light: #ccc;
    --bs-gray-cloudy: #b3bfd0;
    --bs-green: #00ffc5;
    --bs-black: #333;
    --bs-blue: #1c006a;
    --bs-primary-rgb: 0,255,197;
    --bs-secondary-rgb: 247,237,226;
    --bs-pink-rgb: 245,202,195;
    --bs-red-rgb: 237,63,64;
    --bs-purple-rgb: 89,45,156;
    --bs-purple-gray-rgb: 113,101,140;
    --bs-beige-rgb: 247,237,226;
    --bs-lillac-rgb: 168,160,251;
    --bs-gray-rgb: 89,86,99;
    --bs-gray-light-rgb: 204,204,204;
    --bs-gray-cloudy-rgb: 179,191,208;
    --bs-green-rgb: 0,255,197;
    --bs-blue-rgb: 28,0,106;
    --bs-white-rgb: 255,255,255;
    --bs-black-rgb: 51,51,51;
    --bs-body-color-rgb: 0,0,0;
    --bs-body-bg-rgb: 255,255,255;
    --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
    --bs-gradient: linear-gradient(180deg,hsla(0,0%,100%,.15),hsla(0,0%,100%,0));
    --bs-body-font-family: "Baloo 2";
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 500;
    --bs-body-line-height: 1.5;
    --bs-body-color: #000;
    --bs-body-bg: #fff
}

/*------- GLOBAL ------*/
 * {
      box-sizing: border-box !important;
 }

 html {
      scroll-behavior: smooth;
 }


 hr {
    background-color: currentColor;
    border: 0;
    color: inherit;
    margin: 1rem 0;
    opacity: .25
}

:root {
    --wp--preset--font-size--normal: 16px;
    --wp--preset--font-size--huge: 42px;
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    font-family: "Baloo 2";
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.7143rem;
    margin-top: 0
}

*, :after, :before {
    box-sizing: border-box;
}

.h1,h1 {
    font-size: 3.5rem
}

.h2,h2 {
    font-size: 2.5rem
}

.h3,h3 {
    font-size: 1.75rem
}

.h4,h4 {
    font-size: 1.5rem
}

.h5,h5 {
    font-size: 1rem
}

.h6,h6 {
    font-size: .7857rem
}

p {
    margin-bottom: 1rem;
    margin-top: 0
}

a {
    color: #1c006a;
    text-decoration: underline;
}

a:hover {
    color: #160055;
}

a:not([href]):not([class]),a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

body {

    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(51,51,51,0);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    margin: 0;
    text-align: var(--bs-body-text-align);
}



.container {
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--bs-gutter-x,.75rem);
    padding-right: var(--bs-gutter-x,.75rem);
    width: 100%;
}
img,svg {
    vertical-align: middle;
}

/**------ HEADER SECTION ------**/
.site-header {
    background-color: #fff;
    align-content:right;
    padding: 1rem;
    overflow: hidden;
}

.home-header {
    align-content:center;
    background-image: url("../images/bg1.png");
    overflow: hidden;
}

.home-header__block {
    align-content:center;
    margin: 0 auto;
    max-width: 73.375rem;
    padding: 1.25rem 1rem;
}

@media(min-width: 992px) {
    .home-header__block {
        padding:3.1056rem 0 0;
    }
}
.home-header__content {
    align-content:center;
    align-items: flex-start;
    display: center;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

.home-header__content .h1,.home-header__content h1 {
    margin-bottom: 2.5rem;
    margin-top: 2.1088rem;
    max-width: 26rem;
    color: #fff;
    font-family: var(--bs-body-font-family);
}

.home-header__content .h1 a,.home-header__content h1 a {
    color: #fff;
    font-size: 3rem;
    line-height: 3rem;
    text-decoration: none;
}
.home-header__content .excerpt {
    color: #fff;
    font-size: 1.25rem;
    line-height: 2.0025rem;
    margin-bottom: 1.875rem;
    max-width: 38.25rem;
}

@media(min-width: 992px) {
    .home-header__content .excerpt {
        font-size:1.5rem;
        line-height: 2.4031rem;
    }
}

.home-header__content .excerpt strong {
    color: #00ffc5;
    font-family: var(--bs-body-font-family);
    font-weight: 600;
}


/*------ FORM SECTION ------*/

.form {
    position: fixed;
    font-family: var(--bs-body-font-family);
    background-position: 50% 50%;
    background-repeat: no-repeat;

}
@media(min-width: 768px) {
    .form {
        background-image: url("../images/template.png");
    }
}


.form__form {
    height: 500px;
    justify-content: center;
    font-family: var(--bs-body-font-family);
    padding: 1rem 1.0625rem 2rem 10rem;
}

@media(min-width: 768px) {
    .form__form {
        padding:1rem;
    }
}

.form__form input,.form__form select,.form__form textarea {
    font-family: var(--bs-body-font-family);
    border-radius: .25rem;
    border-color: #1c006a;
    color: #1c006a;
    font-size: 1rem;
    line-height: 1.5rem;
    padding: .875rem 1rem 1.125rem;
    width: 100%;
}

.cform__form input::placeholder,.form__form select::placeholder,.form__form textarea::placeholder {
    color: #1c006a;
    font-size: 1rem;
    line-height: 1.5rem;
}

@media(min-width: 768px) {
    .form__form input,.form__form select,.form__form textarea {
        padding:.75rem 1rem;
    }
}

.form__form textarea {
    resize: none;
}

.form__form select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

.form__form select~svg {
    position: absolute;
    right: 1rem;
    top: .875rem;
}

.form__form select:focus,.form__form textarea:focus {
    outline: none;
}

.form__form button {
    border-radius: .25rem;
    color: #1c006a;
    margin-top: 2rem;
    padding: 1rem;
    width: auto;
}

.form__form button svg {
    margin-left: .5625rem;
}

@media(min-width: 768px) {
    .form__form button {
        margin-top:1.5rem;
        padding: .75rem 1.5rem;
        width: auto;
    }
}

.row {

    display:grid;
    flex-wrap: wrap;

}

.col {
    font-family: var(--bs-body-font-family);
    margin-top: 1rem;
    flex: 0 0 auto;
    width: 100%;
}



.form__form{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url("../images/background.png");
  background-size:     cover;                      /* <------ */
  background-repeat:   no-repeat;
  background-position: center center;
}

button {
    appearance: auto;
    writing-mode: horizontal-tb !important;
    font-style: ;
    font-variant-ligatures: ;
    font-variant-caps: ;
    font-variant-numeric: ;
    font-variant-east-asian: ;
    font-weight: ;
    font-stretch: ;
    font-size: ;
    font-family: var(--bs-body-font-family);
    text-rendering: auto;
    color: #1c006a;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: center;
    align-items: flex-start;
    cursor: default;
    box-sizing: border-box;
    background-color: #00ffc5;
    margin: 0em;
    padding: 1px 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    border-image: initial;
}
.btn-primary {
    background-color: #00ffc5;
    border-color: #00ffc5;
    color: #1c006a;
}
.btn {
    background-color: #00ffc5;
    border: 1px solid #1c006a;
    border-radius: 0;
    color: #00ffc5;
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    text-align: center;
    text-decoration: none;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    user-select: none;
    vertical-align: middle;
}


/*------ FOOTER ------*/
.footer-container {
  color: #fff;
  display: flex;
  flex-direction: column;
  background-image: url("../images/4.png");
  background-size:     cover;                      /* <------ */
  background-repeat:   no-repeat;
  background-position: center center;
  bottom: 0;
  ¡
  padding: 1rem;
  flex-direction: column;
  align-items: left;
  justify-content: left;
}

.website, .email {
  color: #fff;
  width: 100%;
  padding: 0.2rem;
  display: flex;
  gap: 1rem;
  align-items: left;
  justify-content: left;
  font-weight: bold;
}

.website, .email div {

  padding: 0 1rem;
  color: #fff;
  display: flex;
  align-items: left;
}
.website, .email a {

  padding: 0 1rem;
  color: #fff;
  display: flex;
  align-items: left;
}

.website img {
  height: 70px;
  weight: 70px;
  display: flex;
  align-items: left;
}


.social-links {
  color: #fff;
  display: flex;
  align-items: left;
  margin-left: 1rem;
}

.social-links .link {
  color: #fff;
  padding: 0.5rem 1rem;
}

.social-links .link a {
  color: #000;
}

.social-links .link a:hover {
  color: #fff;
}

.copyright {
  display: flex;
  align-items: left;
  margin-left: 1rem;
  padding: 1rem 0.2rem;
  font-size: 10px;
}


@media screen and (max-width: 600px) {
  .header-container {
  }
  .navbar,
  .user-options {
    display: none;
  }
  .menu {
    display: block;
  }
}


@media screen and (min-width: 1300px) {
  .header-container {
    margin: 0 6rem;
  }
}