.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } @media (max-width: 767px) { #featureContainer .carousel-inner .carousel-item > div { display: none; } #featureContainer .carousel-inner .carousel-item > div:first-child { display: block; } } #featureContainer .carousel-inner .carousel-item.active, #featureContainer .carousel-inner .carousel-item-next, #featureContainer .carousel-inner .carousel-item-prev { display: flex; } @media (min-width: 768px) { #featureContainer .carousel-inner .carousel-item-end.active, #featureContainer .carousel-inner .carousel-item-next { transform: translateX(25%); } #featureContainer .carousel-inner .carousel-item-start.active, #featureContainer .carousel-inner .carousel-item-prev { transform: translateX(-25%); } #featureContainer .card img { width: 90%; height: 40vh; } #featureContainer .carousel-item { justify-content: space-between; } } @media (max-width: 767px) { #featureContainer .card img { width: 100%; height: 75vh; } } #featureContainer .carousel-inner .carousel-item-end, #featureContainer .carousel-inner .carousel-item-start { transform: translateX(0); } #featureContainer .card { border: 0; } #featureContainer .card { position: relative; } #featureContainer .card .card-img-overlays { position: absolute; bottom: 15%; left: 10%; } #featureContainer a { text-decoration: none; } #featureContainer .indicator { border: 1px solid rgb(202, 202, 202); padding: 3px 6px 3px 6px; } #featureContainer .indicator:hover { background-color: blue; border: 1px solid blue; transition: 200ms; } #featureContainer .indicator:hover { color: white; transition: 200ms; } #featureContainer .indicator { color: lightgray; } #featureContainer .float-end { padding-top: 10px; } /* Reseting */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .wrapper { max-width: 800px; min-height: 500px; margin: 10px auto; padding: 30px 30px 30px 30px; /*background-color: #ecf0f3;*/ border-radius: 15px; /*box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;*/ } .wrapper .name { font-weight: 600; font-size: 1.4rem; letter-spacing: 1.3px; padding-left: 10px; /*color: #555*/; } .wrapper .form-field input { width: 100%; display: block; border: none; outline: none; background: none; font-size: 1.2rem; color: #666; padding: 10px 15px 10px 10px; /* border: 1px solid red; */ } .wrapper .form-field { padding-left: 10px; margin-bottom: 20px; border-bottom: 1px solid; /*border-radius: 20px;*/ //*ox-shadow: inset 3px 3px 3px #cbced1, inset -3px -3px 3px #fff;*/ } .wrapper .form-field .fas { color: #555; } .wrapper .btn { box-shadow: none; width: 100%; height: 40px; /*background-color: #03A9F4;*/ color: #fff; border-radius: 15px; /*box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;*/ letter-spacing: 1.3px; } .wrapper .btn:hover { background-color: #039BE5; } .wrapper a { text-decoration: none; font-size: 0.8rem; color: #03A9F4; } .wrapper a:hover { color: #039BE5; } @media(max-width: 380px) { .wrapper { margin: 30px 20px; padding: 40px 15px 15px 15px; } }