:root {
    --open: "Open Sans", sans-serif;
    --h1: 2vw;
    --h2: 1.6vw;
    --body: 1.2vw;
    --body2: 0.8vw;
    --body3: 1vw;
    --h1B: 3vw;
    --h2B: 2.6vw;
    --bodyB: 2.2vw;
    --body2B: 1.2vw;
    --body3B: 1.4vw;
    --h1C: 4.8vw;
    --h2C: 4vw;
    --bodyC: 3.2vw;
    --body2C: 3.2vw;
    --body3C: 3.2vw;
    --btn-icon-size: 2.4vw;
    --btn-icon-sizeB: 3.4vw;
    --btn-icon-sizeC: 6vw;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body  {
    overflow-x: hidden;
    background-image: url('../src/cnc.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
}

.box {
    width: 100vw;
    min-height: min-content;
    background-color: #ff640050;
}

nav {
    min-height: 24vh;
    background-color: rgba(0,0,0,0.1);
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-nav {
    padding-left: 2vw;
    width: 16vw;
    height: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.center-nav {
    height: 100%;
    width: 60vw;
    display: flex;
    justify-content: left;
    align-items: center;
}

.right-nav {
    height: 100%;
    width: 24vw;
    display: flex;
    align-items: center;
    justify-content: left;
}

.logo {
    width: 6vw;
    padding: 1vw;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 48px 100px 0px;
    border-radius: 50%;
}

.btn {
    margin-left: 2vh;
    color: white;
    font-family: var(--open);
    font-weight: bold;
    font-size: var(--body);
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    transition: all ease-out 0.1s;
    padding: 1vh;
}

.btn-icon {
    color: white;
    width: 2.4vw;
    margin-right: 2vh;
}

.btn:hover {
    border-bottom: solid #d82c01 0.2vh;
    color: #d82c01;
    cursor: pointer;
    
    svg {
        color: #d82c01;
    }
    
}

.btn2 {
    margin-left: 2vh;
    color: white;
    font-family: var(--open);
    font-weight: bold;
    font-size: var(--body);
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all ease-out 0.1s;
    padding: 1vh;
}

.btn-icon2 {
    color: white;
    width: 2.4vw;
}

.btn2:hover {
    border-bottom: solid #d82c01 0.2vh;
    cursor: pointer;
    color: #d82c01;
    
    svg {
        color: #d82c01;
    }
    
}

.double-box {
    width: 100%;
    display: flex;
}

.left {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    background-color: rgba(0,0,0,0.5);
    width: 50%;
    padding: 2vw;
}

.left2 {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    background-color: rgba(0,0,0,0.5);
    width: 50%;
    padding: 2vw;
}

.right {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    background-color: rgba(0,0,0,0.5);
    width: 50%;
    padding: 2vw;
}

.right h2{
    width: 80%;
    color: white;
    font-size: var(--h2);
    font-family: var(--open);
}

.right p{
    width: 80%;
    color: white;
    font-size: var(--body2);
    font-family: var(--open);
}

.left2 p{
    width: 80%;
    color: white;
    font-size: var(--body3);
    font-family: var(--open);
}

.common-image {
    width: 32vw;
}

.check {
    margin-bottom: 2vh;
    min-width: 32%;
    max-width: 60%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.check svg {
    width: 2.4vw;
    color: #d82c01;
}

.check p {
    font-family: var(--open);
    font-size: var(--body);
    font-weight: bold;
    color: white;
    margin-left: 1.6vw;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    min-height: 40vh;
}

.card {
    margin: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.card-img {
    width: 40%;
    margin-bottom: 0.8vh;
    color: white;
}

.card h2{
    color: white;
    font-size: var(--h2);
    font-family: var(--open);
    margin-bottom: 0.8vh;
}

.card h5{
    color: white;
    font-size: var(--body);
    font-family: var(--open);
    text-align: start;
    width: 80%;
    margin-bottom: 0.8vh;
}

.card p{
    color: white;
    font-size: var(--body2);
    font-family: var(--open);
    text-align: start;
    width: 80%;
    margin-bottom: 0.8vh;
}

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

.una img {
    width: 100%;
}

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

.dos img {
    width: 50%;
}

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

.tres img {
    width: 33.3%;
    aspect-ratio: 4/3;
}

footer {
    width: 100%;
    min-height: 32vh;
    background-color: rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

footer img {
    width: 24vh;
}

footer p {
    color: white;
    font-family: var(--open);
}

h1 {
    color: white;
    font-family: var(--open);
    width: 100%;
    text-align: center;
    font-size: var(--h1);
}

.end-box {
    min-height: 24vh;
    display: flex;
    align-items: end;
    justify-content: end;
    width: 100%;
    position: relative;
}

.end-box .btn {
    position: absolute;
    bottom: 2vh;
    right: 8vw;
}

.separator {
    width: 100%;
    height: 0.2vh;
    background-color: rgba(0,0,0,0.6);
}

.common-image2 {
    width: 32vw;
    background-image: radial-gradient(circle, rgba(0,0,0,0), rgba(0,0,0,0), rgba(0,0,0,0.3));
}

.cuatrocuatro {
    width: 100%;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cuatrocuatro img {
    width: 62%;
}

form {
    width: 100%;
    padding: 2vw;
    position: relative;
}

.form-box {
    width: 100%;
}

input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.input-container{
	position:relative;
	margin-bottom:25px;
}

.input-container label{
	position:absolute;
	top:0px;
	left:0px;
	font-size:16px;
	color:#fff;	
        pointer-event:none;
	transition: all 0.1s ease-in-out;
}

.input-container input{ 
  border:0;
  border-bottom:1px solid #fff;  
  background:transparent;
  width: 80%;
  padding:8px 0 5px 0;
  font-size:16px;
  color:#fff;
}

.input-container input:focus{ 
 border:none;	
 outline:none;
 border-bottom:1px solid  #d82c01;	
}

.input-container input:focus ~ label,
.input-container input:valid ~ label{
	top:-12px;
	font-size:12px;
	
}

.input-container textarea{ 
  border:0;
  border-bottom:1px solid #fff;  
  background:transparent;
  width: 80%;
  min-height: 32vh;
  padding:8px 0 5px 0;
  font-size:16px;
  color:#fff;
}

.input-container textarea:focus{ 
 border:none;	
 outline:none;
 border-bottom:1px solid  #d82c01;	
}

.input-container textarea:focus ~ label,
.input-container textarea:valid ~ label{
	top:-12px;
	font-size:12px;
	
}

.absolute {
    position: absolute;
    bottom: 2vh;
    right: 21%;
}

iframe {
    box-shadow: rgba(0, 0, 0, 0.6) 0px 48px 100px 0px;
    border: none;
    border-radius: 8px;
    width: 80%;
    min-height: 50vh;
}

@media all and (max-width: 1024px){
 
    body  {
        background-image: url('../src/cnc.png');
        background-repeat: repeat;
        background-size: auto;
    }
    
    nav {
        flex-direction: column;
        justify-content: center;
        min-height: 48vh;
    }
    
    .logo {
        width: 24vh;
    }
    
    .left-nav {
        padding: 0;
        justify-content: center;
        align-items: center;
    }
    
    .center-nav {
        padding: 0;
        justify-content: center;
        align-items: center;
        margin: 2vh;
    }
    
    .right-nav {
        padding: 0;
        justify-content: center;
        align-items: center;
        margin: 2vh;
    }
    
    .btn {
        font-size: var(--bodyB);
    }
    
    .btn2 {
        font-size: var(--bodyB);
    }
    
    .btn-icon {
        width: var(--btn-icon-sizeB);
    }
    
    .btn-icon2 {
        width: var(--btn-icon-sizeB);
    }
    
    .double-box {
        flex-direction: column;
    }
    
    .left {
        padding: 0vw;
        width: 100%;
    }
    
    .left2 {
        padding: 4vw;
        width: 100%;
    }
    
    .check {
        margin-left: 2vw;
    }
    
    .right {
        width: 100%;
    }
    
    .check svg {
        width: var(--btn-icon-sizeB);
    }

    .check p {
        font-size: var(--bodyB);
    }
    
    .common-image {
        width: 40vw;
    }
    
    .right h2 {
        font-size: var(--h2B);
    }
    
    .right p {
        font-size: var(--body2B);
    }
 
    .left2 p {
        font-size: var(--body3B);
    }
    
    .grid {
        grid-template-columns: repeat(2, 50%);
        grid-template-rows: repeat(2, auto);
    }
    
    .card h2{
        font-size: var(--h2B);
    }

    .card h5{
        font-size: var(--bodyB);
    }

    .card p{
        font-size: var(--body2B);
    }
    
    h1 {
        font-size: var(--h1B);
    }
    
    h1 {
        text-align: start;
        margin-left: 2vw;
    }
    
    .common-image2 {
        width: 80vw;
        margin-left: 2vw;
        margin-top: 2vh;
    }
    
    form {
        width: 100%;
    }
    
    iframe {
        width: 100%;
    }
    
}

@media all and (max-width:  768px) {
    
    .double-box {
        flex-direction: column;
    }
    
    .btn {
        font-size: var(--bodyC);
    }
    
    .btn2 {
        font-size: var(--bodyC);
    }
    
    .btn-icon {
        width: var(--btn-icon-sizeC);
        margin-right: 1vw;
    }
    
    .btn-icon2 {
        width: var(--btn-icon-sizeC);
        margin-right: 1vw;
    }
    
    .check svg {
        width: var(--btn-icon-sizeB);
    }

    .check p {
        font-size: var(--bodyB);
    }
    
    .common-image {
        width: 48vw;
    }
    
    .right h2 {
        font-size: var(--h2C);
    }
    
    .right p {
        font-size: var(--body2C);
    }
    
    .left2 p {
        font-size: var(--body3C);
    }
    
    .card h2{
        font-size: var(--h2C);
    }

    .card h5{
        font-size: var(--bodyC);
    }

    .card p{
        font-size: var(--body2C);
    }
    
    footer p {
        font-size: small;
    }
    
    h1 {
        font-size: var(--h1C);
    }
    
}