/*
=========================================================================
📁 ફાઈલ: pages.css
📍 પાથ: public_html/pages/pages.css
🎯 કામ: બધા પેજ (Pages) માટે કોમન ડીઝાઇન (માર્જિન, શેડો, ગોળાઈ વગેરે)
=========================================================================
*/
/* 🌟 ૧. મેઈન કન્ટેનર (પેજની બહારનો ભાગ) */
.common-page-wrapper {
    width: 100%;                  /* પેજને પૂરી પહોળાઈ લેવા માટે */
    max-width: 1200px;            /* કોમ્પ્યુટરમાં બહુ મોટું ન થઈ જાય એટલે 1200px ની લિમિટ */
    margin: 40px auto 60px;       /* ઉપર 40px, આજુબાજુ સેન્ટર (auto), નીચે 60px માર્જિન */
    padding: 0 15px;              /* મોબાઈલમાં સાઈડમાં અડી ન જાય એટલે આજુબાજુ 15px ની જગ્યા */
    box-sizing: border-box;       /* પેડિંગ અને પહોળાઈનું માપ બરાબર રાખવા માટે */
}

/* 🌟 ૨. મુખ્ય કાર્ડ (જેની અંદર લખાણ હશે - ગોળાઈ અને શેડો) */
.common-page-card {
    background: #ffffff;          /* કાર્ડનો ડીફોલ્ટ કલર (વ્હાઇટ) - અલગ પેજમાં બદલી શકાશે */
    border-radius: 40px;          /* ખૂણાઓની ગોળાઈ (Border Radius) 40px રાખી છે */
    padding: 50px 35px;           /* કાર્ડની અંદરની જગ્યા (ઉપર-નીચે 50px, આજુબાજુ 35px) */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); /* કાર્ડની નીચેનો હળવો પડછાયો (Shadow) */
    border: 1px solid #f1f5f9;    /* આજુબાજુ એકદમ આછી બોર્ડર (સારા લુક માટે) */
    position: relative;           /* અંદરની વસ્તુઓને સેટ કરવા માટે */
    overflow: hidden;             /* ગોળાઈની બહાર કંઈ જાય તો કાપી નાખવા માટે */
}

/* 🌟 ૩. પેજનું મુખ્ય ટાઇટલ (Heading) */
.common-page-title {
    font-size: 2.2rem;            /* અક્ષરની સાઈઝ */
    font-weight: 900;             /* અક્ષર એકદમ ઘાટા (જાડા) કરવા માટે */
    color: #043d37;               /* ટાઇટલનો કલર (ટચુકડીનો ડાર્ક લીલો કલર) */
    margin-bottom: 20px;          /* ટાઇટલની નીચે જગ્યા છોડવા માટે */
    text-align: center;           /* લખાણને વચ્ચે (સેન્ટરમાં) રાખવા માટે */
}

/* 🌟 ૪. પેજનું લખાણ (Paragraph/Text) */
.common-page-text {
    font-size: 1.1rem;            /* લખાણની સાઈઝ */
    line-height: 1.8;             /* બે લાઈન વચ્ચેની જગ્યા (વાંચવામાં સરળ રહે એટલે 1.8) */
    color: #4b5563;               /* લખાણનો કલર (આછો કાળો/ગ્રે) */
    margin-bottom: 25px;          /* ફકરાની નીચે જગ્યા છોડવા માટે */
}

/* 📱 ૫. મોબાઈલ માટે અલગ સેટિંગ (જ્યારે સ્ક્રીન 768px થી નાની હોય ત્યારે આ કોડ લાગુ પડશે) */
@media (max-width: 768px) {
    .common-page-wrapper {
        margin: 20px auto 40px;   /* મોબાઈલમાં ઉપર-નીચે માર્જિન થોડું ઓછું કર્યું */
        padding: 0 12px;          /* સાઈડની જગ્યા 12px કરી */
    }
    
    .common-page-card {
        border-radius: 30px;      /* મોબાઈલમાં ગોળાઈ 40px થી ઘટાડીને 30px કરી */
        padding: 35px 20px;       /* મોબાઈલમાં અંદરની જગ્યા પણ ઓછી કરી */
    }
    
    .common-page-title {
        font-size: 1.8rem;        /* મોબાઈલમાં ટાઇટલ થોડું નાનું કર્યું */
    }
    
    .common-page-text {
        font-size: 1rem;          /* મોબાઈલમાં લખાણ થોડું નાનું કર્યું */
    }
}