/*
*  [Master Stylesheet]
*  Project: SFT HTML Template
*  Date: 10/11/22
*  Author: Devbug
**/
@import "lightbox.css";
html {
    box-sizing: border-box;
    scroll-behavior: smooth;}

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

body {
    margin: 0;
    padding: 0;
    font-family: 'Be Vietnam Pro', sans-serif;
    overflow-x: hidden;}

:root {
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    --almostblack: hsl(0, 0%, 9%);
    --gray: hsl(210, 11%, 15%);
    --lgray: hsl(0, 0%, 50%);
    --sft-lgray: hsl(210, 7%, 27%);
    --sft-pink: hsl(6, 48%, 58%);
    --sft-dlblue: hsl(178, 100%, 29%);
    --sft-lblue: hsl(168, 47%, 61%);}

/*Classes */
.hr-6 {
    background-color: var(--gray);
    width: 50px;}

.hr-5 {
    background-color: var(--gray);
    width: 100px;}

.hr-4 {
    background-color: var(--gray);
    width: 200px;}

.hr-3 {
    background-color: var(--gray);
    width: 300px;}

.hr-2 {
    background-color: var(--gray);
    width: 400px;}

.hr-1 {
    background-color: var(--gray);
    width: 500px;}

.cta {
    border: 2px solid var(--sft-lblue);
    font-weight: 700;
    width: 200px;
    padding: 20px;}
    
    .cta:hover {
        background-color: var(--sft-lblue);}

.fade_in--bottom {
    opacity: 0;}
    
.fadeInBottom {
    animation: fadeInBottom 1s ease-in-out 0.1s forwards;}

.overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--almostblack);
    z-index: 0;
    opacity: 0.6;}

/* Animation */
@keyframes fadeInBottom {
    0% {
        transform: translateY(40px);
        opacity: 0;}
    100% {
        transform: translateY(0px);
        opacity: 1;}}

/* Navbar Panel */
.navbar {
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 3rem;
    z-index: 1;
    font-size: 12px;
    letter-spacing: 1px;
    background-color: transparent;}

 .navbar .navbar-brand {}

 .navbar .navbar-toggler {
    color: var(--white);}

 .navbar .collapse.navbar-collapse {
    justify-content: space-evenly;}

  .navbar .collapse.navbar-collapse .navbar-nav {
    color: var(--white);}
    @media (min-width: 47rem){
        .navbar .collapse.navbar-collapse .navbar-nav {
            align-items: center;}}
    @media (min-width: 47rem){
        .navbar .collapse.navbar-collapse .navbar-nav {
            align-items: center;}}

   .navbar .collapse.navbar-collapse .navbar-nav .nav-item:not(:last-child) {
       margin-right: 1rem;}

     .navbar .collapse.navbar-collapse .navbar-nav .nav-item .nav-link {
        color: var(--white);
        font-weight: bold;
        position: relative;}
        .navbar .collapse.navbar-collapse .navbar-nav .nav-item .nav-link .ion{
            font-size: 28px;}
        .navbar .collapse.navbar-collapse .navbar-nav .nav-item .nav-link.cur{
            font-size: 20px;}
     @media (min-width: 47rem) {
        .navbar .collapse.navbar-collapse .navbar-nav .nav-item .nav-link::before {
            content: '';
            background-color: var(--white);
            height: 1px;
            width: 100%;
            display: block;
            position: absolute;
            bottom: -2px;
            opacity: 0;
            transition: opacity 300ms ease-in-out;}
        .navbar .collapse.navbar-collapse .navbar-nav .nav-item .nav-link:hover::before {
            opacity: 1;}}
    @media (min-width: 67rem) {
        .navbar .collapse.navbar-collapse .navbar-nav .nav-item .nav-link::before {
            content: '';
            background-color: var(--white);
            height: 1px;
            width: 100%;
            display: block;
            position: absolute;
            bottom: -2px;
            opacity: 0;
            transition: opacity 300ms ease-in-out;}
        .navbar .collapse.navbar-collapse .navbar-nav .nav-item .nav-link:hover::before {
            opacity: 1;}}

     .navbar .collapse.navbar-collapse .navbar-nav .nav-item .dropdown-menu {}

      .navbar .collapse.navbar-collapse .navbar-nav .nav-item .dropdown-menu .dropdown-item {
         font-size: 12px;}
      .navbar .collapse.navbar-collapse .navbar-nav .nav-item .dropdown-menu .dropdown-item.nav-more {
         color: var(--lgray);}
      .navbar .collapse.navbar-collapse .navbar-nav .nav-item .dropdown-menu a:active {
         background-color: var(--gray);}

/** Top Navbar*/
@media (max-width: 46rem) {
    .navbar.navbar__top {
        display:none;}}
    @media (min-width: 47rem) {
        .navbar.navbar__top {
            padding: 0.275rem;
            padding-left: 1.5rem;
            background-color: var(--sft-pink);
            justify-content: space-between;}
        
            .nav-link {
                color: var(--white);}
        
            .navbar.navbar__top .navbar-nav .nav-item .nav-link .ion {
                font-size: 16px;}}
    @media (min-width: 67rem) {
        .navbar.navbar__top {
            padding: 0.275rem;
            padding-left: 1.5rem;
            background-color: var(--sft-pink);
            justify-content: space-between;}
        
            .nav-link {
                color: var(--white);}
        
            .navbar.navbar__top .navbar-nav .nav-item .nav-link .ion {
                font-size: 16px;}}

/* Cover */
.cover {
    position: relative;
    padding-bottom: 5rem;
    background-image: url("../img/cover.jpg");
    background-size: 250%;
    background-position: 50% 0%;
    background-repeat: no-repeat;}
    @media (min-width: 47rem) {
        .cover {
            background-position: 50% 60%;
            padding-top:10.5px !important;
            padding-bottom:40.5px !important;
            background-size: 130%;}}
    @media (min-width: 67rem) {
        .cover {
            background-position: 50% 60%;
            padding-top:10.5px !important;
            padding-bottom:40.5px !important;
            background-size: 100%;}}

 .cover__content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 0;
    padding-bottom: 1.5rem;
    text-align: center;}
    @media (min-width: 47rem) {
        .cover__content {
            padding-left: 20rem;
            padding-right: 20rem;
            text-align: center;}}
    @media (min-width: 57rem) {
        .cover__content {
            padding-left: 20rem;
            padding-right: 20rem;
            text-align: center;}}

   .cover__content h1{
        color: var(--white);
        padding-top: 10rem;
        padding-left: 1rem;
        padding-right: 1rem;
        line-height: 1.1;
        font-size: 34px;
        font-weight: 500;
        margin-bottom: 20px;}
        @media (min-width: 47rem) {
            .cover__content h1 {
                padding-top: 0;
                padding-left: 0;
                padding-right: 0;
                font-size: 84px;}}
        @media (min-width: 57rem) {
            .cover__content h1 {
                padding-top: 0;
                padding-left: 0;
                padding-right: 0;
                font-size: 84px;}}
    
   .cover__cta {
        color: var(--white);
        font-size: 28px;
        font-weight: 700;
        justify-content: center;
        display: grid;}

/** section1 */
.section1 {}

    .section1 .row {
        padding: 1rem;}
        @media (min-width: 47rem) {
            .section1 .row {
                padding: 5rem;}
        }
        @media (min-width: 47rem) {
            .section1 .row {
                padding: 5rem;}
        }

    .section1__content {
        padding-left: 2rem;
        padding-right: 2rem;}
        
        .section1__content h2 {
            color: var(--sft-dlblue);
            font-weight: bolder;}

        .section1__content img {
            border-radius: 10px;
            width: 200px;
            height: 100px;
            margin-bottom: 20px;}

        .section1__content p {
            color: var(--sft-lgray);
            font-size: 20px;
            font-weight: 300;}

/** Footer */
footer {}

    footer .row {
        color: var(--white);
        background-color: var(--black);
        padding-left: 2.675rem;
        padding-right: 2.675rem;
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
        text-align: center;}

            footer .row .social_icons a:not(:last-child){
                margin-bottom: 10px;}
                
            footer .row img{
                margin-bottom: 20px;}