/* Font importation */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=ZCOOL+XiaoWei&display=swap');

/* Global variables */
:root {
    /* Principal color */
    --gumbo: #7D9FA6;
    --lobloly: #B6C8CD;
    --grayNurse: #E6EBE7;
    --sprout: #C0D1A9;
    --battleShipGray: #8C9E70;
    --whiteText: white;
    --blackText: black;
    --svgbackground: #92E3A9;
    --svgBackground2: #C1D4D9;
}


/* General */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Quicksand', sans-serif;
    border: none;
    list-style: none;
    text-decoration: none;
    color: var(--whiteText);
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: clip;
    background-color: var(--grayNurse);
}

button {
    cursor: pointer;
}

main,
section {
    height: 100vh;
    display: flex;
    align-items: center;
}

section {
    background-color: var(--grayNurse);
    /* border-bottom: 2px solid var(--gumbo); */
}

h1 {
    font-size: 2.1875rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

h2 {
    font-size: 2.5rem;
}

.social i {
    cursor: pointer;
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--sprout);
    padding: 0px 20px;
}

/*InfoOffer*/
.rectOffer {
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
    width: 20.125rem;
    height: 5.25rem;
    flex-shrink: 0;
    border-radius: 6.3125rem;
    border: 2px solid var(--battleShipGray);
    transform: rotate(0deg);
    transform-origin: center;
    cursor: pointer;
}

.rectOffer i {
    /* background-color: var(--grayNurse); */
    /* border-radius: 50%; */
    padding: 1rem;
    margin: 0 .7rem;
    color: var(--lobloly);
    font-size: 2rem;
    font-style: normal;
    line-height: normal;
}

.rectOffer span {
    font-size: 1.5rem;
    color: var(--blackText);
}

.informativeService button {
    background-color: transparent;
    border: 2px solid var(--gumbo);
    padding: 8px 16px;
    color: var(--blackText);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 15px;
    margin-bottom: 1rem;
}

.doubleButton .primaryBtn {
    background: var(--battleShipGray);
    color: var(--whiteText);
    border: none;
}

#float-button {
    position: fixed;
    bottom: 40px;
    right: 40px;
    background-color: #25D366;
    border-radius: 50%;
    text-align: center;
    /* box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); */
    /* border: 2px solid black; */
    z-index: 10;
    animation: sizechange 1s infinite;
}

@keyframes sizechange {
    50% {
        transform: scale(1.1);
    }
}

#float-button a {
    display: block;
    width: 60px;
    /* Ancho del botón */
    height: 60px;
    /* Alto del botón */
    line-height: 60px;
    /* Altura de línea para centrar el ícono */
    font-size: 30px;
    /* Tamaño del ícono */
}

#float-button a i {
    color: var(--whiteText);
}

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip:hover::before {
    content: attr(data-title);
    position: absolute;
    left: 50%;
    transform: translateX(-130%);
    background-color: black;
    color: white;
    padding: 0.5rem;
    border-radius: 0.5rem;
    opacity: 0.8;
    visibility: visible;
    z-index: 1;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
}

/* Scrollbar */
body::-webkit-scrollbar {
    width: 7px;
    background: var(--grayNurse);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--sprout);
    border-radius: 20px;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: var(--battleShipGray);
}

/* Components */
/* ---| NavBar |--- */
nav {
    position: fixed;
    /* top: 2.69rem; */
    top: 0px;
    padding-top: 2rem;
    /*2.69*/
    /* height: 2.8125rem; */
    width: 100%;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.navBlur {
    background-color: var(--gumbo);
    transition: .4s;
    padding-bottom: 11px;
    /* backdrop-filter: blur(10px); */
}


nav .logo {
    /* height: 100%; */
    height: 2.5em;
    position: relative;
    left: 2.38rem;
    /* margin-bottom: 14px; */
}

nav .navText {
    position: fixed;
    right: 2.38rem;
    display: flex;
}

.navText::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    bottom: 3px;
    z-index: -1;
    background-color: var(--lobloly);
}

.navText a,
.navText p {
    font-size: 1.5625rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 14px 16px;
    /* -webkit-transition: .4s;
    transition: 0.4s; */
}

.navText .containerdropbtn {
    display: flex;
    align-items: baseline;
    padding: 0px 16px;
}

.navText .containerdropbtn button {
    font-size: 1.5625rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 14px 5px 14px 0px;
    /* -webkit-transition: .4s;
    transition: 0.4s; */
}

.navText .containerdropbtn i {
    font-size: 1.5625rem;
}


.changeColor a,
.changeColor button,
.changeColor p,
.changeColor i {
    color: var(--blackText);
}

/* Dropdown */
/* Links inside the navbar */
.navText a {
    float: left;
    text-align: center;
    text-decoration: none;
}

/* The dropdown container */
.dropdown {
    float: left;
    overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
    border: none;
    outline: none;
    background-color: inherit;
    font-family: inherit;
    /* Important for vertical align on mobile phones */
    margin: 0;
    /* Important for vertical align on mobile phones */
}

/* Add a color background color to navbar links on hover */
nav a:hover,
.dropdown:hover .containerdropbtn {
    /* background-color: var(--grayNurse); */
    border-bottom: var(--blackText) solid 2px;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--grayNurse);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    /* z-index: 1; */
}

/* Links inside the dropdown */
.dropdown-content a {
    float: none;
    color: var(--blackText);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
    border: none;
    background-color: var(--lobloly);
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

.sidenav {
    display: flex;
}

.toggleSwitch {
    padding: 0px 0px 5px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 2.3125rem;
    height: 1.1875rem;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--grayNurse);
    -webkit-transition: .4s;
    transition: .4s;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25) inset;
}

.changeColorSw .slider {
    background-color: var(--battleShipGray);
}

.slider::before {
    position: absolute;
    content: "";
    width: .9rem;
    height: .9rem;
    left: 4px;
    bottom: 2px;
    background-color: var(--battleShipGray);
    -webkit-transition: .4s;
    transition: .4s;
}

.changeColorSw .slider::before {
    background-color: var(--grayNurse);
}

input:checked+.slider {
    background-color: var(--battleShipGray);
}

.changeColorSw input:checked+.slider {
    background-color: var(--gumbo);
}

/* input:focus+.slider {
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.25) inset;
} */

input:checked+.slider::before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
    background-color: var(--grayNurse);
}

.changeColorSw input:checked+.slider::before {
    background-color: var(--grayNurse);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round::before {
    border-radius: 50%;
}

/* Menu Sandwitch */
#sandwichMenu,
#closeBtn,
#closeBtn2 {
    display: none;
    margin: auto;
    /* margin: auto 2.38rem auto auto; */
    font-size: 1.4rem;
    padding: 14px 16px;
}

/* ---| Footer |--- */
footer {
    display: flex;
    align-items: center;
    background-color: var(--grayNurse);
    width: 100%;
}

.formImg {
    background: linear-gradient(0deg, rgba(140, 158, 112, 0.70) 0%, rgba(140, 158, 112, 0.70) 100%), url(/img/background/ian-stauffer-uftqFbfWGFY-unsplash.webp), var(--gumbo) 50%;
    background-size: cover;
    width: 40%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.formImg li {
    font-family: ZCOOL XiaoWei;
    font-size: 1.4375rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 1.5rem;
}

.formImg li a {
    display: block;
    text-indent: 1em;
    line-height: 2em;
}

.footerSocial i {
    color: var(--whiteText);
    font-size: 1.5rem;
}

form {
    display: flex;
    flex-direction: column;
    margin: auto;
    width: 40%;
}

form input,
form textarea,
form button {
    margin: 1rem 0;
    padding: 8px 16px;
    color: var(--blackText);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    border-radius: 5px;
}

form input,
form textarea {
    background-color: transparent;
    border: var(--battleShipGray) 3px solid;
}

form button {
    background-color: var(--sprout);
    padding: 8px 16px;
    font-size: 1.3rem;
    font-weight: 500;
}


/* Sections */
#main {
    /* background-color: beige;  */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 0%, rgba(245, 245, 245, 0.00) 100%), url(/img/background/balance-110850_1920.webp);
    background-size: cover;
    background-position: center;
}

#mainService {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 0%, rgba(245, 245, 245, 0.00) 100%), url(/img/background/luca-bravo-O453M2Liufs-unsplash.webp);
    background-size: cover;
    background-position: center;
    flex-direction: column;
}

#mainDescription,
#mainPodcast {
    background: var(--sprout);
    /* justify-content: flex-end; */
}

/*Index*/
/* #main {
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
} */
.mainText {
    margin: 0 4.31rem;
    line-height: 4em;
}

.mainText ul li {
    margin-left: 2rem;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 400;
    list-style: circle;
}

.mainText p {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
}

.mainText button {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    color: var(--blackText);
    background-color: var(--lobloly);
    padding: 8px 16px;
    border-radius: 34px;
}

.mainSocial {
    position: absolute;
    bottom: 3.5em;
    width: 100%;
    text-align: center;
}
#mainDescription img{
    height: 70%;
}


#mainDescription .descriptionVedic,
#mainPodcast .descriptionPodcast {
    margin: auto 3rem;
    width: 50%;
}

.descriptionVedic h2,
.descriptionPodcast h2 {
    font-size: 3rem;
}

.descriptionVedic p,
.descriptionPodcast p {
    margin: 1rem auto;
    font-size: 1.2rem;
    color: var(--blackText);
    text-align: justify;
}

/*Service*/
.tab {
    position: relative;
    width: 100%;
    height: 55%;
    padding-top: 8.5rem;
    /* border-bottom: 2px solid var(--sprout); */
    margin-bottom: 0.5rem;
}

.tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(56, 56, 56, 0.14);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
}

.tab h2,
.tab p,
.tab ul li {
    position: relative;
    z-index: 1;
    font-family: ZCOOL XiaoWei;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

.tab p {
    width: 80%;
    font-size: 1.1rem;
    text-align: center;
    margin: 1.5rem auto;
    line-height: 130%;
}

.tab ul {
    margin: 2.37rem auto 0.7rem;
    width: 60%;
    display: flex;
    justify-content: space-between;
}

.tab ul li {
    font-size: 1.5625rem;
    padding: 10px;
    border: 3px solid var(--whiteText);
    border-radius: 1rem;
    cursor: pointer;
}

.tab ul li:hover {
    border: 3px solid var(--sprout);
    /* text-shadow: 4px 4px 5px var(--battleShipGray); */
}

.tabcontent {
    position: relative;
    height: 55%;
    width: 80%;
    padding-left: 1rem;
    margin-top: 1rem;
}

.tabcontent h2 {
    font-size: 2rem;
    font-weight: 700;
    width: 10%;
}

.tabcontent p {
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    margin-top: 1rem;
    text-shadow: 3px 3px 7px var(--blackText);
}

/* Our Plans*/
#companiesService {
    background-color: var(--lobloly);
}

#companiesService img {
    margin: 3rem 1.5rem 0 1.5rem;
}

.wellnessPrograms {
    background-color: var(--lobloly);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.wellnessPrograms h2 {
    text-align: center;
    font-family: ZCOOL XiaoWei;
    margin: 5rem 0 3rem 0;
    color: var(--battleShipGray);
}

#weOffer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 85%;
    width: 100%;
    /* position: relative; */
}

#weOffer img {
    height: 25rem;
    width: 25rem;
    border-radius: 50%;
    /* border-bottom: 5px solid var(--grayNurse); */
    box-shadow: 0px 5px 5px var(--grayNurse);
    /* -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4)); */
}

#weOfferI,
#weOfferD {
    /* width: 250px; */
    height: 85%;
}

#weOfferD .rectOffer {
    justify-content: flex-end;
}

#weOfferD .rectOffer i,
#weOfferI .rectOffer i {
    color: var(--grayNurse);
}

#weOfferD .rectOffer span {
    text-align: right;
}

#weOfferI .rectOffer:nth-child(1) {
    /* transform: translate(130px); */
    transform: rotate(0deg) translate(200px) rotate(0deg);
}

#weOfferI .rectOffer:nth-child(2) {
    transform: rotate(60deg) translate(100px) rotate(-60deg);
}

#weOfferI .rectOffer:nth-child(3) {
    transform: rotate(90deg) translate(200px) rotate(-90deg);
}

#weOfferD .rectOffer:nth-child(1) {
    transform: rotate(0deg) translate(-200px) rotate(0deg);
}

#weOfferD .rectOffer:nth-child(2) {
    transform: rotate(-60deg) translate(-100px) rotate(60deg);

}

#weOfferD .rectOffer:nth-child(3) {
    transform: rotate(270deg) translate(-200px) rotate(-270deg);

}

/*PricetTargets*/
#personalPlans {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* position: relative; */
}

#personalPlans h2 {
    text-align: center;
    font-family: ZCOOL XiaoWei;
    margin: 2rem;
    color: var(--battleShipGray);
    /* text-shadow: 1px 1px 3px var(--blackText); */
}

.targetContainer {
    display: flex;
    justify-content: space-around;
    height: 70%;
}

.target {
    /* width: 30%;*/
    /* height: fit-content; */
    width: 24.63956rem;
    /* height: 29.8125rem; */
    margin: 0 1.67rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* border-radius: 50% 50% 0% 0%; */
    border-radius: 15rem 15rem 0 0;
    border: 2px solid var(--lobloly);
}

.target h3,
.target p {
    color: var(--blackText);
    margin: 1rem;
    text-align: justify;
}

.target h3 {
    font-family: ZCOOL XiaoWei;
    font-size: 1.5rem;
    text-align: center;
    padding: 1rem 0;
    border-bottom: 3px solid var(--battleShipGray);
    border-top: 3px solid var(--battleShipGray);
}

.target .doubleButton {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.target button,
.layout button {
    /* background-color: var(--gumbo); */
    background-color: transparent;
    border: 2px solid var(--gumbo);
    box-shadow: 0px 4px 8px 0px #c0d1a9;
    padding: 8px 16px;
    color: var(--blackText);
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    border-radius: 15px;
    margin-bottom: 1rem;
}

.target .containerTarget {
    position: relative;
    text-align: center;
    margin: 1rem;
}

.target .containerTarget img {
    /* width: 20%; */
    height: 9rem;
}

.target .containerTarget i {
    display: none;
    color: #7d9fa643;
    font-size: 3rem;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*--|Ayurbeda|--*/
.infoPlans {
    /* background: var(--sprout); */
    display: flex;
    justify-content: center;
    align-items: center;
}

.infoPlans img {
    height: 80%;
    margin: 0 1.5rem;
}

.informativeService {
    width: 50%;
    margin: 0 1.5rem;
}

.informativeService h2 {
    /* font-size: 4rem; */
    font-family: ZCOOL XiaoWei;
    color: var(--battleShipGray);
}

.informativeService p {
    margin: 1rem 0;
    text-align: justify;
    color: var(--blackText);
}

.informativeService .informativeContainer {
    display: flex;
}

.informativeService .rectOffer{
    margin: 1rem;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--battleShipGray);
    padding: 20px;
    width: 40%;
    border-radius: 1rem;
    text-align: center;
    animation: showModal 0.4s ease-out;
}

@keyframes showModal {
    from {
        opacity: 0;
        transform: scale(0.5);
        /* Tamaño inicial más pequeño */
    }

    to {
        opacity: 1;
        transform: scale(1);
        /* Tamaño final completo */
    }
}

.modal-content i,
.modal-content h3,
.modal-content p {
    margin: .7rem 0;
}

.modal-content i {
    font-size: 2rem;
}

.modal-content p {
    text-align: justify;
}

.close {
    float: right;
    cursor: pointer;
}


/*Meet Coach*/
.meetCoach {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: var(--gumbo);
}

.meetCoach .left,
.meetCoach .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 34.125rem;
    margin: 0 2.5rem;
}

.meetCoach .right img {
    width: 35.5rem;
    height: 34.125rem;
    border-radius: 15.46875rem 0rem;
    border: 3px solid var(--grayNurse);
    background: linear-gradient(0deg, rgba(192, 209, 169, 0.30) 0%, rgba(192, 209, 169, 0.30) 100%);
}

.meetCoach .left p,
.meetCoach .left img {
    margin: 2rem 0;
}

.meetCoach .left h2 {
    font-family: ZCOOL XiaoWei;
    color: var(--grayNurse);
}

.meetCoach .left p {
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 400;
    color: var(--blackText);
}

.meetCoach .left img {
    width: 60%;
}

/*--| Blog |--*/
#mainBlog {
    justify-content: center;
    /* background-color: var(--lobloly); */
    /* background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%), url(/img/background/piedras-playa-atardecer-fondo.webp); */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 0%, rgba(245, 245, 245, 0.00) 100%), url(/img/background/balance-110850_1920.webp);
    background-size: cover;
    background-position: center;
}

.layout {
    background: none;
    width: 80%;
    height: 80%;
    margin-top: 4rem;
    display: grid;
    grid:
        "relevantPost relevantPost relevantPost relevantPost secondPost secondPost thirdPost thirdPost" 1fr "relevantPost relevantPost relevantPost relevantPost secondPost secondPost thirdPost thirdPost" 1fr "fourthPost fourthPost fifthPost fifthPost secondPost secondPost thirdPost thirdPost" 1fr "fourthPost fourthPost fifthPost fifthPost sixthPost sixthPost sixthPost sixthPost" 1fr "fourthPost fourthPost fifthPost fifthPost sixthPost sixthPost sixthPost sixthPost" 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1.5rem;
}

.layout div {
    width: 100%;
    height: 100%;
    position: relative;
    /* border: 2px solid black; */
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 1rem;
    border-radius: 1rem;
}

.layout div::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 0;
    border-radius: 1rem;
}

.layout p,
.layout h2,
.layout button {
    position: relative;
    color: var(--grayNurse);
}

.layout .keywords {
    font-size: .7rem;
}

.layout h2{
    font-size: 1.5rem;
}

.layout p{
    display: -webkit-box;
    -webkit-line-clamp: 4; /* Número de líneas que deseas mostrar */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.layout button {
    /* position: absolute; */
    /* bottom: 1rem; */
    /* border: 2px solid var(--grayNurse); */
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.2);
    margin: 1.3rem 0 auto 0;
}

.relevantPost {
    grid-area: relevantPost;
}

.secondPost {
    grid-area: secondPost;
}

.thirdPost {
    grid-area: thirdPost;
}

.fourthPost {
    grid-area: fourthPost;
}

.fifthPost {
    grid-area: fifthPost;
}

.sixthPost {
    grid-area: sixthPost;
}

/*--| Podcast |--*/

#mainPodcast img {
    height: 100%;
}

.descriptionPodcast span {
    font-size: 3.2rem;
    color: var(--gumbo);
}

.descriptionPodcast p {
    margin: 1rem auto;
    font-size: 1.2rem;
    color: var(--blackText);
    text-align: justify;
}

.descriptionPodcast .podcast {
    font-size: 2rem;
    width: 30%;
    display: flex;
    justify-content: space-between;
}

/* --| Test |-- */
#test {
    justify-content: center;
    background-color: var(--gumbo);
}

/* General mediaqueries */
@media (max-width:1440px){
    #mainPodcast img {
        height: 70%;
    }
}
@media (max-width:1280px){
    .target{
        width: auto;
    }
}
@media (max-width: 960px) {

    /* --| Navbar |-- */
    .changeColorLogo {
        filter: invert(100%);
    }

    #sandwichMenu {
        display: block;
    }

    .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: var(--gumbo);
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        flex-direction: column;
        align-items: start;
    }

    .sidenav #closeBtn {
        display: block;
        position: absolute;
        top: 20px;
        right: 25px;
    }

    .seeSidenav {
        width: 250px;
    }

    #firstPart .dropdown-content {
        position: static;
        width: 250px;
    }

    /* --| Footer |-- */
    footer {
        flex-direction: column-reverse;
    }

    footer .formImg {
        width: 100%;
        height: auto;
        padding-top: 1.5rem;
        flex-direction: column-reverse;
        justify-content: space-around;
    }

    footer .formImg ol {
        display: flex;
        flex-direction: row;
    }

    .formImg li a {
        text-indent: 0em;
        font-size: 1.2rem;
    }

    .footerSocial i {
        font-size: 1.7rem;
    }

    form {
        width: 80%;
        height: 70vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* --| Sections |-- */
    #main {
        /* background-position: 85% 50%; */
        height: auto;
        padding-top: 100px;
        flex-direction: column;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 0%, rgba(245, 245, 245, 0.00) 100%), url(/img/background/balance-110850_1920_16_9.webp);
        background-size: cover;
        background-position: center;
    }
    #main::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(56, 56, 56, 0.14);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        z-index: 0;
    }
    .mainSocial{
        position: static;
        z-index: 1;
        margin: 2rem;
    }

    .tab {
        padding-top: 5.5rem;
    }

    .tab::before {
        background: rgba(5, 5, 5, 0.05);
    }
    .tab p {
        text-align: justify;
    }

    .tab ul {
        width: 80%;
    }

    .tab ul li {
        margin: 0.5rem 0;
    }

    .infoPlans {
        flex-direction: column;
        height: auto;
    }
    .infoPlans img {
        margin: 3rem;
    }

    /* #ayurvedaService .informativeService .rectOffer{
        width: 100%;
    } */

    .informativeService {
        width: 80%;
        margin: 3rem 1.5rem;
    }

    .informativeService .rectOffer {
        margin: 1rem 0;
    }

    .informativeService h2{
        text-align: center;
    }

    .informativeService .informativeContainer {
        flex-direction: column;
    }

    .modal-content {
        width: 80%;
    }

    #companiesService {
        flex-direction: column-reverse;
    }

    .wellnessPrograms {
        height: auto;
    }

    #weOffer {
        flex-direction: column;
    }

    #weOffer img {
        order: 1;
        margin: 2rem auto;
    }

    #weOffer #weOfferI,
    #weOffer #weOfferD {
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #weOffer #weOfferI {
        order: 2;
    }

    #weOffer #weOfferD {
        order: 3;
        margin-bottom: 2rem;
    }

    .rectOffer {
        width: 100%;
        margin-top: 1.5rem;
    }

    #weOfferD .rectOffer {
        justify-content: flex-end;
        flex-direction: row-reverse;
    }

    #weOfferI .rectOffer:nth-child(1),
    #weOfferI .rectOffer:nth-child(2),
    #weOfferI .rectOffer:nth-child(3),
    #weOfferD .rectOffer:nth-child(1),
    #weOfferD .rectOffer:nth-child(2),
    #weOfferD .rectOffer:nth-child(3) {
        transform: rotate(0deg) translate(0px);
    }

    #weOfferD .rectOffer span {
        text-align: left;
    }

    #personalPlans {
        height: auto;
    }

    #personalPlans h2 {
        margin: 4rem 1rem 2rem 1rem;
        text-align: center;
    }

    .targetContainer {
        height: 100%;
        flex-direction: column;
    }

    .target {
        margin: 1.67rem auto;
        width: 24.63956rem;
    }

    .meetCoach {
        flex-direction: column;
        height: fit-content;
    }

    .meetCoach .left {
        width: 80%;
        height: auto;
        margin: 4rem auto 0 auto;
    }

    .meetCoach .left h2 {
        margin-bottom: 1.5rem;
    }

    .meetCoach .left p,
    .meetCoach .left iframe,
    .meetCoach .left img {
        margin: 1.5rem 0;
    }

    .meetCoach .left img{
        width: 80%;
    }

    .meetCoach .right {
        width: 80%;
        height: auto;
        margin: 3rem;
    }

    /*--| Blog |--*/
    .layout {
        display: grid;
        grid:
            "relevantPost relevantPost relevantPost secondPost secondPost secondPost" 1fr "relevantPost relevantPost relevantPost thirdPost thirdPost thirdPost" 1fr "fourthPost fourthPost fourthPost sixthPost sixthPost sixthPost" 1fr "fifthPost fifthPost fifthPost sixthPost sixthPost sixthPost" 1fr / 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 8px;
    }

    .layout h2 {
        font-size: 1.2rem;
    }

    .layout p{
        -webkit-line-clamp: 3; /* Número de líneas que deseas mostrar */
    }

    /*--|Podcast|--*/
    #mainPodcast,
    #mainDescription {
        flex-direction: column;
        height: auto;
    }

    #mainPodcast .descriptionPodcast,
    #mainDescription .descriptionVedic {
        margin: 8rem 1rem 0rem 1rem;
        width: 80%;
    }
}

@media (orientation: portrait) and (max-width: 960px){
    #main {
        height: 100vh;
        padding-top: 0px;
        justify-content:space-around;
    }
    .mainSocial {
        position: absolute;
        /* z-index: 1; */
        margin: 2rem;
    }
    footer .formImg {
        height: 30vh;
    }

    .target{
        padding: 1.5rem 0;
    }
}

@media (max-width: 480px) {
    nav {
        padding-top: 1.5rem;
    }

    .navBlur2 {
        background-color: var(--grayNurse);
        transition: .4s;
        padding-bottom: 12px;
    }

    nav .logo {
        height: 2em;
        left: 1.8rem;
    }

    nav .navText {
        right: 1.8rem;
    }

    .navText::before {
        width: 0;
    }

    .navText a,
    .navText button,
    .navText p {
        font-size: 1.3rem;
        padding: 10px 12px;
        -webkit-transition: .4s;
        transition: 0.4s;
    }

    .navText .containerdropbtn {
        display: flex;
        align-items: baseline;
        padding: 0px 12px;
    }

    .navText .containerdropbtn button {
        font-size: 1.3rem;
    }

    .sidenav2 {
        display: flex;
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        right: 0;
        background-color: var(--gumbo);
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
        flex-direction: column;
        align-items: start;
    }

    #firstPart {
        all: unset;
        display: flex;
        flex-direction: column;
        align-items: baseline;
    }

    .seeSidenav {
        width: 180px;
    }

    #secondPart .dropdown-content{
        position: static;
    }

    .dropdown-content {
        width: 180px;
    }

    /*--| Sections |--*/
    #main {
        padding-top: 0;
        background-position: 65%;
        height: auto;
        flex-direction: column;
    }

    .mainText {
        line-height: 2.5em;
        margin: 5rem 2.31rem 2rem 2.31rem;
        /* height: 60%; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .mainText h1 {
        font-size: 1.8rem;
    }

    .mainText p {
        font-size: 1.3rem;
    }

    .mainText ul {
        margin: 2rem auto;
    }

    .mainText button {
        font-size: 1.3rem;
    }

    .mainSocial {
        position: static;
        z-index: 1;
        margin: 2rem;
    }
    /* --| Footer |-- */
    footer .formImg {
        height: auto;
    }

    footer .formImg ol {
        flex-direction: column;
    }

    .formImg .footerSocial {
        margin-top: 1.5rem;
        text-align: center;
    }

    .footerSocial i {
        margin: .7rem;
    }

    form {
        height: 90vh;
    }

    /*--|Service|--*/

    #mainService {
        height: auto;
    }

    /* .tab p {
        display: none;
    } */

    .tab ul {
        margin: 1.5rem auto 0 auto;
        flex-direction: column;
    }

    .yogaTypeDesc{
        margin: 1.5rem 0;
    }

    #weOffer img {
        height: 20rem;
        width: 20rem;
    }

    .rectOffer span {
        font-size: 1.2rem;
    }

    .target {
        width: 80%;
        border-radius: 2rem;
    }

    .target .containerTarget {
        margin: 0.2rem;
    }

    .target .containerTarget img {
        height: 6rem;
    }

    .meetCoach .left h2 {
        text-align: center;
    }

    .meetCoach .left p {
        text-align: justify;
    }

    .meetCoach .right {
        height: auto;
        margin: 2rem;
    }

    .meetCoach .right img {
        /* transform: scale(.6); */
        width: 21.3rem;
        height: 20.475rem;
        border-radius: 9.28125rem 0;
    }

    /*--| Blog |--*/
    #mainBlog {
        height: auto;
    }

    .layout {
        height: fit-content;
        margin: 4.5rem 0;
        display: grid;
        grid:
            "relevantPost" 1fr "secondPost" 1fr "thirdPost" 1fr "fourthPost" 1fr "fifthPost" 1fr "sixthPost" 1fr / 1fr;
        gap: 8px;
    }

    .layout p,
    .layout button {
        margin: 0.5rem 0;
    }

    .layout button {
        position: relative;
        bottom: 0px;
    }

    .descriptionPodcast h2,
    .descriptionVedic h2 {
        font-size: 3rem;
    }

    .descriptionPodcast span {
        font-size: 2.2rem;
    }

    .descriptionPodcast .podcast {
        width: 100%;
    }
}

@media (max-width: 380px) {
    h2 {
        font-size: 2.2rem;
    }

    /*--|Sections|--*/

    .mainText {
        line-height: 2.5em;
        /* margin: 0 2.31rem; */
    }

    .mainText h1 {
        font-size: 1.5rem;
    }

    .mainText ul li {
        margin-left: 1.2rem;
        font-size: 1rem;
    }

    .mainText p {
        font-size: 1rem;
    }

    .mainText button {
        font-size: 1rem;
        padding: 6px 10px;
    }

    .mainSocial {
        position: inherit;
        margin: 1rem;
    }

    /*--|Footer|--*/
    .footerSocial i {
        font-size: 1.3rem;
    }

    .tab {
        height: 55%;
    }

    .tabcontent {
        height: auto;
        width: 90%
    }

    #weOffer img {
        height: 16rem;
        width: 16rem;
    }

    .meetCoach .right img {
        width: 17.75rem;
        height: 17.0625rem;
        border-radius: 7.7343rem 0;
    }

}