/* Colour Palette */

:root {
    --color-primary: #2584ff;
    --color-secondary: #00d9ff;
    --color-accent: #ff3400;
    --color-headings: #1b0760;
    --color-body: #918ca4;
    --color-body-darker: #5c5577;
    --color-border: #ccc;
    --border-radius: 30px;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

/* Typography */

::selection {
    background: var(--color-primary);
    color: white;
}
/* Pseudo-element selector to apply the styles on the selected text. */

html {
    font-size: 62.5%;
    /* 62.5 * 16 = 10px */

    max-width: 100%;
    overflow-x: hidden;
    /* To prevent any kind of overflow. */
}

body {
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: var(--color-body);
    line-height: 1.5;
    font-size: 2rem;

    max-width: 100%;
    overflow-x: hidden;
}

h1,
h2,
h3 {
    color: var(--color-headings);
    margin-bottom: 1rem;
    /*
    - Our font i.e. Inter by default has some space on top and bottom of our text.
    - So, we need to reduce the bottom margin from 2rem to 1rem to match the space with the design mockup.
    */

    line-height: 1.1;
}

h1 {
    font-size: 7rem;
}

h2 {
    font-size: 4rem;
}

h3 {
    font-size: 3rem;
    font-weight: 500;
}

p {
    margin-top: 0;
    /*
    - The top-margin of p element and bottom-margin of h3 element was collapsing to 24px.
    - So, we set the margin-top for p element to be 0 and let the margin-down of h3 element decide the margin-top of p element.
    */
}

@media screen and (min-width: 1024px) {
    body {
        font-size: 1.8rem;
    }
    h1 {
        font-size: 8rem;
    }

    h2 {
        font-size: 4rem;
    }

    h3 {
        font-size: 2.4rem;
    }
}
/*
- 1024px is the standard breakpoint for the desktop screens.
*/

/* Links */

a {
    text-decoration: none;
}

.link-arrow {
    color: var(--color-accent);
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bold;
    display: inline;
}

.link-arrow::after {
    content: "-->";
    margin-left: 5px;
    /* We are using px here because no matter what is the size of the font we only want a small space between the link and the arrow. */

    transition: margin 0.4s;
}

.link-arrow:hover::after {
    margin-left: 10px;
}
/* Using this we are targeting the after element (that we inserted dynamically) in hover state. */

@media screen and (min-width: 1024px) {
    .link-arrow {
        font-size: 1.5rem;
    }
}

/* Badges */

.badge {
    border-radius: 20px;
    font-size: 2rem;
    font-weight: 600;
    padding: 0.5rem 2rem;
    white-space: nowrap;
    /*
    - This property prevents the badge from wrapping in a card when there is small space left for the badge to fit in.
    */
}

.badge--primary {
    background: var(--color-primary);
    color: white;
}

.badge--secondary {
    background: var(--color-secondary);
    color: white;
}

.badge--small {
    font-size: 1.6rem;
    padding: 0.5rem 1.5rem;
}

@media screen and (min-width: 1024px) {
    .badge {
        font-size: 1.5rem;
    }

    .badge--small {
        font-size: 1.2rem;
    }
}

/* Lists */

.list {
    list-style: none;
    padding-left: 0;
    /* color: var(--color-headings); */
    /* We shouldn't apply this style here because the purpose of this class was to remove bullet points of the list. */
}

.list--inline .list__item {
    display: inline-block;
    margin-right: 2rem;
}

.list--tick {
    list-style-image: url(../Images/tick.svg);
    padding-left: 3rem;
    color: var(--color-headings);
    /* Here, we are assuming that all the list having a tick-mark as the bullet point should have a color of headings.  */
}

.list--tick .list__item {
    padding-left: 1rem;
    margin-bottom: 1.5rem;
}

@media screen and (min-width: 1024px) {
    .list--tick .list__item {
        padding-left: 0.5rem;
    }
}

/* Icons */

.icon {
    height: 40px;
    width: 40px;
}

.icon--small {
    width: 30px;
    height: 30px;
}

.icon--primary {
    fill: var(--color-primary);
    /* fill property only applies to svg  images. */
}
/* Similarly, we can create different classes for different colours of icons but since we do not need them right now we should not make them. */

.icon--white {
    fill: white;
}

.icon-container {
    align-items: center;
    background: #f3f9fa;
    border-radius: 50%;
    display: inline-flex;
    /*
    - We do not want to set the display to block because in that case the element coming next to the icon will be on new line but we do not want it.
    - And we want it to be inline-block so that height and width properties are applicable.
    - But we want to align itin center.
    - So, we use inline-flex.
    */

    height: 64px;
    justify-content: center;
    width: 64px;
}
/*
- We have used a single dash to separate these words because this is not a modifier for the icon class.
- It is an entirely new class and we use single dash to separate different words in BEM. 
*/

.icon-container--accent {
    background: var(--color-accent);
}

/* Buttons */

.btn {
    border-radius: 5rem;
    border: 0;
    cursor: pointer;
    /* To make the cursor change to pointer when we hover on it to make them look clickable. */

    font-size: 1.8rem;
    font-weight: 600;
    margin: 1rem 0;
    padding: 2rem 4vw;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    /* To prevent the wrapping of the text in case of limited space. */

    /* box-sizing for button element is by default set to border-box but for anchor element we have to set it manually. */
}

.btn .icon {
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.btn--secondary {
    background: var(--color-secondary);
    color: white;
}

.btn--secondary:hover {
    background: #65e1f7;
    color: var(--color-headings);
}

.btn--accent {
    background: var(--color-accent);
    color: white;
}

.btn--accent:hover {
    background: #ec3000;
}

.btn--block {
    width: 100%;
    display: inline-block;
    /* For anchor elements, we have to set it to inline-block because they are inline elements and width property does not apply to them. */
}

.btn--outline {
    background: none;
    border: 2px solid var(--color-headings);
    color: var(--color-headings);
}

.btn--outline:hover {
    background: var(--color-headings);
    color: white;
}

.btn--stretched {
    padding-left: 8rem;
    padding-right: 8rem;
}

@media screen and (min-width: 1024px) {
    .btn {
        font-size: 1.5rem;
    }
}

/* Inputs */

.input {
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    color: var(--color-headings);
    font-size: 2rem;
    outline: 0;
    padding: 1.5rem 3.5rem;
}

::placeholder {
    /* This is a pseudo-element selector to select placeholder of the input element. */
    color: #cdcbd7;
}

.input-group {
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    display: flex;
}

.input-group .input {
    border: 0;
    flex-grow: 1;
    padding: 1.5rem 4.5rem;
    width: 0;
}
/* All the input fields inside the input-group should not have a border. */

.input-group .btn {
    margin: 5px;
}

@media screen and (min-width: 1024px) {
    .input {
        font-size: 1.5rem;
    }
}

/* Cards */

.card {
    border-radius: 10px;
    box-shadow: 0 0 20px 10px #f3f3f3;
    overflow: hidden;
    /*
    - After applying padding to header, it grew bigger then its parent container.
    - That's why the round corners were not visible.
    - So, there is an overflow.
    - By default, it is visible so we set it to hidden.
    */
}
/*
- We should not apply width to this card as it should stretch to take available space.
- So the width will be determined by the width of the container.
*/

.card__header,
.card__body {
    padding: 2rem 3rem;
}

.card--primary .card__header {
    background: var(--color-primary);
    color: white;
}

.card--secondary .card__header {
    background: var(--color-secondary);
    color: white;
}

.card--secondary .badge--secondary {
    background: #02cdf1;
}

.card--primary .badge--primary {
    background: #106ce4;
}

/* Plans */

.plan {
    transition: transform 0.3s ease-out;
}

.plan__name {
    color: white;
    margin: 0;
    font-size: 2.4rem;
    font-weight: 400;
}

.plan__price {
    font-size: 6rem;
}

.plan__billing-cycle {
    font-weight: 300;
    opacity: 0.8;
    margin-right: 1rem;
}

.plan__description {
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 1px;
    display: block;
}

.plan .list__item {
    margin-bottom: 2rem;
    letter-spacing: 1px;
}

.plan .btn {
    margin-top: 2.5rem;
}

.plan--popular {
    transform: scale(1.1);
    margin: 0 0.5rem;
}

.plan--popular .card__header {
    position: relative;
}

.plan--popular .card__header::before {
    content: url(../Images/popular.svg);
    width: 40px;
    display: inline-block;
    position: absolute;
    right: 5%;
    top: -6px;
}

.plan:hover {
    transform: scale(1.05);
}

.plan--popular:hover {
    transform: scale(1.15);
}

@media screen and (min-width: 1024px) {
    .plan__name {
        font-size: 1.4rem;
    }

    .plan__price {
        font-size: 5rem;
    }

    .plan__billing-cycle {
        font-size: 1.6rem;
    }

    .plan__description {
        font-size: 1.7rem;
    }
}

/* Media */

.media {
    display: flex;
    /* To lay items horizontally, so that the icon is on the left side and the content is on right side. */

    margin-bottom: 4rem;
    /* Almost everywhere on the webpage, we have a list of media component, so we want a bottom margin for all the components. */
}

.media__body {
    margin-left: 2rem;
    font-size: 2rem;
}

.media__title {
    margin-top: 0;
}

.media__image {
    margin-top: 1.5rem;
}

.media__content {
    margin-bottom: 0;
}
/* Here, we have only defined the basic structure of the media component and not its skin. */

/* Quotes */

.quote {
    margin: 2rem 0;
    font-size: 110%;
}

.quote__text {
    color: var(--color-body-darker);
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 2.2rem;
}

.quote__text::before {
    content: open-quote;
}

.quote__text::after {
    content: close-quote;
}

.quote__author {
    margin: 0;
    font-weight: 500;
}

.quote__company {
    color: var(--color-headings);
    opacity: 0.4;
    font-size: 1.7rem;
    margin: 0;
}

.quote__line {
    position: relative;
    bottom: 12px;
}

@media screen and (min-width: 1024px) {
    .quote {
        margin-left: 5rem;
        font-size: 120%;
    }

    .quote__author {
        font-size: 2.4rem;
    }

    .quote__company {
        font-size: 1.6rem;
    }

    .quote__line {
        bottom: 20px;
    }
}

/* Grids */

.grid {
    display: grid;
}

@media screen and (min-width: 768px) {
    .grid--cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .grid--cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Testimonials */

.testimonial {
    padding: 3rem;
    /* To create some space between the content of the testimonial and its boundary. */
}

.testimonial__image {
    position: relative;
    margin: 0 3rem;
}

.testimonial__image > img {
    width: 100%;
    /* To create a responsive image i.e. as the column of the grid resizes, the image gets resized automatically. */
}

.testimonial__icon {
    position: absolute;
    /* We have to give this class to the icon-container and not the svg element. */
    top: 30px;
    right: -32px;
    /* 64px / 2 = 32px */
}

@media screen and (min-width: 768px) {
    .testimonial__image {
        margin: 0;
    }
}

/* Callouts */

.callout {
    padding: 4rem;
    border-radius: 10px;
}

.callout--primary {
    background: var(--color-primary);
    color: white;
}

.callout__content {
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
}

.callout__heading {
    color: white;
    margin-top: 0;
    font-size: 3.5rem;
    font-weight: 600;
}

.callout .btn {
    justify-self: center;
    align-self: center;

    /*
    - By default, the value of justify-items and align-items is stretch so the items of the grid stretches themselves to occupy the entire space.
    - To remove this property, we set align-self property to center.

    Note: justify-items and align-items are applied to grid whereas justify-self and align-self are applied to a grid item.
    */
}

@media screen and (min-width: 768px) {
    .callout .grid--cols-2 {
        grid-template-columns: 1fr auto;
        /* This way the 2nd column will grow in a way to fit in the button and the remaining space will be given to the 1st column. */
    }

    .callout__content {
        text-align: left;
    }

    .callout .btn {
        justify-self: start;
        margin-left: 2rem;
    }
}

.callout-signup {
    transform: translateY(5rem);
}

/* Collapsibles */

.collapsible__header {
    display: flex;
    justify-content: space-between;
    /*
    - We have not set any kind of width to our collapsible because we want it to be responsive and to get fit inside any container.
    - So, the width of the collapsible will be considered by the width of the container.
    */
}

.collapsible__heading {
    margin-top: 0;
    font-size: 3rem;
}

.collapsible__chevron {
    transform: rotate(-90deg);
    transition: transform 0.3s;
}

.collapsible__chevron:hover {
    cursor: pointer;
}

.collapsible__content {
    /* display: none; */
    /* We will not use display property here because we can't animate it. */

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s;
}

.collapsible--expanded .collapsible__chevron {
    transform: rotate(0);
}

.collapsible--expanded .collapsible__content {
    /* display: block; */

    opacity: 1;
    max-height: 100vh;
    /*
    - Here, we are using max-height property because we want to set the limit that the content can occupy max height of 100vh.
    - But the actual height will be considered according to the content.
    - If we would have used height property, the content would have stretched to occupy entire viewport height. 
    */
}

/* Blocks */

.block {
    --padding-vertical: 5rem;
    padding: var(--padding-vertical) 2rem;
    /* text-align: center; */
    /*
    - Due to this property, if we add a card inside the block element then the text will be aligned center in the card also.
    - To prevent this, we will wrap the heading and text of the wrap inside header element and then apply this property to the header element.
    */
}

.block__header {
    text-align: center;
}

.block__heading {
    margin-top: 0;
}

.block__content {
    margin-bottom: 0;
}

.block--dark {
    background: black;
    color: #7b858b;
}

.block--dark h1,
.block--dark h2,
.block--dark h3 {
    color: white;
}
/*
- Every block has a heading so everytime, to make the heading white we have to give the heading a class of block__heading.
- Instead of this we use elements like h1, h2, h3 here so that the heading will be white by default.
*/

.block--skewed-right {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 95%);
    /*
    - Here each pair of noumbers represent a point.
    - 1st number represents x-offset and 2nd number represents y-offset.
    - 0% 0% - top-left
    - 100% 0% - top-right
    */

    padding-bottom: calc(var(--padding-vertical) + 4rem);
    /*
    - Due to clip-path the space below the text became less than the space above heading so we have added extra padding for skewed blocks.
    - But if in future we change vertical padding for all the blocks to 10rem then we have to remember to change the bottom padding for skewed blocks.
    - To prevent this, we will use variables.
    - We can define variables for an element and all its chidren.
    */
}

.block--skewed-left {
    clip-path: polygon(0% 0%, 100% 0%, 100% 95%, 0% 100%);
    padding-bottom: calc(var(--padding-vertical) + 4rem);
}

/*
- In our design mockup, we have constrained the width of some blocks to 1140px no matter how wide the screens are.
- So, we define a new class container which will be a general class for any element.
*/

.container {
    max-width: 1140px;
    margin: 0 auto;
    /* 
    - To align the entire block into the centre.
    - So, vertical margin = 0.
    - And horizontal margin = auto so the space left on the sides will be distributed equally between left and right margin.
    */
}

/* Navigation Bar */

.nav {
    background: black;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /*
    - Using space-between the first and last item in a row will move on left and right side.
    - Then using width: 100% and flex-wrap: wrap, the list will move on the second line occupying 100% width of its container.
    */

    padding: 0 1rem;
    align-items: center;
}

.nav__list {
    width: 100%;
    /* To move the list on the second line on mobiles. */

    margin: 0;
}

.nav__item {
    padding: 0.5rem 2rem;
    border-bottom: 1px solid #222;
}

.nav__item > a {
    color: #d2d0db;
    /* There is no need to assign a new class to these anchor elements as there is almost no chance that we will replace these anchor with any other elements. */

    transition: color 0.3s;
}

.nav__item > a:hover {
    color: white;
}

.nav__toggler {
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s, box-shadow 0.15s;
}

.nav__toggler:hover {
    opacity: 1;
}

.nav.collapsible--expanded .nav__toggler {
    /* Here, we have used double class selector so this property will be applied to all those elements having nav__toggler class and are inside an element having 2 classes nav and collapsible--expanded. */

    opacity: 1;
    box-shadow: 0 0 0 3px #666;
    border-radius: 5px;
    /* To round the corners of the shadow. */
}

.nav__brand {
    position: relative;
    top: 5px;
}

@media screen and (min-width: 768px) {
    .nav__toggler {
        display: none;
    }

    .nav__list {
        width: auto;
        display: flex;
        /* To layout items horizontally. */

        font-size: 1.6rem;
        max-height: 100%;
        opacity: 1;
    }

    .nav__item {
        border: 0;
    }
}

/* Hero */

.hero__tagline {
    font-size: 2rem;
    color: #b9c3cf;
    letter-spacing: 1px;
    margin: 2rem 0 5rem;
}

.hero__banner {
    width: 100%;
    align-self: center;
}

@media screen and (min-width: 768px) {
    .hero {
        padding-top: 1rem;
    }

    .hero__content {
        text-align: left;
        align-self: center;
    }

    .hero .block__heading {
        line-height: 1;
    }
}

/* Domain Block */

.block-domain .input-group {
    box-shadow: 0 0 30px 20px #e6ebee;
    border: 0;
    margin: 4rem auto;
    max-width: 670px;
}

.block-domain__prices {
    color: var(--color-headings);
    display: grid;
    /* The list items in the design mockup are perfectly lined up in rows and columns so we should use grid for them. */

    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 6rem);
    /* To give height to each list item. */

    font-weight: 600;
    font-size: 2rem;
    justify-items: center;
    max-width: 700px;
    margin: 0 auto;
    /* To distribute the remaining space equally among left and right margin so that the list is in center. */
}

@media screen and (min-width: 400px) {
    .block-domain__prices {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .block-domain__prices {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
    /*
    - If we use repeat(6, 1fr), then in future if we add more items then we have to remember to edit here also.
    - Instead of using this hard-coded value, we can use auto-fit value due to which the grid will automatically create as many columns to fit in the grid items.
    - But when using auto-grid value, we can't use a fraction value.
    - If we use an absolute value then if the items are lesser then extra space will be left.
    - So, we can use minmax() to provide a min and max value for the width of the columns.
    - Using the max value of 1fr, if we have some extra space left, then it will be distributed evenly among all the columns. 
    */
}

/* Plans Block */

.block-plans .grid {
    gap: 8rem 5rem;
}

.block-plans {
    max-width: 540px;
    margin: 0 auto;
}

@media screen and (min-width: 1024px) {
    .block-plans {
        max-width: none;
    }
}

/* Features */

.feature {
    gap: 4rem 3rem;
    margin: 8rem 0;
}

.feature:first-of-type {
    margin-top: 6rem;
}
/* To select the first feature in the section. */

.feature__heading {
    margin-top: 1.5rem;
}

.feature__image {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .feature:nth-of-type(even) .feature__content {
        order: 2;
    }
    /*
    - By default, the order of the content is 1 because we have added the content first in our markup.
    - So, when the feature is on even position, then its content's position will ne swaped with the image's position.
    */
}

/* Showcase Block */

.block-showcase .block__header {
    margin-bottom: 4rem;
}

.block-showcase .list {
    margin-top: 0;
}

.block-showcase__image {
    width: 100%;
}

.block-showcase .media {
    margin-top: 5rem;
}

.block-showcase .media__title {
    color: white;
}

@media screen and (min-width: 768px) {
    .block-showcase .grid {
        grid-template-columns: 50% 50%;
        /*
        - Earlier, we have 1fr 1fr.
        - So, the space is divided into 2 slices and each slice is given to each column.
        - Here, if the image is bigger, then it was taking more space.
        - To solve this, we use 50% 50%, so that the width of the column is determined by the width of the container and not the size of the image.

        - When done with this, the second column comes over the first column.
        - To prevent this we align the image to the right.
        */
    }

    .block-showcase__image {
        width: auto;
        max-width: 700px;
        justify-self: end;
    }
}

/* Testimonial Block */

.block-testimonial .block__header {
    margin-bottom: 4rem;
}

/* Footer */

.footer {
    background: #232323;
    font-weight: 300;
    padding-bottom: 0;
}

.footer__heading {
    text-transform: uppercase;
}

.footer__section {
    padding: 2rem;
    border-bottom: 0.5px solid gray;
    margin: 1rem;
}

.footer .list__item {
    margin: 2rem 0;
    font-size: 2rem;
}

.footer a {
    color: #777;
    transition: color 0.3s;
}

.footer a:hover {
    color: white;
}

.footer__brand {
    margin-top: 5rem;
    text-align: center;
}

.footer__copyright {
    font-size: 2.1rem;
    color: white;
    opacity: 0.3;
}

.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2b2f35;
    margin: 0 -2rem;
    /* 
    - There is a padding to the footer due to which this element cannot occupy 100vw width.
    - So, I have used negative margins to stretch it across the footer.
    */

    padding: 1rem 3rem;
    overflow: hidden;
}

.footer__text a {
    color: white;
}

.footer__logo {
    color: white;
    font-size: 3rem;
}

@media screen and (min-width: 768px) {
    .footer {
        padding: 10rem;
        padding-bottom: 0;
    }

    .footer__sections {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }

    .footer__section {
        border: 0;
    }

    .footer .collapsible__chevron {
        display: none;
    }

    .footer .collapsible__content {
        opacity: 1;
        max-height: 100%;
    }

    .footer__brand {
        order: -1;
        /*
        - All the items have the same order i.e. 0.
        - So, by setting the brand's order to -1, it comes before all the items.
        */

        margin-top: 2rem;
    }

    .footer__brand img {
        width: 100%;
    }

    .footer__copyright {
        font-size: 1.5rem;
    }

    .footer__heading {
        font-size: 1.6rem;
    }

    .footer__bottom {
        margin: 0 -10rem;
        padding: 1rem 10rem;
        overflow: visible;
    }
}