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

html {
    scroll-behavior: smooth;
}

:root {
    --mainColor: rgb(6, 181, 178);
    --secondColor: #777;
}

/* Start Navbar*/

nav i {
    color: var(--mainColor);
}

nav ul li:hover {
    border-top: 2px solid var(--mainColor);
    color: var(--mainColor)
}

nav span {
    color: black;
}

/* End Navbar*/
/* Start carousel */
.carousel-indicators button {
    height: 15px !important;
    width: 15px !important;
    border-radius: 50%;
}

.carousel-indicators .active {
    background-color: var(--mainColor) !important;
}

/* End carousel */
/* Start Mobiles */
.mobiles p:first-of-type {
    font-size: 12px !important;
}

.mobiles .container div:nth-child(1) {
    background-color: rgb(60, 150, 149) !important;
    width: 432px !important;
}

.mobiles .container div:nth-child(2) {
    background-color: rgb(32, 165, 163) !important;
    width: 432px !important;
}

.mobiles .container div:last-of-type {
    background-color: var(--mainColor) !important;
    width: 432px !important;
}

.mobiles .container i {
    padding: 10px 15px !important;
    background-color: rgba(250, 248, 248, 0.311) !important;
    border-radius: 50px !important;
    -webkit-border-radius: 50px !important;
    -moz-border-radius: 50px !important;
    -ms-border-radius: 50px !important;
    -o-border-radius: 50px !important;
}

.mobiles .container p:first-of-type {
    margin-top: 10px;
}

/* End Mobiles */
/* Start Plan */
.plan {
    padding-top: 80px;
    padding-bottom: 80px;
}

.plan h1 span {
    color: var(--mainColor);
}

.plan p {
    color: var(--secondColor) !important;
}

.plan .card {
    width: 290px;
}

.plan .card .number {
    position: relative;
    height: 150px;
    font-size: 90px !important;
    font-weight: 900 !important;
    padding-right: 10px;
    box-shadow: inset 0 50px 20px rgba(255, 255, 255, 0.767);
}

.plan .card .number span {
    font-size: 30px;
    position: absolute;
    color: var(--secondColor);
    top: 20%;
    left: 60%;

}

.plan .card .number::after {
    content: "$";
    position: absolute;
    font-size: 30px;
    color: var(--secondColor);
    left: 32%;
    top: 25%;
}

.plan .card .number::before {
    content: "/month";
    position: absolute;
    font-size: 20px;
    color: var(--secondColor);
    left: 60%;
    top: 53%;
}

.cards .card .card-header,
.card-footer {
    background-color: var(--mainColor) !important;
}

.cards .card {
    box-shadow: 1px 1px 10px rgba(135, 135, 135, 0.2);
}

.cards .card h5 {
    color: var(--secondColor);
}

.cards .card h5 span {
    color: black;
    font-weight: bold;
    margin-right: 8px;
}

.cards .card h5 i {
    font-size: 25px;
    font-weight: 900;
    color: forestgreen;
}

/* End Plan */
/* Start Features */
.features {
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}

.features .card-body::after {
    content: "";
    position: absolute;
    border: 1px solid #ccc;
    width: 100%;
    top: 25%;
    left: 0;
}

.features .header span {
    color: var(--mainColor);
}

.features .cards {
    margin-top: 80px !important;
}

.features .card {
    box-shadow: inset 0 -100px 50px rgba(185, 184, 184, 0.1);
}

.features .card::after {
    content: "Starting\A$1.99\A/month";
    white-space: pre-line;
    color: red;
    line-height: 1;
    text-align: center;
    width: 70px !important;
    height: 70px !important;
    position: absolute;
    right: -20px;
    top: -20px;
    padding-top: 7px;
    border: 1px solid var(--secondColor);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

.features .card img {
    color: red;
    position: absolute;
    right: 2px;
    bottom: 2px;
}

/* End Features */
/* Start Logos */
.container {
    position: relative;
}

.logo .container div {
    color: #ccc;
}

.logo .container .d-flex div {
    width: 200px;
}

.logo .container .d-flex div:hover {
    color: var(--mainColor) !important;
}

/* End Logos */
/* start contactus */
.contactus {
    background-color: #525151;
    padding: 80px 0;
    margin-top: 90px;
    color: #ccc
}

.contactus i {
    color: #04aa9c !important;
    font-size: 20px;
    margin-right: 20px;
}

.contactus .tags {
    width: 300px;
}

.contactus .content div:nth-child(1),
.contactus .content div:nth-child(2),
.contactus .content div:nth-child(3),
.contactus .content div:nth-child(4) {
    width: 250px;
}

/* End contactus */
/* Start Footer */
.footer i {
    color: var(--mainColor) !important;
    margin-left: 10px;
    margin-right: 10px;
}

/* End Footer */