/*
Theme Name: My Child Theme
Template: twentytwentyfour
Author: Novum Labs
Author URI: https://novumlabs.net
Description: My Child Theme is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mychildtheme
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
@font-face {
    font-family: "SolaimanLipi";
    src: url("assets/fonts/SolaimanLipi_22-02-2012.ttf");
}

@font-face {
    font-family: "SolaimanLipi Bold";
    src: url("assets/fonts/SolaimanLipi_Bold_10-03-12.ttf");
}

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

html, body {
    width: 100%;
    height: 100vh;
    background-color: #EFEBEA;
}

@media screen and (min-width: 960px) and (max-width: 2500px) {
    header {
        width: 100%;
        height: auto;
        z-index: 10;
        background-color: #FFFFFF;
        box-shadow: 5px 5px 5px #888886;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        margin: 5px 0; /* Adjust margin to ensure header isn't clipped */
    }

    #after-header {
        margin: 1vw;
    }

    .nav-bar-top {
        position: relative;
        text-align: center;
        color: white;
    }

    .header-image img {
        width: 100%;
        height: auto;
        max-width: 1300px;
        max-height: 200px;
        display: block; /* Ensures image is centered within its container */
        margin: 0 auto; /* Center the image */
    }

    .nav-bar-down {
        background-color: #000; /* Black background */
        padding: 10px; /* Padding inside the box */
        border: 2px solid #fff; /* White border */
        border-radius: 5px; /* Rounded corners */
        display: flex; /* Flexbox layout */
        justify-content: center; /* Center the content */
        align-items: center; /* Center items vertically */
        max-width: 100%; /* Maximum width for the box */
        margin-top: 0.2px; /* Center the box horizontally */
        margin-bottom: 0.2px;
    }

    .nav-bar-down ul {
        display: flex; /* Use flexbox to center items horizontally */
        justify-content: center;
        padding: 0;
        margin: 0;
        list-style: none; /* Remove default list style */
    }

    .nav-bar-down ul li {
        padding: 0 2vw; /* Horizontal padding for separation */
        color: #FFFFFF; /* White text color */
        cursor: pointer;
        font-size: 18px;
    }
    .nav-bar-down ul li a {
        text-decoration: none; /* Remove underline */
        color: #ffffff; /* Set text color */
        font-size: 1.2rem; /* Set font size */
        transition: color 0.3s; /* Smooth transition for color change */
    }

    .nav-bar-down ul li:hover {
        text-decoration: #f3be2b; /* Optional: underline on hover */
    }

    /* Optional: add styles for hover effect on the entire box */
    .nav-bar-down:hover {
        border-color: #aaa; /* Change border color on hover */
    }
}
    main {
        margin: 5px;
        padding: 5px;
        width: 99%;
        height:auto;
        background-color: #FFFFFF;
        box-shadow:5px 5px 5px #888886;
    }
    .section-1, .section-2, .section-3 {
        margin-top: 0.1em;
    }
    
    .section-1 {
        display: flex;
        margin-top: 1vh;
    }
    .section-1-left-side {
        width: 60vw;
        height: auto;
        background-color: rgb(220, 216, 216);
        padding: 0.02vw;
        padding-top: 0.5vw;
        padding-right: 1vw;
        border-right: 1px solid black;
        margin: 1vh 1vh 1vh 0; 
        }
    .section-1-left-side img {
        width: 50vw;
        padding-left: 1vw;
        padding-right: 0.01vw;
        padding-top: 0.5vw;
        -o-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 1px;
}
p a {
    text-decoration: none; /* Remove underline by default */
    color: #2c3e50; /* Set default text color */
    transition: color 0.3s, text-decoration 0.3s; /* Smooth transition for color and underline */
}

p a:hover {
    color: #452dcc; /* Change text color on hover */
    text-decoration: solid; /* Add underline on hover */
}

    .section-1-left-side p {
        font-size: 2rem;
        font-family: 'SolaimanLipi Bold';
        line-height: 8vh;
        text-align: center;
        padding: 2vw 1vw 1vw 1vw;
    }
        .section-1-right-side {
        width: 60%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
        margin: 1vh 0 1vh 1vh; /* Ensures the same margin */
}

    
    .right-side-box {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #f9f9f9;
    }

    .section-divider {
        margin: 10px 0;
    }

    #section-1-right-side-first-child {
        display: flex;
        align-items: center;
        margin: 0.5vw;
        background-color:rgb(220, 216, 216);
        padding: 0.2vw;
    }
    #section-1-right-side-first-child img{
         width: 15vw;
    }
     #section-1-right-side-first-child p {
        font-size: 1.6rem;
        font-family: 'SolaimanLipi';
        padding: 2vh 0 0 4vh;
        line-height: 6vh;
    }
    #after-section-1-right-side-first-child {
        margin: 0 1vw 0 1vw;
        
        
    }
    #after-section-1 {
        margin: 1vw 1vw 4vh 1vw;
    }
    .section-2-first-child {
        width: 99.5%;
        height: auto;
        background-color: rgb(220, 216, 216);
        display: flex;
        align-items: center;
        margin-left: .5vw;
        padding: vw;
    }
    .section-2-img img {
        width: 40vw;
        height: auto;
    }
    .section-2-text h1 {
        text-align: center;
        font-size: 3rem;
        font-family: 'SolaimanLipi Bold';
        line-height: 10vh;
        padding-top: 0.02vh;
        padding-right: 1.5vw;
        padding-left: 1.5vw;
    }
    .section-2-text p {
        text-align: center;
        font-family: 'SolaimanLipi';
        font-size:1.2rem;
        line-height: 4vh;
        padding: 4vh 3vw 0 3vw;
    }
    #after-section-2 {
        margin: 1vw;
    }
    .section-3-first-child {
        padding: 1vw;
        display: flex;
        justify-content: space-between;
    }
    .first-child-card-1 {
        width: 23vw;
        height: auto;
        background-color: rgb(220, 216, 216);
    }
    .first-child-card-1 img {
        width: 23vw;
        padding: 0.5vw;
    }
    .first-child-card-1 p {
        padding: 1vw;
        font-family: 'SolaimanLipi';
        text-align: center;
    }
    .section-4-first-child {
        padding: 1vw;
        display: flex;
        justify-content: space-between;
    }
    footer {
        background-color: #2c3e50;
        color: #ecf0f1;
        padding: 20px 0;
        text-align: center;
        font-family: 'SolaimanLipi', sans-serif;
    }
    footer ul li a {
        text-decoration: none; /* Remove underline */
        color: #ffffff; /* Set text color */
        font-size: 1rem; /* Set font size */
        transition: color 0.3s; /* Smooth transition for color change */
    }
    
    footer ul li a:hover {
        color: #ece51f; /* Change color on hover */
    }
    
    .footer-section-1 {
        padding: 20px;
    }
    
    .footer-section-1 h1 {
        margin-bottom: 20px;
        font-size: 1.5rem;
        color: #ecf0f1;
    }
    
    .footer-section-1 i {
        margin: 0 10px;
        font-size: 1.5rem;
        color: #ecf0f1;
        transition: color 0.3s;
    }
    
    .footer-section-1 i:hover {
        color: #3498db;
    }
    
    #after-footer-section-1 {
        border: 1px solid #ecf0f1;
        margin: 20px 0;
    }
    
    .footer-section-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 20px 0;
    }
    
    .footer-section-2 ul {
        list-style: none;
        padding: 0;
        margin: 0 10px;
    }
    
    .footer-section-2 li {
        margin: 5px 0;
        font-size: 1.4rem;
        transition: color 0.3s;
    }
    
    .footer-section-2 li:hover {
        color: #3498db;
    }
    
    .footer-section-3 {
        padding: 20px;
        font-size: 1.2rem;
    }
  }
    
    @media (max-width: 768px) {
        .footer-section-2 {
            flex-direction: column;
            align-items: center;
        }
    }
    

@media screen and (min-width:210px) and (max-width:576px){
    header {
        width: 97.5%;
        height: 21vh;
        background-color: #FFFFFF;
        box-shadow:5px 5px 5px #888886;
       border-top-left-radius: 5px;
       border-top-right-radius: 5px;
    }
    .nav-bar-top{
        display: flex;
        justify-content: space-between;
    }
    .nav-bar-top h1{
        text-align: center;
        font-size: 1.5rem;
        padding-top: 2vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .nav-bar-top:nth-child(1){
        padding-left: 1vw;
        padding-top: 1vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 0.5rem;
    }
    .nav-bar-top h3{
        padding-right: 1vw;
        padding-top: 0.5vh;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        font-size: 0.5rem;
    }
    .nav-bar-down ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 2vh;
    }
    .nav-bar-down ul li {
        list-style: none;
        padding: 3vw;
    }
    main {
        width: 97.5%;
        height:auto;
        background-color: #FFFFFF;
        box-shadow:5px 5px 5px #888886;
    }
    .section-1 {
        display: flex;
        flex-wrap: wrap;
    }
    .section-1-left-side {
        width: 95vw;
        height: auto;
        background-color: rgb(220, 216, 216);
        padding: 0.5vw;
        margin: 2vh;
    }
    .section-1-left-side img {
        width: 89vw;
        -o-border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        border-radius: 2px;
}
    .section-1-left-side p {
        font-size: 1.4rem;
        line-height: 4.5vh;
        text-align: center;
        padding: 2vw 1vw 1vw 1vw;
    }
    .section-1-rigth-side {
        padding: 1vw;
    }
    #section-1-right-side-first-child {
        width: 91vw;
        display: flex;
        flex-wrap: wrap;
        background-color:rgb(220, 216, 216);
        padding: 1vw;
        margin: 2vw 0 0 3vw;
    }
    #section-1-right-side-first-child img{
         width: 89vw;
    }
     #section-1-right-side-first-child p {
        font-size: 1.4rem;
        padding: 1vh 0 0 2vh;
        line-height: 6vh;
    }
    #after-section-1-right-side-first-child {
        display: none;
    }
    #after-section-1 {
        display: none;
    }
    .section-2-first-child {
        width: 93%;
        height: auto;
        background-color: rgb(220, 216, 216);
        display: flex;
        flex-wrap: wrap;
        margin-left: 4vw;
        padding: 1vw;
    }
    .section-2-img img {
        width: 88.5vw;
        height: 50vh;
        padding: 2vw;
    }
    .section-2-text h1 {
        text-align: center;
        font-size:1.5rem;
        line-height: 4.5vh;
        padding-top: 4vh;
        /* padding-right: 1vw; */
    }
    .section-2-text p {
        text-align: center;
        font-size:1rem;
        line-height: 3vh;
        padding: 2vh 3vw 0 3vw;
    }
    #after-section-2 {
        display: none;
    }
    
    .section-3-first-child {
        padding: 1vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .first-child-card-1 {
        width: 91vw;
        margin-left: 3vw;
        height: auto;
        background-color: rgb(220, 216, 216);
        margin: 1vh 0 0 0;
    }
    .first-child-card-1 img {
        width: 91vw;
        padding: 0.5vw;
    }
    .first-child-card-1 p {
        padding: 1vw;
        text-align: center;
    }
    .section-4-first-child {
        padding: 1vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}