@import url('https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap');

.mk {
    height: 100px;
    width: 100px;
    border-radius: 50px;
}

.mk:hover {
    transform: translateY(-10px);
    transition-duration: 1s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 2);
}

.charan {
    font-family: Caveat;
    font-size: 30px;
    color: white;
}

.ram {
    font-family: Lobster;
    font-size: 25px;
    color: white;
}

.manojkumar {
    height: 100px;
    width: 100px;

}

.bg-macbook1 {
    background-image: url("https://www.shutterstock.com/image-photo/poland-wroclaw-may-09-2019-260nw-1409906054.jpg");
    height: 100vh;
    background-size: cover;
    padding: 35px;

}

.machead1 {
    font-family: "Playfair Display";
    font-size: 30px;
    color: white;
}

.machead2 {
    font-family: "Playfair Display";
    font-size: 25px;
    color: #bef0ff;
}

.linkmac {
    text-decoration: underline;
    color: #005acd;
}

.bg-macbook2 {
    background-color: black;
    background-size: cover;
    padding: 30px;
}

.machead3 {
    color: white;
    font-family: "Playfair Display";
    font-size: 40px;
}

.buttonmac1 {
    height: 40px;
    width: 100px;
    border-radius: 8px;
    border-width: 0px;
    color: white;
    background-color: grey;
}

.maccard1 {
    background-image: url("https://miro.medium.com/v2/resize:fit:1358/format:webp/1*MJvZrpHoW-FbV48W3G_lAA.png");
    background-size: cover;
    height: 70vh;
    width: 50vw;
    border-radius: 8px;

}

.imagemac1 {
    height: 70vh;
    width: 50vw;
    border-radius: 8px;
    padding: 25px;
}

.cardhead {
    font-family: "Roboto";
    font-size: 25px;
    color: white;
    font-weight: 600;
}

.cardpara {
    font-family: "Roboto";
    font-size: 15px;
    color: white;
}



.maccard {

    background-size: cover;
    height: 70vh;
    width: 50vw;
    border-radius: 8px;
    padding: 30px;

}

.cardmainhead {
    color: white;
    font-family: "Roboto";
    font-weight: 400;

}

.highlight {
    color: white;
    font-size: 20px;
}

.cardpara1 {
    color: grey;

    padding: 7px;
    font-size: 20px;
    font-weight: 700;
}

.cardhead2 {
    color: #34ebba;
}

.macimage1 {
    background-image: url("https://www.notebookcheck.net/fileadmin/Notebooks/News/_nc5/Apple-macBook-Pro-M5.png");
    background-size: cover;
    width: 80vw;
    height: 60vh;

}

.macimage2 {
    background-image: url("https://miro.medium.com/v2/resize:fit:1400/1*JXq7WVP8z7WgR1VFrbVeOQ.png");
    background-size: cover;
    width: 100vw;
    height: 60vh;

}

.macheadpro {
    color: Black;
    font-family: "Roboto";
    font-weight: 500;
}

.macprocard {
    border-style: solid;
    border-radius: 8px;
    background-color: #ccd8e3;
    height: 50vh;
    border-width: 0px;
    text-align: center;
    padding: 35px;
    width: 80vw;
}

.imagepro {
    height: 40vh;
    width: 70vw;
    text-align: center;
}

.macpromainhead {
    color: white;
    font-family: "Playfair-display";

}

.macproducts {
    background-color: black;
    background-size: cover;
}

.macheadpro {
    color: white;
    font-family: "Roboto";
    font-weight: 500;
}

.macparapro {
    color: white;
    font-family: "Roboto";

}

.centeralign {
    text-align: center;
}

.macparapro1 {
    color: white;
    font-family: "Roboto";
    font-weight: 700;
}

.procard {
    text-align: center;
    border-radius: 8px;
    background-color: #332d2d;
    padding: 25px;
    margin: 35px;

}

.logo-size {
    height: 40px;
    width: 50px;
}

.headding {
    font-family: italic;
    font-weight: 900;
    padding: 30px;
    font-size: 100px;
    color: white;

}


.full-back {
    background-image: url("https://getwallpapers.com/wallpaper/full/7/9/e/1420288-cool-earth-wallpapers-1920x1080.jpg");
    background-size: cover;
    min-height: 100vh;
}

.products-para {
    font-size: 20px;
    font-weight: bold;
    color: white;
}

.images {
    height: 250px;
    width: 200px;
    margin-left: 30px;
    border-radius: 20px;
    padding: 10px;
}

.images:hover {
    transform: translateY(-10px);
    transition-duration: 1s;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 2);

}



.back-image {
    background-image: url("https://res.cloudinary.com/dglrhzlzq/image/upload/v1763543234/hero_endframe__b3cjfkquc2s2_xlarge_kyshgc.jpg");
    background-size: cover;
    min-height: 150vh;
}

.section-card-iphone {
    background-color: white;
    height: 400px;
    width: 250px;
    margin: 40px;
    border-radius: 20px;

}

.section-card-iphone:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.iphone-xs {
    height: 250px;
    width: 250px;
    padding: 20px;
    border-radius: 30px;
}

.iphone-xs:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.text-iphone {
    text-align: center;
    color: black;
    font-weight: bold;
}

.new-models {
    text-align: center;
    padding: 10px;
    font-family: Roboto;
    font-weight: bold;
    color: #1b8bfa;
}

.Specifications {
    text-align: center;
    font-family: Roboto;
    font-weight: bold;
}

.section-card-iphone:hover {
    transition: transform 1s ease;
    transform: translateY(-6px);
}

.mainhead {
    text-align: center;
    font-size: 55px;
    font-weight: 900;
    margin-top: 30px;
    margin-bottom: 40px;
    color: #111;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.air-pods-image {
    height: 50vh;
    width: 100%;
    object-fit: contain;
    transition: transform 0.4s ease, filter 0.3s ease;
    cursor: pointer;
}

.air-pods-image:hover {
    transform: scale(1.08);
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.3));
}

.pods.heading {
    border-radius: 15px;
    padding: 20px;
    margin: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.pods.heading:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.head {
    font-size: 24px;
    font-weight: 700;
    margin-left: 15px;
    margin-top: 15px;
    color: #2c2c2c;
}

.para {
    margin-left: 15px;
    color: #666;
    font-size: 15px;
    margin-bottom: 6px;
    font-weight: 400;
}


.pan {
    font-weight: 900;
    font-size: 22px;
    color: #000;
}

.line {
    text-decoration: line-through;
    font-weight: 600;
    font-size: 15px;
    margin-left: 8px;
    color: #888;
}

.color {
    color: green;
    font-weight: 900;
    font-size: 18px;
    margin-left: 10px;
}

.ofers {
    margin-left: 15px;
    font-weight: 400;
    margin-bottom: 10px;
    font-size: 14px;
    color: #444;
}

.cash {
    font-weight: 700;
    margin-left: 10px;
    color: #000;
}

.main-container {
    padding-right: 0px;
}

/* @media (max-width: 768px) {
    .mainhead {
        font-size: 42px;
    } */


.detailed-view-bg-container {
    background-image: url("https://d2clawv67efefq.cloudfront.net/ccbp-static-website/seabg.png");
    height: 100vh;
    background-size: cover;
}

.detailed-view-heading {
    color: white;
    font-family: "Roboto";
    font-size: 28px;
    font-weight: bold;
    padding: 24px;
}

.detailed-view-card-container {
    background-color: white;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 8px;
    margin: 24px;
}

.detailed-view-card-heading {
    color: #0f0e46;
    font-family: "Roboto";
    font-size: 23px;
    font-weight: bold;
}

.detailed-view-card-description {
    color: #6c6b70;
    font-family: "Roboto";
    font-size: 13px;
}

.detailed-view-card-text-container {
    padding: 16px;
}

.para {
    font-weight: 500;
}

.rating {
    background-color: green;
    color: white;
    border-width: 20px;

}

.pan {
    font-weight: 900;
    font-size: 20px;
}

.paragraph {
    font-weight: 550;
    font-family: BreeSerif;

}

.para2 {
    font-weight: 900;
    font-size: 25px;

}

.para3 {
    font-weight: 400;
    font-size: 15px;
    text-decoration: line-through;
}

.offer {
    color: green;
}

.btn-last {
    background-color: green;
    color: white;
    padding: 10px 20px 10px 20px;
    border: 1px solid black;
    border-radius: 10px;
}

.firsthome {
    background-image: url("https://res.cloudinary.com/de8tq4drl/image/upload/v1764050885/Rachel-Ross-moraine-lake-moonscape-small_am5kkd.jpg");
    height: 100vh;
    background-size: cover;

}

.firstbutton {
    height: 80px;
    width: 80px;
    border-radius: 50px;
    background-image: radial-gradient(lightblue, white);


}

.firstbutton:hover {
    transition: transform 1s ease;
    transform: translateY(10px);
}

.mainhead {
    font-weight: bold;
    text-align: center;
    font-size: 50px;
    padding: 20px;


}

.image {
    height: 40vh;
    margin: 20px;

}

.highlight {
    color: brown;
    font-family: Roboto;
}

.main-container {
    background-color: white;
    height: 500px;
    width: 300px;
}

.heading {
    color: black;
    font-family: Roboto;
    font-size: 20px;
}

.text {
    color: grey;
    font-size: 15px;
    padding: 15px;
}

.line {
    text-decoration: line-through;
}

.mainhead {
    font-weight: bold;
    text-align: center;
    font-size: 50px;
    padding: 20px;
    background-color: white;

}

.image {
    height: 40vh;
    margin: 20px;

}

.highlight {
    color: brown;
    font-family: Roboto;
}

.main-container {
    background-color: white;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.35s ease, box-shadow 0.35s ease;

}

.heading {
    color: black;
    font-family: Roboto;
    font-size: 20px;
}

.text {
    color: black;
    font-size: 15px;
    padding: 15px;
}

.line {
    text-decoration: line-through;
}

.button-page {
    background-color: blue;
    color: red;
}

.main-container:hover {
    transform: translateY(-6px);
}

.main-container:hove {
    transform: translateY(-60px) box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.section-card-iphone-1 {
    background-color: white;
    height: 340px;
    width: 250px;
    margin: 40px;
    border-radius: 20px;

}

.iphone-xs-1 {
    height: 250px;
    width: 250px;
    padding: 20px;
    border-radius: 30px;
}

.text-iphone-1 {
    text-align: center;
    color: black;
    font-weight: bold;
}

.new-models-1 {
    text-align: center;
    padding: 10px;
    font-family: Roboto;
    font-weight: bold;
    color: #1b8bfa;
}

.developer-1 {
    background-image: url("https://res.cloudinary.com/de8tq4drl/image/upload/v1763875810/html-css-collage-concept_23-2150061955_oh6jqq.jpg");
    background-size: cover;
    min-height: 150vh;
}

.section-card-iphone-1:hover {
    transition: transform 1s ease;
    transform: translateY(-9px);
    transform: scale(1.08);
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.3));

}

.iphone-xs-1:hover {
    transition: transform 1s ease;
    transform: translateY(-6px);
    transform: scale(1.08);
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.3));

}

.group-name {
    font-family: Caveat;
    font-size: 50px;
    background-color: white;
}