@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

@media only screen and (max-width : 768px) {
    .heading {
        background-color: #0f204b;
    }
}

.non-products {
    min-height: 100vh;
}

.main-logo {
    max-height: 35px;
}

.sdl-logo img {
    position: absolute; 
    right: 50px;
    bottom: 50px;
}

body {
    background-color: #f1f1f1;
}

.nav-back {
    
    background: rgb(0, 26, 75);
    background: -moz-linear-gradient(35deg, rgba(0, 26, 75, 1) 0%, rgba(0, 102, 164, 1) 60%, rgba(0, 169, 220, 1) 100%);
    background: -webkit-linear-gradient(35deg, rgba(0, 26, 75, 1) 0%, rgba(0, 102, 164, 1) 60%, rgba(0, 169, 220, 1) 100%);
    background: linear-gradient(35deg, rgba(0, 26, 75, 1) 0%, rgba(0, 102, 164, 1) 60%, rgba(0, 169, 220, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#001a4b", endColorstr="#00a9dc", GradientType=1);
    padding: 15px;
  
}
.navbar-nav  { 
    display: flex;
    
}
.navbar-dark .navbar-nav .nav-link {
    color: rgb(255, 255, 255);
}

.navbar-brand > img { 
    height: 100px;
}

#item-1 .gallery-cell {
    position: relative;
    z-index: 3;
    background-image: url("../img/mainpage_9300.png");
    background-size: auto 65%;
    background-position: right;
    background-repeat: no-repeat;
    min-height: 100vh;
}

#item-2 .gallery-cell {
    position: relative;
    z-index: 3;
    background-image: url("../img/mainpage_603.png");
    background-size: auto 70%;
    background-position: left;
    background-repeat: no-repeat;
    min-height: 100vh;
}

#item-3 .gallery-cell {
    background-image: url("../img/mainpage_alpha.png");
    background-size: auto 70%;
    background-position: right;
    background-repeat: no-repeat;
    min-height: 100vh;
}
#item-1 h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #fff;
}

#item-1 span,
#item-1 h2 {
    font-family: 'Roboto', sans-serif;
    color: #fff;
}

#item-2 h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #1e9d8a;
}

#item-2 span,
#item-2 h2 {
    font-family: 'Roboto', sans-serif;
    color: #1e9d8a;
}

#item-2 button {
    background-color: #1e9d8a;
    border-color: #1e9d8a;
}

#item-2 button:hover {
    background-color: #fff;
    border-color: #1e9d8a;
}

#item-3 h1 {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #0066a1;
}

#item-3 span,
#item-3 h2 {
    font-family: 'Roboto', sans-serif;
    color: #0066a1;
}

#item-3 button {
    background-color: #0066a1;
    border-color: #0066a1;
}

#item-3 button:hover {
    background-color: #fff;
    border-color: #0066a1;
}

@media (max-width:768px) {
    #item-3 .gallery-cell,
    #item-2 .gallery-cell,
    #item-1 .gallery-cell  { 
        background-size: auto 55%;
    }

    #item-3 h1 {
        color: #42baff;
    }
    
    #item-3 span,
    #item-3 h2 {
        color: #42baff;
    }
    
    #item-3 button {
        background-color: #42baff;
        border-color: #42baff;
    }
    
    #item-3 button:hover {
        border-color: #42baff;
    }
}



#item-1 {
    position: relative;
    background: transparent;
    min-height: 95vh;
}

#item-2 {
    position: relative;
    background: transparent;
    min-height: 95vh;
    margin-top: -50px;
}

#item-1::after {
    background: #0066a1;
    content: "";
    position: absolute;
    z-index: 2;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100vh;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 0 100%);
}

#item-2::after {
    background: #ffffff;
    content: "";
    position: absolute;
    z-index: 0;
    top: -50px;
    left: 0;
    width: 100%;
    height: 100vh;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 50px));
}


footer {
    min-height: 300px;
    background-color: #0f204b;
}

.btn-light {
    background-color: #003478;
    border-color: #003478;
    color: #fff;
}


.section>div {
    opacity: 0;
    transition: opacity .35s ease-in;
}

.fade-in>div {
    opacity: 1;
}

footer img {
    max-width: 120px;
}

footer h5 {
    font-family: 'Roboto', sans-serif;

    color: #fff;
}

h1.compare,
.faq h1 {
    font-family: 'Roboto', sans-serif;
    color: #003478;
}

.faq h5 {
    font-family: 'Roboto', sans-serif;
    color: #333;
    margin: 3rem 0 1rem 0;
}

.faq p {
    text-align: justify;
    color: #666;
    padding-left: 1rem;
}


textarea {
    resize: none;
}

.footerf { 
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    height: 100%;
  }
.pie { 
    border-top: 1px solid rgba(255, 255, 255, 0.192);
  } 

  @media (max-width: 768px) {
    .texto-inicio {
        margin-top: -390px;
    }
	    .texto-inicio2 {
        margin-top: -390px;
		margin-left: 190px;
    }
    #item-1 .gallery-cell { 
        background-position: 100% 70%;
    }
    #item-2 .gallery-cell { 
        background-position: 5% 70%;
    }
    #item-3 .gallery-cell { 
        background-position: 100% 70%;
    }
  }