@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/css2?family=Anek+Bangla:wght@100;200;300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');


/* 
    Necessary Tools:
    ============================================
    1) Pixel-REM Converter      : nekocalc.com/px-to-rem-converter
    2) Color Scheme Generator   : color.adobe.com/create/color-wheel
    3) Color Shades Generator   : material.io/design/color/the-color-system.html#tools-for-picking-colors
    4) Font Sizes Generator     : type-scale.com/
    5) nekocolor.com is also good color tool.

    Font Size Tips:
    ============================================
    font-size: 100%; in most browsers, this 100% = 16px = 1rem
    font-size: 112.5%; In most browsers this 112.5% = 18px = 1.125rem

    //Another option to set font-size-
    //In order to seamlessly convert pixels to rem, we can set the root sizing to 62.5%. That means 1rem = 10px:
    font-size: 62.5%;  (62.5/100) * 16px = 10px  

*/

/* Colors----> */
:root {
    --black:    #1c2128;
    --white:    #E0E8F2;

    --gray-0:   #E0E8F2;
    --gray-1:   #C2D0E5;
    --gray-2:   #A3B9D8;
    --gray-3:   #768390;
    --gray-4:   #658ABD;
    --gray-5:   #4A73AD;
    --gray-6:   #3D5F8E;
    --gray-7:   #304A6F;
    --gray-8:   #233651;
    --gray-9:   #162233;
    
    --blue-0:   #c6e6ff;
    --blue-1:   #96d0ff;
    --blue-2:   #6cb6ff;
    --blue-3:   #539bf5;
    --blue-4:   #4184e4;
    --blue-5:   #316dca;
    --blue-6:   #255ab2;
    --blue-7:   #1b4b91;
    --blue-8:   #143d79;
    --blue-9:   #0f2d5c;

    --green-0:  #b4f1b4;
    --green-1:  #8ddb8c;
    --green-2:  #6bc46d;
    --green-3:  #57ab5a;
    --green-4:  #46954a;
    --green-5:  #347d39;
    --green-6:  #2b6a30;
    --green-7:  #245829;
    --green-8:  #1b4721;
    --green-9:  #113417;

    --yellow-0: #fbe090;
    --yellow-1: #eac55f;
    --yellow-2: #daaa3f;
    --yellow-3: #c69026;
    --yellow-4: #ae7c14;
    --yellow-5: #966600;
    --yellow-6: #805400;
    --yellow-7: #6c4400;
    --yellow-8: #593600;
    --yellow-9: #452700;

    --orange-0: #ffddb0;
    --orange-1: #ffbc6f;
    --orange-2: #f69d50;
    --orange-3: #e0823d;
    --orange-4: #cc6b2c;
    --orange-5: #ae5622;
    --orange-6: #94471b;
    --orange-7: #7f3913;
    --orange-8: #682d0f;
    --orange-9: #4d210c;

    --red-0:    #ffd8d3;
    --red-1:    #ffb8b0;
    --red-2:    #ff938a;
    --red-3:    #f47067;
    --red-4:    #e5534b;
    --red-5:    #c93c37;
    --red-6:    #ad2e2c;
    --red-7:    #922323;
    --red-8:    #78191b;
    --red-9:    #5D0F12;

    --purple-0: #eedcff;
    --purple-1: #dcbdfb;
    --purple-2: #dcbdfb;
    --purple-3: #b083f0;
    --purple-4: #986ee2;
    --purple-5: #8256d0;
    --purple-6: #6b44bc;
    --purple-7: #5936a2;
    --purple-8: #472c82;
    --purple-9: #352160;

    --pink-0:   #ffd7eb;
    --pink-1:   #ffb3d8;
    --pink-2:   #fc8dc7;
    --pink-3:   #e275ad;
    --pink-4:   #c96198;
    --pink-5:   #ae4c82;
    --pink-6:   #983b6e;
    --pink-7:   #7e325a;
    --pink-8:   #69264a;
    --pink-9:   #551639;

    --coral-0:  #FFDACF;
    --coral-1:  #FFB9A5;
    --coral-2:  #F79981;
    --coral-3:  #EC775C;
    --coral-4:  #DE5B41;
    --coral-5:  #C2442D;
    --coral-6:  #A93524;
    --coral-7:  #8D291B;
    --coral-8:  #771D13;
    --coral-9:  #5D1008;

    --teal-1:   #e6fffa;
    --teal-2:   #b2f5ea;
    --teal-3:   #81e6d9;
    --teal-4:   #4fd1c5;
    --teal-5:   #38b2ac;
    --teal-6:   #319795;
    --teal-7:   #2c7a7b;
} /* <---- Colors */

:root {
    --container-max-width: 1200px;
    --container-padding: 0.75rem;  /* left + right*/

    --fallback-font: sans-serif;
    --font-family-english: 'Inter', var(--fallback-font); 
    --font-family-bangla: 'Anek Bangla', var(--fallback-font);
    --font-weight: 400;

    /* Color scheme were generated from https://color.adobe.com/create/color-wheel */
    /* Shades were generated from https://material.io/design/color/the-color-system.html#tools-for-picking-colors */
    /* https://nekocolor.com is also good tool */

    /* Used as default text color */
    --color: var(--gray-2);
   
    /* Used as default page background color */
    --background-color: var(--gray-9);  /*--gray-9 = rgb(22,34,51)*/
        /* background can be anyone of the following -
            --background-color: red; //solid color
            --background-color: linear-gradient(307deg, #29648a 0%, #5e9ac3 50%); //gradient
            --background-color: linear-gradient(to right top, #6d327c, #485DA6, #00a1ba, #00BF98, #36C486); //gradient
            --background-color: #ffffff url(assets/images/corners/corners-4/corner-4-right-bottom.png) no-repeat right bottom / contain; //background image
        */
    
    /* --dark & --light are two variants of --background-color. */
    /* Used in rules: .c-dark, .c-light, .bg-dark, .bg-light, .bc-dark, .bc-light. File- _colors.scss.*/
    /* Use these shades to create a visual differences between elements.*/
    --dark:   rgba(19,30,46,1);  
    --light:  rgba(27,42,62,1);

    --line-height : 1;
    --accent-color: var(--blue-5);

    --border-color: var(--gray-5);
    --border: 1px solid var(--border-color);
    --border-radius: 0.25rem;

    /* All the following colors are the variant of the above base colors. */
    --gov-color: var(--gray-4);             /* applied to the text of "Government of the People's Republic of Bangladesh" */
    --org-color: var(--gray-1);             /* applied to the organization/company/office name in the top header */
    --header-menu-color: var(--blue-3);           /* applied to the top menu items  i.e. Home, Photo Resizer, Customer Care etc.*/
    --header-menu-color-hover: var(--blue-2);               /* applied to the top menu items  i.e. Home, Photo Resizer, Customer Care etc.*/
    --hamb-color: var(--color);            /* applied to the hamburger menu icon.*/
    --hamb-border-color: var(--color);     /* applied to the hamburger menu box border.*/
    --scroll-color: var(--color);          /* applied to the index.php marquee*/
    --scroll-color-hover: var(--color);    /* applied to the index.php marquee*/

    --hyperlink-color: var(--color);
    --hyperlink-color-hover: var(--accent-color);

    /* Default values for table */
    --table-background-color: transparent; 
    --table-border-color: transparent; 
    --thead-background-color: transparent; 
    --thead-color: transparent; 
    --th-border-color:transparent;
    --tbody-color:transparent;
    --tr-border-color:transparent;
    --tr-even-background-color:transparent;     /* for even rows only */
    --tr-hover-background-color:transparent;    /* on hover effect */

    /* Form element */
    --label-color: var(--gray-2);
    --placeholder-color: #51637b; /* input[type=text], input[type=password], textarea */
    --input-color: var(--gray-2);  /* input[type=text], input[type=password], select, textarea, .textbox */
    --input-caret-color: #fff;
    --input-background-color: #162233;  /* input[type=text], input[type=password], select, textarea, .textbox */
    --input-background-color-on-hover: unset;  /* input[type=text], input[type=password], select, textarea, .textbox */
    --input-background-color-on-focus: #162233;  /* input[type=text], input[type=password], select, textarea, .textbox */
    --input-border-color: #46576e;  /* input[type=text], input[type=password], select, textarea, .textbox */
    --input-border-color-on-hover: var(--accent-color);  /* input[type=text], input[type=password], select, textarea, .textbox */
    --input-border-color-on-focus: var(--accent-color);  /* input[type=text], input[type=password], select, textarea, .textbox */

    --button-color:             var(--gray-2);
    --button-border-color:      var(--gray-2);
    --button-background-color:  var(--gray-2);

}

/* Override sweet-modal color */
  .sweet-modal-content{
    color: black;
}

.sweet-modal-overlay {
     background: radial-gradient(at center, rgba(34, 39, 46, 0.6) 0%, rgba(34, 39, 46, 0.7) 100%)  !important;
}