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

body{
    font-family:"Cairo",sans-serif;
    background:#eef6ff;
}

.hero{

    max-width:1400px;

    margin:40px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    align-items:stretch;

}

.hero-right,
.hero-left{

    background:#fff;

    border-radius:24px;

    padding:25px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

}

.hero-right{

    flex:1;
    background: linear-gradient(135deg,#00ccff,#1E3A8A);
        border:1px solid rgba(255,255,255,.3);
}

.hero-left{

    flex:1;
    background: linear-gradient(#F2CC4F, #E04B38);
    border:1px solid rgba(255,255,255,.3);


}
.hero-left{
    min-width:0;
    
}

.swiper{
    min-width:0;
}


.hero-image{

    border-radius:20px;

    overflow:hidden;

    margin-bottom:25px;

}

.hero-image img{

    width:100%;

    display:block;

}
.hero-features{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.feature{

    position:relative;
    overflow:hidden;

    padding:20px 25px;

    border-radius:22px;

    color:#fff;
    font-size:20px;
    font-weight:700;
    text-align:center;
    line-height:1.7;

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.12),
        inset 0 1px 1px rgba(255,255,255,.35);

    transition:.35s ease;

}


/* لمعة الجلاس */

.feature::before{

    content:"";
    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

    transition:.7s;

}

.feature:hover::before{

    left:160%;

}

/* الأزرق */

.blue{

    background:linear-gradient(
        135deg,
        #4F8BFF 0%,
        #2563EB 55%,
        #1D4ED8 100%
    );

}


/* البرتقالي */

.orange{

    background:linear-gradient(
        135deg,
        #FFB347 0%,
        #F97316 55%,
        #EA580C 100%
    );

}

.hero-btn{

    margin-top:auto;

    display:flex;

    justify-content:center;

    padding-top:25px;

}

.hero-btn img{

    width:260px;

}

/* ================= Left ================= */

.hero-left{

    border-radius:25px;

    padding:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

}

.results-header{

    text-align:center;

    margin-bottom:20px;

}

.results-header h2{

    font-size:40px;

    margin:8px 0;

    color:#ffffff;

}

.results-header p{
    color: #fff;
    background: linear-gradient(135deg,#00ccff,#1E3A8A);
    padding: 0 20px 5px;
    font-size:30px;
    text-align: center;
    line-height: 1.4;
}

.div {
    width: 100%;
    padding: 20px 0;
}

.swiper {
    width: 100%;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
}

.swiper-wrapper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
}


/* Buttons */
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    backdrop-filter: blur(5px);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px;
}
/* Notice */

.notice{

    margin-top:25px;

    background:#DBEAFE;

    color:#1D4ED8;

    padding:18px;

    border-radius:15px;

    text-align:center;

    font-size:18px;

    font-weight:700;

}

.second-section{

    max-width:1400px;

    margin:60px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    direction:rtl;

}


.doctor,
.how_work{


    border-radius:25px;

    padding:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    text-align:center;

}

.doctor{
    background: linear-gradient(135deg,#00ccff,#1E3A8A);
    border:1px solid rgba(255,255,255,.3);
}
.how_work{
    background: linear-gradient(#F2CC4F, #E04B38);
    border:1px solid rgba(255,255,255,.3);
}

/* Doctor */

.top_doc h3,
.top_sec h3{

    font-size:38px;

    color:#ffffff;

    line-height:1.4;

}


.top_doc p,
.top_sec p{

    color:#ffffff;

    font-size:22px;

    font-weight:700;

    margin-top:10px;

}



.doctor ul{

    list-style:none;

    margin:30px 0;

}


.doctor li{

    list-style:none;

    padding:18px 25px;

    margin-bottom:18px;

    border-radius:18px;

    font-size:20px;

    font-weight:700;

    text-align:center;

    line-height:1.8;

    transition:.3s ease;

}

.doctor-orange{

    background:linear-gradient(
        135deg,
        #FFB347 0%,
        #F97316 55%,
        #EA580C 100%
    );
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    box-shadow:
        0 8px 20px rgba(249,115,22,.25),
        inset 0 1px 1px rgba(255,255,255,.35);
}

.doctor-blue{

    background:linear-gradient(
        135deg,
        #4F8BFF 0%,
        #2563EB 55%,
        #1D4ED8 100%
    );


    color:#fff;

    border:1px solid rgba(255,255,255,.25);

    box-shadow:
        0 8px 20px rgba(37,99,235,.25),
        inset 0 1px 1px rgba(255,255,255,.35);
}


.center_img{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;

    margin:30px 0;

}


.center_img img{

    max-width:45%;

    height:220px;

    object-fit:contain;
    border-radius: 20px;

}



/* How work */

.div_img img{

    width:100%;

    max-height:350px;

    object-fit:contain;

}



.text{

    margin-top:25px;

}


.text p{

    color:#ffffff;

    font-size:18px;

    line-height:1.8;

}



/* buttons */

.btn_img img{

    width:260px;

    margin-top:25px;

}



/* Mobile */


.form_section{

    max-width:1400px;

    margin:80px auto;

    padding:0 20px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    direction:rtl;

}



/* صورة العرض */

.price{

    background: linear-gradient(135deg,#00ccff,#1E3A8A);
    border:1px solid rgba(255,255,255,.3);

    border-radius:25px;

    padding:30px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    display:flex;

    justify-content:center;

    align-items:center;

}


.img_price img{

    width:100%;

    max-width:1500px;

    object-fit:contain;
    border-radius: 20px;

}



/* الفورم */

.container_form{
    background: linear-gradient(#436ADF, #90F3FB);
    border:1px solid rgba(255,255,255,.3);

    border-radius:25px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}



.sm-p{

    background:#DBEAFE;

    color:#1E40AF;

    padding:15px;

    border-radius:15px;

    text-align:center;

    font-size:17px;

    font-weight:700;

    margin-bottom:25px;

}



.top_form{

    text-align:center;

    margin-bottom:10px;

}


.top_form p{

    color:#fefefe;

    font-size:22px;

    font-weight:800;

    margin:5px;

}




/* inputs */

.input_div{

    position:relative;

    margin-bottom:20px;

}



.input_div input{

    width:100%;

    height:60px;

    border:2px solid #DBEAFE;

    border-radius:15px;

    padding:0 55px 0 20px;

    font-size:18px;

    outline:none;

    direction:rtl;

    transition:.3s;

}



.input_div input:focus{

    border-color:#2563EB;

}



.input_div svg{

    position:absolute;

    right:18px;

    top:50%;

    transform:translateY(-50%);

    width:25px;

    height:25px;

}

.div_btn{

    margin-top:25px;

}

.btn{

    width:100%;

    height:65px;

    border:none;

    border-radius:50px;

    background:#2563EB;

    color:#fff;

    font-size:25px;

    font-weight:800;

    cursor:pointer;

    transition:.3s;

}



.btn:hover{

    background:#1D4ED8;

    transform:translateY(-3px);

}






.hero,
.second-section,
.form_section{
    margin:40px auto;
}


/* الغي أي فراغ زائد داخل السكاشن */
.second-section{
    margin-top:20px;
}


.form_section{
    margin-top:20px;
}


.import{
    display:flex;
    align-items:center;
    gap:15px;
    background:linear-gradient(135deg,#e8f5ff,#ffffff);
    border:2px solid #1687ff;
    border-radius:18px;
    padding:18px 25px;
    margin:25px auto;
    max-width:700px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}


.import span{
    background:#1687ff;
    color:white;
    padding:10px 18px;
    border-radius:12px;
    font-size:20px;
    font-weight:bold;
    white-space:nowrap;
    display:flex;
    align-items:center;
    gap:8px;
}


.import p{
    margin:0;
    color:#333;
    font-size:22px;
    font-weight:600;
    line-height:1.7;
}

/* ================= Footer ================= */


.footer{
    max-width:1400px;
    margin:40px auto;
    padding:0 20px 40px;
}

.boxs{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.box-blue,
.box-orange{

    border-radius:22px;
    padding:25px 20px;
    text-align:center;
    color:#fff;
    transition:.35s;
    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.box-blue{

    background:linear-gradient(135deg,#2563EB,#60A5FA);

}

.box-orange{

    background:linear-gradient(135deg,#F97316,#FDBA74);

}

.box-blue:hover,
.box-orange:hover{

    transform:translateY(-6px);

}

.icon{

    width:75px;
    height:75px;

    margin:0 auto 18px;

    border-radius:50%;

    background:rgba(255,255,255,.18);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.25);

    display:flex;
    justify-content:center;
    align-items:center;

}

.icon img{

    width:42px;
    height:42px;
    object-fit:contain;

}

.box-blue h4,
.box-orange h4{

    font-size:24px;
    margin-bottom:10px;
    font-weight:800;

}

.box-blue p,
.box-orange p{

    font-size:18px;
    line-height:1.7;
    font-weight:600;

}
.box-blue .icon img{
    filter: brightness(0) saturate(100%)
            invert(61%) sepia(98%) saturate(1422%)
            hue-rotate(352deg) brightness(100%) contrast(98%);
}