/* Variables */
:root {
    --font-sans: "Montserrat", "Lato", sans-serif;
    --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    --font-size: 18px;
    --color-green: #27ae60;
    --transition-dur: 0.3s;
    --color-dark: #333;
    --color-light: #f2f2f2;
    --color-yellow: #ffda00;
    --color-red: #ef1f22;
    --color-pink: #f50057;
}

body{
    font-family: var(--font-sans);
    font-size: var(--font-size);
    line-height: 1.5;
    margin: 0;
    height: 100%;
}
html{
    height: 100%;
}
p {
    color: #000;
    font-weight: 400;
}
em {
    color: #828282;
    font-weight: 500;
}

a {
    text-decoration: none;
    transition: var(--transition-dur);
}

a:hover {
    color: var(--color-green);
}

h1 {
    color: var(--color-light);
    font-size: 3.5rem;
    font-weight: 800;
    }

h2 {
    color: var(--color-dark);
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 1rem;
    transition: var(--transition-dur);
}

h3 {
    color: var(--color-dark);
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.9rem;
}

h4 {
    font-size: 1.2rem;
    font-weight: 700;
}

ul{
    list-style: none;
    
}
.fullsite {
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: 8fr;
    grid-template-rows: 100px 1.35fr 0.75fr 1fr 1fr 1fr;
    grid-template-areas: 
    "hd hd hd hd hd hd hd hd"
    "hero hero hero hero hero hero hero hero"
    "feat feat feat feat feat feat feat feat"
    "testi testi testi testi testi testi testi testi"
    "freaq freaq freaq freaq freaq freaq freaq freaq"
    "ft ft ft ft ft ft ft ft";
    
    
} 

#top-navigation {
    grid-area: hd;
    background-color: brown;
    margin: 0;
    justify-content: space-between;
}
.logo {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items:flex-start;
    justify-content: flex-start;
}
.logo h3 {
    position: relative;
    float: left;
    color:#f2f2f2;
    margin-top: 10px;
    margin-left: 35px;
    padding: 20px 0 15px;
    transition: all ease 500ms;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

/* Main menu*/

.main-menu {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
}

#top-navigation {
    position: relative;
    width: 100%;
}

#menuDesktop {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.main-menu .navigation {
    position: static;
    margin: 0;
    align-items: center;
}
.main-menu .navigation > li {
    position: relative;
    float: left;
    /* margin-top: 20px; */
    margin-right: 35px;
    padding: 16px 0 15px;
    transition: all ease 500ms;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.main-menu .navigation li a {
    font-weight: 600;
}

.main-menu .navigation > li:last-child {
    margin-right: 35px;
}

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a {
    opacity: 1;
    color: var(--color-yellow);
}

.main-menu .navigation > li > a {
    position: relative;
    display: block;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    text-transform: capitalize;
    letter-spacing: 0px;
    opacity: 1;
    overflow: hidden;
    font-weight: 400;
    font-size: 16px;
    transition: all 500ms ease ;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.main-menu .navigation > li:hover > a::after,
.main-menu .navigation > li.current > a::after{
    width: 22px;
    
}

.main-menu .navigation > li.menu-item-has-children > a {
    padding-right: 16px !important;
}

.main-menu .navigation > li.menu-item-has-children > a:before {
    font-family: flaticon;
    content: "\f104";
    position: absolute;
    right: 0px;
    font-size: 12px;
    line-height: 34px;
    font-weight: 800;
}

.main-menu .navigation > li > ul {
    position: absolute;
    left: -30px;
    top: 70px;
    min-width: 150px;
    z-index: 100;
    opacity: 0;
    list-style: none;
    visibility: hidden;
    display: block;
    transition: all var(--transition-dur) ease;
    -moz-transition: all var(--transition-dur) ease;
    -webkit-transition: all var(--transition-dur) ease;
    -ms-transition: all var(--transition-dur) ease;
    -o-transition: all var(--transition-dur) ease;
    padding: 20px 15px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.main-menu .navigation > li > ul > li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #f9f9f9;
}

.main-menu .navigation > li > ul > li:last-child {
    border-bottom: none;
}

.main-menu .navigation > li > ul > li > a {
    position: relative;
    display: block;
    padding: 10px 18px;
    line-height: 24px;
    font-weight: 400;
    font-size: 15px;
    text-transform: capitalize;
    color: var(--color-dark);
    transition: all 500ms ease ;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.main-menu .navigation > li > ul > li:hover > a {
    color: var(--color-yellow);
    padding-left: 10px;
}

.main-menu .navigation > li > ul > li.menu-item-has-children > a:after {
    font-family: flaticon;
    content: "\f105";
    position: absolute;
    right: 15px;
    top: 14px;
    width: 10px;
    height: 20px;
    display: block;
    color: var(--color-dark);
    line-height: 20px;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    z-index: 5;
    font-weight: 800;    
}

.main-menu .navigation > li > ul > li.menu-item-has-children:hover > a:after {
    color: var(--color-dark);
}

.main-menu .navigation > li > ul > li > ul {
    position: absolute;
    left: 120%;
    top: 0%;
    min-width: 150px;
    z-index: 100;
    list-style: none;
    opacity: 0;
    display: block;
    padding: 20px 15px;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-dur) ease;
    -moz-transition: all var(--transition-dur) ease;
    -webkit-transition: all var(--transition-dur) ease;
    -ms-transition: all var(--transition-dur) ease;
    -o-transition: all var(--transition-dur) ease;
}



.main-menu .navigation > li > ul > li > ul.from-right {
    left: auto;
    right: 0px;
}


.main-menu .navigation > li > ul > li > ul > li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #f9f9f9;
}

.main-menu .navigation > li > ul > li > ul > li:last-child {
    border-bottom: none;
}


.main-menu .navigation > li > ul > li > ul > li > a {
    position: relative;
    display: block;
    padding: 10px 18px;
    line-height: 24px;
    font-weight: 400;
    font-size: 15px;
    text-transform: capitalize;
    color: var(--color-dark);
    transition: all 500ms ease ;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}

.main-menu .navigation > li > ul > li > ul > li:hover > a {
    color: var(--color-yellow);
    padding-left: 10px;
}

.main-menu .navigation > li.menu-item-has-children > ul {
    transform: rotateZ(8deg);
    -moz-transform: rotateZ(8deg);
    -webkit-transform: rotateZ(8deg);
    -ms-transform: rotateZ(8deg);
    -o-transform: rotateZ(8deg);
    
}



.main-menu .navigation > li.menu-item-has-children:hover > ul {
    visibility: visible;
    opacity: 1;
    display: block;
    left: 0%;
    border-top: 0px !important;
    transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
}

.main-menu .navigation li > ul > li.menu-item-has-children > ul {
    transform: rotateZ(8deg);
    -moz-transform: rotateZ(8deg);
    -webkit-transform: rotateZ(8deg);
    -ms-transform: rotateZ(8deg);
    -o-transform: rotateZ(8deg);
}


.main-menu .navigation li > ul > li.menu-item-has-children:hover > ul {
    visibility: visible;
    display: block;
    opacity: 1;
    top: 0;
    left: 100%;
    transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transition: all 300ms ease ;
    -moz-transition: all 300ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
}

.main-menu > ul li.menu-item-has-children .dropdown-btn {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 30px;
    height: 30px;
    text-align: center;
    color: #ffffff;
    line-height: 28px;
    border: 1px solid #ffffff;
    background-size: 20px;
    cursor: pointer;
    z-index: 5;
    display: none;
}

.main-menu > ul li.menu-item-has-children .dropdown-btn i.flaticon-arrow-down-sign-to-navigate::before {
    font-size: 100px;
}




.navbar-open {
    position: relative;
    display: none;
    background-color: unset;
    padding: 0;
    border: none;
    position: absolute;
    right: 32px;
    top: 20px;
}

.navbar-open .flaticon {
    color: #fff;
    display: block;
    font-size: 30px;
    line-height: 40px;
    cursor: pointer;
    padding: 18px 0px;
}

/* Mobile Menu */

.mobile-menu {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    max-width: 100%;
    height: 100%;
    padding-right: 30px;
    opacity: 0;
    visibility: hidden;
    z-index: 999999;
    
}

.mobile-menu-visible {
    overflow: hidden;
}

.mobile-menu-visible .mobile-menu {
    opacity : 1;
    visibility : visible; 
}

.mobile-menu .menu-backdrop {
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.9);
    transform: translateX(101%);
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
    transition: all var(--transition-dur) ease;
    -moz-transition: all var(--transition-dur) ease;
    -webkit-transition: all var(--transition-dur) ease;
    -ms-transition: all var(--transition-dur) ease;
    -o-transition: all var(--transition-dur) ease;
    
}

.mobile-menu-visible .mobile-menu .menu-backdrop {
    opacity: 1;
    visibility: visible;
    transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
}

.mobile-menu .menu-box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 0;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transform: translateX(101%);
    -webkit-transform: translateX(101%);
    -ms-transform: translateX(101%);
}

.mobile-menu-visible .mobile-menu .menu-box {
    opacity: 1;
    visibility: visible;
    transition: all 0.7s ease;
    -webkit-transition: all 0.7s ease;
    -moz-transition: all 0.7s ease;
    -ms-transition: all 0.7s ease;
    -o-transition: all 0.7s ease;
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}


.mobile-menu .close-btn {
    position: absolute;
    right: 15px;
    top: 76px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    font-size: 26px;
    color: var(--color-dark);
    cursor: pointer;
    z-index: 10;
    -webkit-transition: all var(--transition-dur) ease;
    -moz-transition: all var(--transition-dur) ease;    
    -ms-transition: all var(--transition-dur) ease;
    -o-transition: all var(--transition-dur) ease;
    transition: all var(--transition-dur) ease;
    -webkit-transform: translateY(-50px);
    -ms-transform: translateY(-50px);
    transform: translateY(-50px);
}

.mobile-menu-visible .mobile-menu .close-btn {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.mobile-menu .close-btn:hover {
    opacity: 0.5;
}

.mobile-menu .navigation {
    position: relative;
    padding-top: 50px;
    display: block;
    /* border-top: 1px solid rgba(0, 0, 0, 0.1); */
}

.mobile-menu .navigation li {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu .navigation li > ul > li:last-child {
    border-bottom: none;
}

.mobile-menu .navigation li > ul > li:first-child {
    border-top: 1px solid rgba( 0, 0, 0, 0.1);
}

.mobile-menu .navigation li > a {
    position : relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-size: 15px;
    color: black;    
    text-transform: capitalize;
    transition: all var(--transition-dur) ease;
    -webkit-transition: all var(--transition-dur) ease;
    -moz-transition: all var(--transition-dur) ease;    
    -ms-transition: all var(--transition-dur) ease;
    -o-transition: all var(--transition-dur) ease;
}

.mobile-menu .navigation li.current > a,
.mobile-menu .navigation li > a:hover {
    color: red;
}

.mobile-menu .navigation li.menu-item-has-children .dropdown-btn {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: var(--color-dark);
    cursor: pointer;
    z-index: 5;
}

.mobile-menu .navigation li.menu-item-has-children .dropdown-btn:after {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul {
    display: none;
}

/* Hero Section Desktop Size */

.heroSection {
    grid-area: hero;
    position: relative;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("assets/images/travel-concept-with-landmarks-edited-v3.jpg");
    height: 100%;
    align-self: flex-start;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    justify-content: center;
    


} 

.heroTitle {
    
    color: var(--color-light);
    font-family: 'Montserrat';
    font-weight: 800;
    font-size: 3.2rem; 
    width: 440px;
    text-align: center;
    margin: auto;
    
    
    

}

.buttonHero {
    position: relative;
    text-align: center;
    margin: 14px calc(50% - 70px) auto;    
    width: 140px;
    height: 50px;
    color: var(--color-light);
    font-weight: 600;
    font-size: 1.6rem;
    background-color: brown;
    border: 3px solid var(--color-light);
    border-radius: 25px;
    cursor: pointer;
}

.buttonHero:hover {
    position: relative;
    text-align: center;
    margin: 14px calc(50% - 70px) auto;
    width: 140px;
    height: 50px;
    color: brown;
    font-weight: 600;
    font-size: 1.6rem;
    background-color: var(--color-light);
    border: 3px solid brown;
    border-radius: 25px;
    cursor: pointer;
}


/* Feature Section*/


.container-features{
    grid-area: feat;
    margin-top: 60px;
    padding-top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 7% 4%;
    
}
.feature-title {
    font-size: 1.5rem;
}
  
.feature-box {
    padding: 0 7%;
    text-align: center;
    width: 300px;
}
  
.icon {
    color: #ef8172;
    margin-bottom: 1rem;
    justify-content: center;
}
  
.icon:hover {
    color: #ff4c68;
    justify-content: center;
}

.testimonial{
    
    grid-area: testi;
    position: relative;
    text-align: center;

}

  /* Style the container with a rounded border, grey background and some padding and margin */
.containerTestimonial {
    
    border: 2px solid #ff4c68;
    background-color: #ef8172;
    border-radius: 5px;
    padding: 16px;
    margin-bottom: 16px;
    
}
  
  /* Clear floats after containers */
.containerTestimonial::after {
    content: "";
    clear: both;
    display: block;
}
  
  /* Float images inside the container to the left. Add a right margin, and style the image as a circle */
.containerTestimonial img {
    
    border-radius: 50%;
    margin: auto;
    float: none;
    display: block;
}
.containerTestimonial p {
    width: 65%;
    margin: auto;
}
  /* Increase the font-size of a span element */
.containerTestimonial span {
    font-size: 20px;
    margin-right: 15px;
}


/* FAQ */

.faq {
    grid-area: freaq;
    text-align: center;
}

.faq-h4 {
    color: #27AE93;
}
.faq-link a {
    color: #27AE93;
    font-weight: 700;
}

#footer{
    grid-area: ft;
    display: grid;
    
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 60px; 
    background-color:brown;
    color: white;
}
.ftr_container{
    display: flex;
    flex-flow:row wrap;
    
    align-items: center;
    justify-content: space-evenly;
}
.credit{
    /* grid-area: 1/1/2/2; */
    margin-top: 70px;
    justify-content: center;
    align-self: flex-start;
    text-align: center;
    text-decoration: none;    
}
.help{
    /* grid-area: 1/2/2/3; */
    margin-top: 70px;
    justify-content: center;
    align-self: flex-start;
    text-align: center;
    text-decoration: none;
}
.company{
    /* grid-area: 1/3/2/4; */
    margin-top: 70px;
    justify-content: center;
    align-self: flex-start;
    text-align: center;
    text-decoration: none;
}
.social{
    /* grid-area: 1/4/2/5; */
    margin-top: 70px;
    justify-content: center;
    align-self: flex-start;
}

#footer h4, 
#footer p {
    color: white;
}
#footer a {
    color: #ffda00;
}

.copyright {
  
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    
}
.copyright p{
    color: white;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
   

    .fullsite {
        width: 100%;
        margin: auto;
        display: grid;
        grid-template-columns: 8fr;
        grid-template-rows: 100px 1fr 0.70fr 1fr 0.70fr 1fr;
        grid-template-areas: 
        "hd hd hd hd hd hd hd hd"
        "hero hero hero hero hero hero hero hero"
        "feat feat feat feat feat feat feat feat"
        "testi testi testi testi testi testi testi testi"
        "freaq freaq freaq freaq freaq freaq freaq freaq"
        "ft ft ft ft ft ft ft ft";
        
        
    } 


    /* Hero section */

   
.heroSection {
    height: 90%;
}
    
    
.heroTitle {
    
        color: var(--color-light);
        font-family: 'Montserrat';
        font-weight: 800;
        font-size: 2.5rem !important;
        
        width: 400px;
        text-align: center;
        margin: auto;
        
    
}
    
          /* Feature Section */


   
.container-features{
        grid-area: feat;
        margin-top: -40px;        
        padding-top: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-around;
        padding: 7% 4%;
        
       
}

.feature-title {
        font-size: 1.5rem;
}
  
.feature-box {
        padding: 0% 7%;
        text-align: center;
        width: 300px;
}
  
.icon {
        color: #ef8172;
        margin-bottom: 1rem;
        justify-content: center;
}
  
.icon:hover {
        color: #ff4c68;
        justify-content: center;
}

.testimonial{
    grid-area: testi;
    position: relative;
    margin-top: 2%;
}

  /* Add media queries for responsiveness. This will center both the text and the image inside the container */
  
.containerTestimonial {
    text-align: center;
    position: relative;
    
    
}

.containerTestimonial img {
    margin: auto;
    float: none;
    display: block;
}

/* FAQ */

.faq {
    grid-area: freaq;
    text-align: center;
}

.faq-h4 {
    color: #27AE93;
}
.faq-link a {
    color: #27AE93;
    font-weight: 700;
}

.ftr_container{
    display: flex;
    flex-flow:row wrap;
    margin: 4%;
    padding: 2%;
    align-items: center;
    justify-content: space-evenly;
}

}



@media screen and (min-width: 439px) and (max-width: 768px) {
 
    
    .fullsite {
        width: 100%;
        margin: auto;
        display: grid;
        grid-template-columns: 8fr;
        grid-template-rows: 100px 1fr 0.40fr 1fr 0.70fr 1fr;
        grid-template-areas: 
        "hd hd hd hd hd hd hd hd"
        "hero hero hero hero hero hero hero hero"
        "feat feat feat feat feat feat feat feat"
        "testi testi testi testi testi testi testi testi"
        "freaq freaq freaq freaq freaq freaq freaq freaq"
        "ft ft ft ft ft ft ft ft";
        
        
    } 

#menuDesktop .top-menu {
        display: none;
        visibility: hidden;
}
.navbar-open {
        opacity: 1;
        visibility: visible;
        display: inline-block;
}    

   
    
    
/* Hero section */

.heroSection {
        height: 60%;
        
}
    

.heroTitle {
        
        color: var(--color-light);
        font-family: 'Montserrat';
        font-weight: 800;
        font-size: 2.2rem !important;
        
        width: 400px;
        text-align: center;
        margin: auto;
        
    
}
    
    /* Feature Section*/


.container-features{
    grid-area: feat;
    margin-top: -220px;
    padding: 0;   
    display: flex;
    flex-direction: column;
    
    align-items: center;
    justify-content: flex-start;
    
}

.feature-title {
    font-size: 1.5rem;
}
  
.feature-box {
    padding: 0% 2%;
    align-items: center;
    justify-content: center;
    width: 300px;
}
  
.icon {
    color: #ef8172;
    margin-bottom: 1rem;
    justify-content: center;
}
  
.icon:hover {
    color: #ff4c68;
    justify-content: center;
}

.testimonial {
    grid-area: testi;
    position: relative;
    margin-top: 0;
  }
 
.containerTestimonial {
    text-align: center;
    position: relative;
    
    
}

.containerTestimonial img {
    margin: auto;
    float: none;
    display: block;
  }

/* FAQ */

.faq {
    grid-area: freaq;
    text-align: center;
}

.faq-h4 {
    color: #27AE93;
}
.faq-link a {
    color: #27AE93;
    font-weight: 700;
}

.ftr_container{
    
    margin: 8%;
    padding: 2%;
}

  }
  
@media screen and (max-width: 438px) {

    .fullsite {
        width: 100%;
        margin: auto;
        display: grid;
        grid-template-columns: 8fr;
        grid-template-rows: 100px 1fr 0.25fr 1fr 0.70fr 1fr;
        grid-template-areas: 
        "hd hd hd hd hd hd hd hd"
        "hero hero hero hero hero hero hero hero"
        "feat feat feat feat feat feat feat feat"
        "testi testi testi testi testi testi testi testi"
        "freaq freaq freaq freaq freaq freaq freaq freaq"
        "ft ft ft ft ft ft ft ft";
        
        
    } 

#menuDesktop .top-menu {
        display: none;
        visibility: hidden;
}
.navbar-open {
        opacity: 1;
        visibility: visible;
        display: inline-block;
}    

    /* Hero section */

   
.heroSection{
        height: 60%;
}

.heroTitle {
    
    color: var(--color-light);
    font-family: 'Montserrat';
    font-weight: 800;
    font-size: 2.2rem; 
    width: 320px;
    text-align: center;
    margin: auto;
    
    
    

}
    /* Feature Section*/


.container-features{
    grid-area: feat;
    margin-top: -340px;
    padding-top: 0;   
    display: flex;
    flex-direction: column;
    
    align-items: center;
    justify-content: flex-start;
   
}

.feature-title {
    font-size: 1.5rem;
}
  
.feature-box {
    padding: 0% 2%;
    align-items: center;
    justify-content: center;
    width: 300px;
}
  
.icon {
    color: #ef8172;
    margin-bottom: 1rem;
    justify-content: center;
}
  
.icon:hover {
    color: #ff4c68;
    justify-content: center;
}

.testimonial {
    grid-area: testi;
    position: relative;
    margin-top: 0;
}

/* FAQ */

.faq {
    grid-area: freaq;
    text-align: center;
}
.faq-h4 {
    color: #27AE93;
}
.faq-link a {
    color: #27AE93;
    font-weight: 700;
}

.ftr_container{    
    margin: 8%;
    padding: 2%;
}
.copyright p{
    color: white;
    font-size: 0.6rem;
}
}