/*
    Theme Name: RA Web Tech Minimal Theme
    Theme URI: https://rawebtech.com
    Author: RA Web Tech
    Author URI: https://rawebtech.com
    Description: A lightweight, performance-focused custom WordPress theme designed for maximum flexibility and seamless compatibility with Elementor. This theme provides a clean foundation with minimal styling, allowing complete visual control through page builders or custom development. It includes essential structure for headers, footers, responsive navigation, and supports custom logos, menus, and custom scripts. Ideal for developers building fast, modern, and fully customized websites without unnecessary bloat.
    Version: 1.0
    Text Domain: ra-web-tech-theme
    Tags: No Bloatware, Page builder supported
    Requires at least: 6.9.1
    Tested up to: 6.9.1
    Requires PHP: 7.0
    
*/


@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
	font-family: "Inter", Sans-serif;
}

.header-container{
    max-width: 1400px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.header-container img{
    height: 60px;
    max-width: 50%;
}

header ul{
    display: flex;
    gap: 10px;
    list-style: none;
}


header ul a{
    padding: 15px 20px;
    color: #0c2267;
    font-weight: 400;
}

header ul a:hover,
header ul a.active{
    color: #007fc8;
}
header .header-right{
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Mobile Toggle Button */
.nav-toggle-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    z-index: 2;
}

.nav-toggle-btn span {
    width: 25px;
    height: 3px;
    background: #000;
    display: block;
    transition: 0.3s;
}

/* Hamburger Animation (optional) */
.nav-toggle-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-toggle-btn.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.header-btn{
    border-radius: 5px;
    padding: 8px 10px;
    color: #000000;
    background-color: #a9eeff;
    border-color: transparent;
}

/* Change menu layout for mobile */
@media (max-width: 768px) {

    .nav-toggle-btn {
        display: flex;
    }

    .header-right {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 75%;
        min-width: 250px;
        background: #fff;
        flex-direction: column;
        padding: 50px 20px;
        gap: 30px;
        transition: 0.3s ease-in-out;
        align-items: flex-start;
        box-shadow: -3px 0 10px rgba(0,0,0,0.1);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .main-menu{
        width: 100%;
    }

    .header-right.active {
        right: 0;
        z-index: 1;
    }

    header ul a{
        padding: 8px 0;
        display: block;
        width: 100%;
        text-align: center;
    }

    .menu-list {
        flex-direction: column;
        gap: 15px;
    }
    
    .header-btn{
        border-radius: 5px;
        padding: 8px 10px;
        color: #0c2267;
        border-color: transparent;
        background: transparent;
        font-weight: 800;
        text-transform: uppercase;
    }
}

body{
	overflow-x: hidden;
}


.pum-content.popmake-content{
	text-align: center;
}
.pum-container.popmake.pum-responsive.active{
    width: max-content;
    left: 50%;
    transform: translate(-50%);
}


@media screen and (max-width: 786px){
    .hero_image img{
        max-width: 100%;
        width: 100%;
    }
}

.header-container{
    max-width: 90%;
}


@media screen and (min-width : 786px){
   
	.profile-img-wrapper {
		display: flex;
		justify-content: center;
	}


	.profile-img-wrapper img{
		aspect-ratio: 12/16;
		object-fit: cover;
	}
}

.text-blue-color{
	color: rgba(0, 193, 253, 1);
}