.home           {width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    .btn        {width: calc(50% - 5px); height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: .3s;
        &:hover .shadow         {background: rgba(0,0,0,0);}
        &:hover .nunawaqLog     {width: 240px; height: 240px; border: 9px solid #5E0D1C; }
        &:hover .gabLog         {width: 240px; height: 240px; border: 9px solid #01219C; }
        &:hover .img-int        {width: 120%; height: 120%;}
    }

    .shadow             {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.5); position: relative; z-index: 2; position: absolute; top: 0; left: 0; transition: .3s;}
    .nunawaqLog         {background: white; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; border-radius: 200px; overflow: hidden; padding: 22px; border: 5px solid white; transition: .3s;}
    .gabLog             {background: #FEF4EA; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; border-radius: 200px; overflow: hidden; padding: 70px 20px 20px 20px; border: 5px solid #FEF4EA; transition: .3s;}
    .line               {background: white; width: 10px; height: 100%;}
}

.slid1                  {width: 100%; height: 100%;}
.slidHome               {position: absolute;}

.bnAnim1                {animation: bnAnim1 7s infinite; opacity: 1; transition: .3s;}
@keyframes bnAnim1      {
    0%                  {opacity: 1;}
    45%                 {opacity: 1;}
    50%                 {opacity: 0;}
    95%                 {opacity: 0;}
    100%                {opacity: 1;}
}

.bnAnim2                {animation: bnAnim2 17s infinite; opacity: 0; transition: .3s;}
@keyframes bnAnim2      {
    0%                  {opacity: 0;}
    45%                 {opacity: 0;}
    50%                 {opacity: 1;}
    95%                 {opacity: 1;}
    100%                {opacity: 0;}
}

.qamyll                 {position: fixed; bottom: 20px; width: 90px; left: 0; right: 0; margin: auto; z-index: 3;}



.header                 {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 20px 20px 20px; position: fixed; z-index: 6;
    .hd1Logo            {width: 120px; height: 120px; background: white; display: flex; align-items: center; justify-content: center; border-radius: 200px; overflow: hidden; padding: 14px;}
    .hd1Img             {}
    .right              {display: flex;}
    .nav                {display: flex; gap: 18px; align-items: center;}
    .bt1                {gap: 20px; font-weight: 500; border: 1px solid var(--color-nunawaq); transition: .3s;
        &:hover         {background: white; color: var(--color-nunawaq);}
    }
    .bg1                {background: var(--color-nunawaq);}
    .icod22             {color: var(--color-nunawaq); font-size: 36px; cursor: pointer;}
}


.headerGab              {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 20px 20px 20px; position: fixed; z-index: 6;
    .hd1Logo            {width: 120px; height: 120px; background: var(--color-secundario); display: flex; align-items: center; justify-content: center; border-radius: 200px; overflow: hidden; padding: 32px 12px 12px 12px;}
    .hd1Img             {}
    .right              {display: flex;}
    .nav                {display: flex; gap: 18px; align-items: center;}
    .bt1                {gap: 20px; font-weight: 500; border: 1px solid var(--color-nunawaq); transition: .3s;
        &:hover         {background: white; color: var(--color-nunawaq);}
    }
    .bg1                {background: var(--color-nunawaq);}
    .icod22             {color: var(--color-nunawaq); font-size: 36px; cursor: pointer;}
}





.icocwdk                {font-size: 32px; background: var(--color-nunawaq); transition: .3s; z-index: 5; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: fixed; right: 30px; bottom: 30px; border-radius: 16px 16px 0px 16px; color: white;
    &:hover             {background: var(--color-aprobado); transform: scale(1.1);}
}

.rrss                   {position: fixed; left: 30px; bottom: 30px; display: flex; gap: 5px; z-index: 2;
    .icoddw             {font-size: 24px; background: black; color: white; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 13px 13px 13px 0px;}
}


.content                {display: flex; align-items: center; flex-wrap: wrap; width: 100%; height: 100vh; min-height: 690px;
    .left               {width: 50%; height: 100%; overflow: hidden; border-radius: 0px 50px 50px 0px; position: relative;}
    .mainHome           {width: 50%; height: 100vh; padding: 0px 0px 0px 30px; display: flex; align-items: center; position: relative; overflow: hidden;}
    .carousel           {margin: 50px 0px 20px 0px; overflow: auto;}
    .wrap               {display: flex; width: fit-content; padding: 0px 120px 30px 0px;}
    .vermas             {padding: 0px 30px 0px 0px; text-align: center; color: var(--color-nunawaq); font-weight: 500; cursor: pointer;
        &:hover         {text-decoration: underline;}
    }
}

.contact                {opacity: 0; visibility: hidden; transition: .3s 0s; width: 100%; height: 100vh; position: fixed; z-index: 10; background: rgba(0,0,0,0.6); top: 0; left: 0; display: flex; flex-direction: column; align-items: center;
    .icokff2            {color: white; font-size: 50px; margin: 20px 0px; cursor: pointer;}
    .wrap               {margin: -700px 0px 0px 0px; transition: .3s 0s; background: white; width: 90%; max-width: 380px; padding: 14px; border-radius: 24px; display: flex; flex-wrap: wrap; box-shadow: 0px 26px 40px -20px rgba(0,0,0,0.8); gap: 17px;}
    h1                  {font-size: 30px; font-weight: 700; text-align: center; margin: 15px 0px 10px 0px;}
    .vine               {display: flex; align-items: flex-start; font-weight: 500; color: var(--color-gray4); width: 100%;}
    .icoc22p            {font-size: 18px; margin: 0px -3px 0px 0px;}
    .txt                {display: flex; flex-direction: column; align-items: flex-start; gap: 2px;}
    .btns               {width: 100%; display: flex; flex-wrap: wrap; gap: 10px;}
    .bt1                {background: var(--color-nunawaq); font-weight: 500;}
    strong              {font-weight: 700;}
    .wrapOn                 {margin: 0px 0px 0px 0px; transition: .3s 0s;}
}
.contactOn              {opacity: 1; visibility: visible; transition: .3s 0s;}


h1                      {color: var(--color-nunawaq); font-weight: 600; font-size: 47px; width: 490px; margin: 0px 0px 60px 0px;}
.bld1                   {font-weight: 800;}

.item                   {width: 200px; cursor: pointer; margin: 0px 30px 0px 0px; height: 240px; overflow: hidden; border-radius: 20px; position: relative; display: flex; align-items: flex-end; transition: .3s;
    &:active            {transform: scale(.95);}
    &:hover 
    h2                  {background: white; color: var(--color-nunawaq);}
    &:hover 
    .itemImg            {transform: scale(1.1);}
    h2                  {position: relative; transition: .3s; background: var(--color-nunawaq); width: 100%; color: white; text-align: center; padding: 13px 20px 15px 20px; font-size: 20px; border-radius: 19px; font-weight: 500; border: 1px solid var(--color-nunawaq);}
    .itemImg            {position: absolute; transition: .3s;}
}

.main1                  {width: 100%; opacity: 1; transition: .3s .2s; transform: scale(1);}

.main2                  {position: absolute; top: 0; background: white; width: 100%; overflow: auto; height: 100vh; padding: 130px 0px 90px 0px; margin: 0px 0px 0px 100%; transition: .3s 0s;
    h1                  {color: var(--color-nunawaq); font-weight: 800; font-size: 60px; width: 90%; display: flex; align-items: flex-start; gap: 5px;}
    .icod22             {font-size: 50px; margin: 11px 0px 0px 0px; cursor: pointer;}
    .item               {width: 85%; gap: 10px; align-items: center; height: auto; margin: 15px 0px 0px 0px; background: var(--color-nunawaq); border: 1px solid var(--color-nunawaq);
        &:hover         {background: white; gap: 20px;}
    }
    .img-int            {width: 210px; height: 130px; position: relative; border-radius: 20px;}
    h2                  {text-align: left; padding: 0px; font-size: 26px; background: none; border: none;}
}
.main2In                {margin: 0px 0px 0px 0%; transition: .4s .2s}
.main1Out               {opacity: 0; transition: .3s 0s; transform: scale(.7);}








@media (width <= 1060px){

.content                {height: auto;
    .left               {width: 100%; height: 70vh; border-radius: 0px 0px 30px 30px;}
    .mainHome           {width: 100%; padding: 50px 30px 100px 30px;}
    .vermas             {padding: 0px 0px 0px 0px;}
    .wrap               {padding: 0px 10px 30px 0px;}
}

.main2                  {
    .item               {width: 100%;}
}
h1                      {width: 100%; text-align: center;}
.main2In                {position: fixed; left: 0; padding: 160px 40px 90px 40px;}
.leftInt                {animation: slider 9s infinite;}
.leftImg                {height: 70vh !important;}
@keyframes slider       {
    0%                  {margin: 0vh 0px 0px 0px;}
    30%                 {margin: 0vh 0px 0px 0px;}
    35%                 {margin: -70vh 0px 0px 0px;}
    65%                 {margin: -70vh 0px 0px 0px;}
    70%                 {margin: -140vh 0px 0px 0px;}
    98%                 {margin: -140vh 0px 0px 0px;}
    100%                {margin: 0vh 0px 0px 0px;}
}
.header                 {padding: 0px;
    .ico2d3t            {display: none;}
    .bt1                {font-size: 16px; padding: 10px 12px;}
    .hd1Logo            {margin: 20px;}
    .right              {background: rgba(255,255,255,0.8); padding: 20px; border-radius: 0px 0px 0px 30px;}
}

.headerGab              {padding: 0px;
    .ico2d3t            {display: none;}
    .bt1                {font-size: 16px; padding: 10px 12px;}
    .hd1Logo            {margin: 20px;}
    .right              {background: rgba(255,255,255,0.8); padding: 20px; border-radius: 0px 0px 0px 30px;}
}
}






 

@media (width <= 780px) {

.content                { 
    h1                  {font-size: 40px;}
}
.home                   {
    .btn                {width: 100%; height: calc(50% - 5px);}
    .line               {width: 100%; height: 10px;}
    .nunawaqLog         {width: 160px; height: 160px;}
    .gabLog             {width: 160px; height: 160px;}
}
.qamyll                 {bottom: initial; width: 70px; right: 20px; top: calc(50% - 35px); left: initial;}
.content                {
    .mainHome           {padding: 0px 30px 100px 30px;}
}

}




@media (width <= 420px) {

.header                 {
    .hd1Logo            {width: 100px; height: 100px; margin: 20px; padding: 10px;}
    .nav                {gap: 10px;}
    .bt1                {padding: 10px 9px;}
    .right              {padding: 10px; border-radius: 0px 0px 0px 25px;}
    .icod22             {font-size: 32px;}
}

.headerGab              {
    .hd1Logo            {width: 100px; height: 100px; margin: 20px; padding: 12px 8px 8px 8px;}
    .nav                {gap: 10px;}
    .bt1                {padding: 10px 9px;}
    .right              {padding: 10px; border-radius: 0px 0px 0px 25px;}
    .icod22             {font-size: 32px;}
}

}